@charset "utf-8";
/* CSS Document */
 
:root{
    --border-color: #415F66;
    --day-color: #F9F3F2;
    --outer-color: #415f66;
    --text-white:#fff;
    --text-blue:#415e65;
    --text-grey:#606060;
    --layer-color:#D9DFE0;
    --button-color: #d0a64c;
}

* {
    box-sizing: border-box;
}

body {margin:0; font-family: "Neutra Text"}
.controlsRow {width: 980px; max-width: 100%; height: 60px; display: flex; justify-content: center; align-items: center;background-color: var(--outer-color);}
.controlsRow .centered {display: flex; justify-content: space-between;align-items: center}
.controlsRow .centered .prev, 
.controlsRow .centered .next {height: 34px; width: 11px; background-image: url(img/chevron-left.svg); background-size: 20px 20px; background-repeat: no-repeat; background-position-y: center; background-position-x:left; cursor:pointer; margin-right: 0px;}  
.controlsRow .centered .prev {padding-right: 30px; padding-left: 0px}
.controlsRow .centered .next {background-image: url(img/chevron-right.svg); margin-right:0px; margin-left: 0px; padding-left: 20px; padding-right: 20px; background-position-x:right}
.controlsRow .centered .monthname{width: 200px; font-weight: bold; text-align: center; color: var(--text-white); font-size: 1.2rem; letter-spacing: 0.2rem} 

.calendarOuter {overflow: hidden}
.calendarOuter.overflow, .calendarOuter.overflow .calendar {overflow: visible}
.calendar {display: inline-block; background-color: var(--day-color); padding: 0 20px 20px 20px; width: 980px; max-width: 100%; position: relative; overflow: hidden} 
.outer {display:flex; height: 50px}
.outer .header {background-color: var(--day-color); border: 1px solid var(--day-color); display: flex; justify-content: center; align-items: center; width: 140px; height: 50px;color: var(--text-blue)}  
.week {display:flex}
.week .day {display:flex; flex-direction: column; width: calc(100% / 7); aspect-ratio: 1.3; height: 10.5vw; border: 1px solid var(--border-color); border-right: none; border-bottom: none; background-color: var(--day-color); color: var(--outer-color); padding: 5px; font-size: 1rem} 
.week .day:last-child { border-right: 1px solid var(--border-color);}
.week:last-of-type .day { border-bottom: 1px solid var(--border-color);} 
.day a.eintrag{text-decoration: none; color: var(--text-blue); cursor: pointer}
.day .dot {display:inline-block;height: 10px; width: 10px; margin-right:5px; border-radius: 100%;}
.day .dot.green {background-color: green;}
.day .dot.orange {background-color: orange;}
.day .dot.red {background-color: red;}
.day.past .dot.green , .day.past .dot.orange, .day.past .dot.red {background-color: red;} 
.day .dot.empty {background-color: transparent;}
.day .kochkurs {font-family: "Bodoni Std"; font-style: italic; font-weight: bold; color: var(--text-blue); letter-spacing: 0.05rem}
.day .kochkurs:hover {text-decoration: underline; cursor: pointer}
.day.past .kochkurs:hover {text-decoration: none; cursor: not-allowed}

.flexBetween {display: flex; flex-direction: row; justify-content: space-between} 
.fullWidth {width: 100%}
.mt10 {margin-top: 10px}

.buchung-layer {display: block; background-color: var(--layer-color); color: var(--text-blue); padding: 0 20px 20px 20px; width: 100%; max-width: 100%; position: absolute; min-height: 100%; top: -130%; left: 0;transition: 0.4s ease-out; z-index: 200;}
.buchung-layer.active {top: 0}
.buchung-layer #buchungsForm {margin: 0px auto; width: 680px; max-width: 100%}
.buchung-layer .top {display: flex; align-items: center; justify-content: center;} 
.buchung-layer .top .datum {margin-left: 10px;}
.buchung-layer .top h3 {text-align: center; font-family: "Bodoni Std"; font-size: 1.4rem; font-weight: bold; font-style: italic}
.buchung-layer .close {background-image: url("img/close.svg"); background-size: contain; background-repeat: no-repeat; height: 15px; width: 15px; position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 1000}
.buchung-layer .full {width: 100%;display: flex;flex-direction: column;align-items: baseline;margin-bottom: 20px;}
.buchung-layer .full .oneline {width: 100%;display: flex;}
.buchung-layer .full.inline {flex-direction: row; flex-wrap: wrap}
.buchung-layer .full.flexEnd {flex-direction: row; justify-content: flex-end}
.buchung-layer .full.flexBetween {flex-direction: row; justify-content: space-between}
.buchung-layer label {padding-bottom: 5px; letter-spacing: 0.7px}
.buchung-layer input,.buchung-layer select {padding: 8px 10px; padding-bottom: 8px; outline: 0; border: 1px solid transparent; color: var(--outer-color); background-color: var(--day-color)} 
.buchung-layer input.inline-input, .buchung-layer select.inline-input {display: inline-block; width: 65px; margin: 0px 3px;}
.buchung-layer input[type="text"] {width: 680px; max-width: 100%} 
.buchung-layer input[type="text"].half {width: 48%}
.buchung-layer input:hover, .buchung-layer input:active, .buchung-layer input:focus, .buchung-layer textarea:hover, .buchung-layer textarea:active, .buchung-layer textarea:focus, .buchung-layer select.inline-input:hover, .buchung-layer select.inline-input:active, .buchung-layer select.inline-input:focus { outline: none;-webkit-box-shadow: 0 0 5px 4px rgb(36 184 194 / 10%);-moz-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);box-shadow: 0 0 5px 4px rgb(36 184 194 / 10%);}
.buchung-layer input::placeholder {font-family: "Bodoni Std"; color: var(--layer-color); opacity: 1}
.buchung-layer input::-webkit-input-placeholder {font-family: "Bodoni Std"; color: var(--layer-color); opacity: 1} 
.buchung-layer input:-ms-input-placeholder {font-family: "Bodoni Std"; color: var(--layer-color); opacity: 1} 
.buchung-layer input::-ms-input-placeholder {font-family: "Bodoni Std"; color: var(--layer-color); opacity: 1} 
.buchung-layer input:-moz-placeholder {font-family: "Bodoni Std"; color: var(--layer-color); opacity: 1} 
.buchung-layer input::-moz-placeholder {font-family: "Bodoni Std"; color: var(--layer-color); opacity: 1} 
.buchung-layer input, .buchung-layer textarea, .buchung-layer select {font-family: "Bodoni Std"; font-weight: 400; font-size: 1rem; padding-bottom: 6px}  
.buchung-layer .onelineText {font-family: "Bodoni Std"; font-weight: 400}   
.buchung-layer textarea {width: 680px; max-width:100%;height: 70px;resize: none; padding: 8px; border: 1px solid transparent; color: var(--outer-color); background-color: var(--day-color)}
.buchung-layer button.sendBuchung {padding: 10px 15px; font-family: "Neutra Text"; color:var(--text-blue); background-color: var(--button-color); border: none; box-shadow: none; outline: 0; cursor: pointer; font-weight: bold; letter-spacing: 0.15rem; text-transform: uppercase; transition: 0.4s ease; font-family: "Neutra Text"; padding-top:12px}
.buchung-layer button.sendBuchung:hover, .buchung-layer button.sendBuchung:focus {border: none; background-color: var(--outer-color); color: var(--text-white)}
.buchung-layer .success {display:none;width: 680px; max-width: 100%;margin: 0px auto; text-align: center; margin-top: 50px; }
.buchung-layer .datenschutzLink {color: var(--text-blue)}  


#hoverBox {min-width: 350px; max-width: 400px; min-height: 200px; height: auto; max-height: 400px; background-color: var(--layer-color); color: var(--text-blue); display: none; position: absolute; padding: 15px 20px; font-size: 16px; line-height: 20px; transition: 0.2s ease-in-out}
#hoverBox .triangle {width: 0;height: 0;border-style: solid;border-width: 10px 15px 10px 0;border-color: transparent var(--layer-color) transparent transparent; position: absolute;top: 25px;left: -14px;transition: 0.2s ease-in-out} 
#hoverBox .headline {margin-top: 5px; font-family: "Bodoni Std"; font-weight: bold; font-style: italic; font-size: 1.3em; letter-spacing: 0.05rem} 
#hoverBox .line {padding-bottom: 10px; display: flex; align-items: center; letter-spacing: 0.05rem}
#hoverBox .line::before {content: ''; display: block; height: 13px; width: 18px; margin-right: 5px; background-size: contain; background-repeat: no-repeat; background-position-y: center}  
#hoverBox .plaetze::before {background-image: url("img/blank_icon.svg?v=2");}     
#hoverBox .datum::before {background-image: url("/img/calendar.svg?v=2");}
#hoverBox .uhrzeit::before {background-image: url("/img/clock.svg?v=2");}
#hoverBox .ort::before {background-image: url("/img/location.svg?v=2");}
#hoverBox .bemerkung::before {background-image: url("/img/align_left.svg?v=2");}
#hoverBox .buchen {padding: 10px 15px; font-family: "Neutra Text"; color:var(--text-blue); background-color: var(--button-color); border: none; box-shadow: none; outline: 0; cursor: pointer; font-weight: bold; letter-spacing: 0.15rem; text-transform: uppercase; transition: 0.4s ease; margin-top: 10px; font-size: 14px; line-height: 14px; padding-top:12px; display: inline-block}   
#hoverBox .buchen:hover {border: none; background-color: var(--outer-color); color: var(--text-white)}      
#hoverBox .close {background-image: url("img/close.svg"); background-size: contain; background-repeat: no-repeat; height: 10px; width: 10px; position: absolute; top: 15px; right: 15px; cursor: pointer; z-index: 1000}     
#hoverBox .buchen.disabled {background-color: #000; color: #fff; border: 1px solid var(--day-color); opacity: 0.4; cursor: not-allowed}    

.storno {color:var(--text-color)}
#stornoBox {position: absolute; top:-100%; z-index: 1000; background-color: var(--day-color); height: calc(100% - 60px); padding: 20px; transition: 0.4s ease} 
#stornoBox.visible {top: 60px;}
#stornoBox .close {background-image: url("img/close.svg"); background-size: contain; background-repeat: no-repeat; height: 15px; width: 15px; position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 1000}
#stornoBox h3 {text-align: center; font-family: "Bodoni Std"; font-size: 1.4rem; font-weight: bold; font-style: italic}

.checkmark {display:inline-block; width: 22px; height:22px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); position: relative; top: 5px; margin-left:10px;}
.checkmark.inaktiv span.checkmark_stem, .checkmark.inaktiv span.checkmark_kick  {visibility:hidden}
.checkmark.aktiv span.checkmark_stem, .checkmark.aktiv span.checkmark_kick  {visibility:visible}
.checkmark_circle {cursor: pointer}
.checkmark_circle.inaktiv {position: absolute;width:22px;height:22px;background-color: var(--button-color);border-radius:11px;left:0;top:0;}
.checkmark_circle.aktiv {position: absolute;width:22px;height:22px;background-color: var(--button-color);border-radius:11px;border: 1px solid red;left:0;top:0;}       
.checkmark_stem {position: absolute;width:3px;height:9px;background-color:var(--text-blue);left:11px;top:6px;}
.checkmark_kick {position: absolute;width:3px;height:3px;background-color:var(--text-blue);left:8px;top:12px;}

.buchung-layer button.sendBuchung:disabled, .buchung-layer button.sendBuchung[disabled]{background-color: #000; color: #fff; border: 1px solid var(--day-color); opacity: 0.4; cursor:not-allowed}
.borderonbuttonhover.inaktiv { padding: 5px 5px 5px 0; margin: 0}  
.borderonbuttonhover.aktiv {border: 1px solid red; padding: 5px}


@media (max-width: 960px) {
    .calendarOuter {height: auto}
    .calendar {overflow:auto}
    .buchung-layer {height: auto; top:-280%}
    #hoverBox {min-width: 270px; font-size: 14px}
}

@media (max-width: 670px) {
    .noMobile {display: none}
    .day {aspect-ratio:1}
}

@media (max-width: 550px) {
    .noMobile {display: none}
    .buchung-layer {height: auto; min-height: 100%; top:-370%; transition: 0.7s ease-in-out}  
    #hoverBox {max-width: 100%}
    #hoverBox .triangle {display: none}
}