@charset "utf-8";

.formular-content {
	padding: 50px 15px;
	max-width: 860px;
	margin: auto;
}

.formular-content .content-inner {
	max-width: 640px;
	padding-top: 15px;
	margin: auto;
}

.formular-content h2 {
	font-family: 'Antenna Cond Bla', sans-serif;
	font-size: 18px;
	line-height: 22px;
	text-transform: uppercase;
	margin-top: 17px;
	font-weight: normal;
}

.formular-content h3 {
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 16px;
	line-height: 20px;
	margin-top: 20px;
	margin-botton: 14px;
	padding: 0px;
}

.formular-content ul {
	padding: 0px;
	margin: 0px;
}

.formular-content li {
	list-style-type: none;
	padding-left: 20px;
	background-image: url(../img/icon-check.svg);
	background-size: 12px 12px;
    background-position: left top 2.5px;
    background-repeat: no-repeat;
	margin-bottom: 7px;
}

.formular-content .fortschrittsanzeige {
	font-size: 0;
	line-height: 0y;
	text-align: center;
}	

.formular-content .fortschrittsanzeige .step {
	display: inline-block;
	width: 32px;
	height: 4px;
	background-color: #D9D9D9;
	margin: 5px;
}

.formular-content .fortschrittsanzeige .step.active { background-color: #E5007D; }

.formular-content .zurueck-link {
	display: inline-block;
	text-decoration: none;
	background-image: url(../img/zurueck-button.png); 
	background-size: 20px 20px;
	background-position: left center;
	background-repeat: no-repeat;
	padding: 3px 0px 3px 27px;
	margin-top: 10px;
}

.formular-content .textfeld {
	box-sizing: border-box;
    font-family: Arial, sans-serif;
	width: 100%;
	margin-bottom: 12px;
}

.formular-content .textfeld.narrow {
	width: calc(50% - 6px);	
}

.formular-content .textfeld.narrow.left {
	margin-right: 8px;
}

.formular-content input.textfeld {
	font-size: 14px;
	padding: 10px 20px 10px 7px;
    border: 1px solid #a9afb9;
    border-radius: 4px;
}

.formular-content .textfeld:active, .formular-content .textfeld:focus {
    border: 1px solid #E5007D;
}	

.formular-content input.textfeld::placeholder {
	color: #a9afb9;
}

.formular-content textarea {
	box-sizing: border-box;
    font-family: Arial, sans-serif;
	width: 100%;
	margin-bottom: 8px;
	font-size: 14px;
	padding: 10px 20px 10px 7px;
    border: 1px solid #a9afb9;
    border-radius: 4px;
	height: 100px;
	resize: none;
}

.formular-content textarea::placeholder {
	color: #a9afb9;
}
.formular-content select {
    font-family: Arial, sans-serif;
}

.formular-content .datumsauswahl { 
	position: relative; 
	margin-bottom: 25px;
	max-width: 340px;
}

.formular-content .datumsfeld.tag { width: 48px; }
.formular-content .datumsfeld.monat { width: 100px; }
.formular-content .datumsfeld.jahr { width: 64px; }

.formular-content .customSelect {
    border: 1px solid #a9afb9;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    background-image: url(../img/icon-dropdown.svg);
	background-size: 16px 11px;
    background-position: right 8px center;
    background-repeat: no-repeat;
	margin-right: 3px;
	padding: 10px 0px 10px 10px;
}

.formular-content .customSelectHover {
   border: 1px solid #E5007D;
}	

.formular-content .datumsauswahl .kalender-button { 
	position: absolute;
	right: 0px;
	top: 2px;
	border-radius: 4px;
	background-color: #F7F8F9;
	padding: 9px 12px;
}

.formular-content .datumsauswahl .kalender { display: none; }	

.formular-content .radio-button-group {
	margin-bottom: 25px;
}

.formular-content .radio-button {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: #F7F8F9;
	border-radius: 4px;
	padding: 11px 12px 11px 37px;
	margin-top: 4px; 
	margin-bottom: 14px; 
	background-image: url(../img/checkbox-empty.svg?2);
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: left 12px center;
}

.formular-content .radio-button.selected { 
	background-color: #FFD400; 
	background-image: url(../img/checkbox-set.svg);
}

.formular-content .radio-button.disabled { 
	color: #A9AFB9; 
}

.formular-content .radio-button.kursart {
	padding-right: 120px;
}

.formular-content .radio-button .ab-preis {
	position: absolute;
	right: 40px;
	top: calc(50% - 8px);
	color: #898f99;
	font-size: 12.5px;
}

.formular-content .radio-button.disabled .ab-preis { color: #C9CFE9; }
.formular-content .radio-button.selected .ab-preis { color: #A9A069; } 

.formular-content .radio-button .infolink {
	position: absolute;
	right: 13px;
	top: calc(50% - 8px);
}

.formular-content .radio-button.disabled .infolink { filter: opacity(30%); }

.formular-content .missing {
	background-color: rgba(229,0,125,0.1);
}


.formular-content .fehler {
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 15px;
	line-height: 19px;
	margin-top: 25px;
	margin-bottom: -15px;
	text-align: center;
}

.formular-content .buttons {
	text-align: center;
}

.formular-content .hoverbuttons {
	display: none;
	position: fixed;
	z-index: 999999;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background-color: white;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 40px;
}

.formular-content .primary-button {
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	max-width: 312px;
	background-color: #E5007D;
	color: white;
	border: none;
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 15px;
	line-height: 19px;
	border-radius: 4px;
	padding: 11px 12px;
	text-transform: uppercase;
	text-decoration: none;
	margin: auto;
	margin-top: 32px;
	text-align: center;
}

.formular-content .hoverbuttons .primary-button { max-width: 330px; margin-top: 0px; margin-bottom: 0px; }

.formular-content .primary-button:hover { background-color: #FF299E; }

.formular-content .secondary-button {
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	max-width: 312px;
	background-color: #F7F8F9;
	color: black;
	border: none;
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 15px;
	line-height: 19px;
	border-radius: 4px;
	padding: 11px 12px;
	text-transform: uppercase;
	text-decoration: none;
	margin-top: 12px;
}

.formular-content .secondary-button:hover { background-color: #DFE3E7; }

.formular-content .button-trenner { display: inline-block; width: 8px; }

.formular-content .yellowhead {
	background-color: #FFD400;
	position: relative;
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 16px;
	line-height: 19px;
	padding: 12px 120px 11px 15px;
	margin-bottom: 4px;
}

.formular-content .yellowhead .ab-preis {
	position: absolute;
	right: 15px;
	top: 13px;
}

.formular-content .listhead {
	background-color: black;
	color: white;
	position: relative;
	font-family: 'Antenna Cond Bla', sans-serif;
	font-size: 15px;
	line-height: 19px;
	text-transform: uppercase;
	padding: 3px 15px;
}

.formular-content .listhead .col2 {
	position: absolute;
	right: 15px;
	top: 3px;
}

.formular-content .listentry {
	margin: 0px;
	border-radius: 0px;
	padding-right: 20px;
	padding-left: 39px;
	line-height: 20px;
}

.formular-content .listentry h3 {
	font-size: inherit;
	margin: 0px;
}

.formular-content .listentry.nobutton {
	background-image: none;
	padding-left: 15px;
}

.formular-content .listentry.odd { background-color: white; }
.formular-content .listentry.odd.selected { background-color: #FFD400; }

.formular-content .listentry .preis {
	position: absolute;
	right: 15px;
	top: 11px;
	font-weight: bold;
}

.formular-content .listentry .preis .preisinfolink { cursor: pointer; }


.formular-content .listentry .bezeichnung {
	font-weight: bold;
	padding-right: 60px;
	line-height: 17px;
}

.formular-content .listentry .beschreibung {
	font-size: 12px;
	line-height: 17px;
}

.formular-content .listentry .beschreibung div {
	background: none !important;
}

.formular-content .listentry .beschreibung p {
	margin-top: 7px;
	margin-bottom: 3px;
	background: none !important;
}


.formular-content .listentry .wochentage {
	background-image: url(../img/icon-kalender.svg);
	background-size: 14px 16px;
	background-repeat: no-repeat;
	background-position: left 1px center;
	padding: 2px 0px 1px 25px;
	margin-top: 5px;
}

.formular-content .listentry .uhrzeit {
	background-image: url(../img/icon-uhrzeit.svg);
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: left center;
	padding: 2px 0px 1px 25px;
	margin-top: 5px;
}

.formular-content .listentry .info {
	background-image: url(../img/icon-kurs.svg);
	background-size: 18px 15px;
	background-repeat: no-repeat;
	background-position: left -1px center;
	padding: 2px 0px 1px 25px;
	margin-top: 5px;
}

.formular-content .listentry.disabled .wochentage { background-image: url(../img/icon-kalender-disabled.svg); }
.formular-content .listentry.disabled .uhrzeit { background-image: url(../img/icon-uhrzeit-disabled.svg); }
.formular-content .listentry.disabled .info { background-image: url(../img/icon-kurs-disabled.svg); }

.formular-content .listentry .delete-kurs {
	position: absolute;
	right: -12px;
	top: 45px;
}

.formular-content .radio-button.zahlungsmodalitaeten {
	font-weight: bold;
	padding-top: 13px;
	padding-bottom: 13px;
}

.formular-content .yellowbar {
	background-color: #FFD400;
	position: relative;
	font-weight: bold;
	padding: 13px 80px 12px 15px;
	margin-top: 12px;
}

.formular-content .greybar {
	background-color: #F7F8F9;
	position: relative;
	font-weight: bold;
	padding: 13px 80px 12px 15px;
	margin-top: 12px;
}

.formular-content .gutschein-bar {
	margin-top: 12px;
}

.formular-content .preis-zusatzinfo {
	padding: 5px 10px;
	text-align: right;
}

.formular-content .yellowbar .preis, .formular-content .greybar .preis, .formular-content .radio-button .preis  {
	position: absolute;
	right: 15px;
	top: 13px;
}

.formular-content .yellowbar .preis.durchgestrichen, .formular-content .radio-button .preis.durchgestrichen {
	position: absolute;
	right: 15px;
	top: 3px;
	text-decoration: line-through;
}

.formular-content .radio-button.zahlungsmodalitaeten .preis.durchgestrichen  {
	top: 6px;
}

.formular-content .yellowbar .preis.rabattiert, .formular-content .radio-button .preis.rabattiert {
	position: absolute;
	right: 15px;
	top: 22px;
	color: #E5007D;
}

.formular-content .zusatzfunktionen {
	border-top: 1px solid #F7F8F9;
	border-bottom: 1px solid #F7F8F9;
	margin-top: 30px;
}

.formular-content .weitere-kurse-button {
	position: relative;
	display: block;
	padding: 15px 50px 14px 52px;
	color: #E5007D; 
	text-decoration: none;
	background-image: url(../img/aktionen-icon-1.png);
	background-size: 44px 38px;
	background-repeat: no-repeat;
	background-position: left center;
}

.formular-content .weitere-kurse-button .plus {
	position: absolute;
	right: 0px;
	top: calc(50% - 10px);
	font-size: 22px;
}

.formular-content .accordion-head {
	border-top: 1px solid #F7F8F9;
	padding: 17px 40px 16px 0px;
	cursor: pointer;
	background-image: url(../img/ausklapp-button.png);
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: right center;
}

.formular-content .accordion-head.expanded {
	background-image: url(../img/close-button.png);
}

.formular-content .accordion-body {
	padding-bottom: 20px;
	display: none;
}

.formular-content .accordion-body h2:first-child {
	margin-top: 0px;
}

.formular-content .accordion-body h3:first-child {
	margin-top: 0px;
}

.formular-content .accordion-body p:first-child {
	margin-top: 0px;
}

.formular-content .accordion-body .stornobedingungen {
	font-size: 10px; 
	line-height: 13px;
	margin-top: 15px;
}

.formular-content .kursgruppen-icons {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 0px;
}

.formular-content .kursgruppen-icons .radio-button {
	position: relative;
	display: inline-block;
	width: auto;
	background: none !important;
	border-radius: 0px;
	padding: 0px;
	margin: 5px 3px; 
}

.formular-content .kursgruppen-icons .radio-button img {
	width: 80px;
	height: 98px;
	filter: saturate(0%) brightness(105%);
}

.formular-content .kursgruppen-icons .radio-button.selected img {
	filter: saturate(100%) brightness(100%);
}

.formular-content .kursgruppen-icons .radio-button.disabled img {
	opacity: 0.3;
}

.formular-content .smallinfo {
	display: block;
	font-size: 10px;
	line-height: 15px;
	padding-bottom: 3px;
}

/**** ACCORDION-GROUP ****/

.accordion-group-button {
	text-align: center;
}

.accordion-group {
	display: none;
}

/**** DATEPICKER ****/
.formular-content .ui-widget.ui-widget-content { border: none; padding-top: 15px; padding-bottom: 10px; }
.formular-content .ui-widget-header { background-color: transparent; border: none; }
.formular-content .ui-widget-content .ui-state-default { border: none; background-color: transparent; color: black; }
.formular-content .ui-widget-content .ui-state-hover { border: none; background-color: transparent; }
.formular-content .ui-widget-content .ui-state-highlight  { color: black; background-color: transparent; }
.formular-content .ui-widget-content .ui-state-active { color: white; background-color: #E5007D; }
.formular-content .ui-widget-content .ui-datepicker-prev .ui-icon { background-image: url(../img/weiterpfeil-gelb.png); background-position: 0px 0px; background-size: contain; width: 20px; height: 20px; margin-top: -7px; margin-left: -5px; transform: scaleX(-1); }
.formular-content .ui-widget-content .ui-datepicker-next .ui-icon { background-image: url(../img/weiterpfeil-gelb.png); background-position: 0px 0px; background-size: contain; width: 20px; height: 20px; margin-top: -7px; margin-left: -15px; }
.formular-content .ui-datepicker { width: 280px; margin: auto; }
.formular-content .ui-datepicker table { font-size: 14px; }
.formular-content .ui-datepicker td { padding: 2px 6px; width: 30px; }
.formular-content .ui-datepicker td span, .formular-content .ui-datepicker td a { text-align: center; padding: 5px 0px; border-radius: 50%; } 
.formular-content .ui-datepicker .ui-datepicker-title { font-family: 'Antenna Cond Bd', sans-serif; font-size: 16px; }
.formular-content .ui-datepicker .ui-datepicker-prev-hover { left: 2px; top: 2px; }
.formular-content .ui-datepicker .ui-datepicker-next-hover { right: 2px; top: 2px; }
.formular-content .ui-datepicker th { font-weight: normal; text-transform: uppercase; color: #888888; }

.formular-content .toplink {
	z-index: 9999;
	position: fixed;
	bottom: 25px;
	right: 10px;
	display: none;
}

.infopopup {
	display: none;
}

.infopopup .overlay, .alert .overlay  {
	box-sizing: border-box;
	position: fixed;
	z-index: 999999;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 50px;
	padding-bottom: 50px;
	overflow-y: scroll;
}

.infowindow {
	position: relative;
	padding: 25px 15px;
	max-width: 300px;
	margin: auto;
	border: 2px solid #FFD400;
	border-radius: 4px;
	background-color: white;
	font-size: 12px;
	line-height: 18px;
}

.infowindow h2 {
	margin-top: 0px;
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 16px;
	line-height: 19px;
	text-transform: none;
}

.infowindow .closebutton {
	position: absolute;
	right: 10px;
	top: 8px;
}

.alertwindow {
	box-sizing: border-box;
	position: relative;
	padding: 10px 50px 5px 80px;
	max-width: 330px;
	margin: auto;
	border: 2px solid #E5007D;
	border-radius: 4px;
	background-color: white;
	font-size: 10px;
	line-height: 14px;
	background-image: url(../img/icon-alert.svg);
	background-size: 44px 38px;
	background-repeat: no-repeat;
	background-position: left 18px center;
}

.alertwindow h2 {
	margin: 0px;
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 13px;
	line-height: 16px;
	text-transform: none;
}

.alertwindow p {
	margin-top: 4px;
	margin-bottom: 4px;
}

.alertwindow a { color: #E5007D; }

.alertwindow .closebutton {
	position: absolute;
	right: 15px;
	top: calc(50% - 10px);
}

/**** KURSFINDER – INFOPOPUP ****/

.kursfinder-infopopup {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -137px;
	margin-top: -60px;
	background-color: rgba(0,0,0,0.6);
	background-image: url(../img/kursfinder-icon.png);
	background-repeat: no-repeat;
	background-size: 75px 67px;
	background-position: top 10px center;
	color: white;
	border-radius: 30px;
	width: 240px;
	padding: 75px 25px 30px 25px;
	text-align: center;
}

.kursfinder-infopopup h2 {
	text-transform: uppercase;
	font-family:"Antenna Cond Bla";
	font-size: 16px;
}

.kursfinder-infopopup .button {
	box-sizing: border-box;
	display: inline-block;
	width: 110px;
	max-width: 312px;
	background-color: #E5007D;
	color: white;
	border: none;
	font-family: 'Antenna Cond Bd', sans-serif;
	font-size: 15px;
	line-height: 19px;
	border-radius: 4px;
	padding: 11px 12px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}


.kursfinder-infopopup .button:hover { background-color: #FF299E; }

.kursfinder-infopopup .button.zurueck {
	background-color: white;
	color: black;
}

.kursfinder-infopopup .button.zurueck:hover { background-color: #E7E7E7; }


/**** KURSFINDER – INFOPOPUP MIT DETAILS ****/

.kursfinder-detailpopup-container {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 320px;
	height: 390px;
	margin-left: -160px;
	margin-top: -110px;
	//background-color: rgba(255,255,255,0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.kursfinder-detailpopup-container .kursfinder-infopopup {
	position: relative;
	left: auto;
	top: auto;
	box-sizing: border-box;
	width: 100%;
	border-radius: 15px;
	background-image: none;
	padding: 24px;
	margin: 0;
	text-align: left;
}

.kursfinder-detailpopup-container .kursfinder-infopopup h1 { 
	position: absolute;
	left: 0;
	top: -28px;
	margin: 0;
}

.kursfinder-detailpopup-container .kursfinder-infopopup h2 { 
	max-width: 240px;
	margin-bottom: 0.3em; 
	font-size: 14.5px;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .logo { 
	position: absolute;
	right: 20px; 
	top: 38px;
}
 
.kursfinder-detailpopup-container .kursfinder-infopopup p { 
	margin: 0; 
	max-width: 240px;  
}

.kursfinder-detailpopup-container .kursfinder-infopopup .buttons { 
	position: absolute; 
	left: 0;
	bottom: -48px;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .button { width: 156px; }

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste {
	text-align: left; 
	font-weight: bold;
	max-height: 210px;
	overflow-y: scroll; 
	-ms-overflow-style: none; 
	scrollbar-width: none; 
}
.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste::-webkit-scrollbar { display: none; }

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste-scroll-up {
	position: absolute;
	right: -20px;
	top: 110px;
	display: none;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste-scroll-down {
	position: absolute;
	right: -20px;
	bottom: 20px;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste .entry {
	position: relative;
	border-bottom: 1px solid white;
	padding-top: 9px;
	padding-bottom: 8px;
	height: 37px;
	overflow: hidden;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste .entry:last-child { border: none; }

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste .entry .bezeichnung {
	position: absolute;
	left: 0;
	bottom: 8px;
	padding-right: 90px;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste .entry .infolink {
	position: absolute;
	right: 0;
	top: 9px;
}

.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste .entry .ab-preis {
	position: absolute;
	right: 0;
	bottom: 8px;
}

@media only screen and (max-width: 1000px) { 
	.header-section .header { position: relative; background-color: black; background-image: none; }
	.standort-header .logo img { width: 120px; }
	.mobile-menu-icons { top: 13px; }
	.mobile-back-button { display: none !important; }
	.kursauswahl-formular .header-section { min-height: 0px !important; }
	.kursauswahl-formular .headerimage-container { display: none; }
	.formular-content { padding: 25px 15px; max-width: 330px; }
	.formular-content .content-inner { padding-top: 0px; }
	.formular-content .primary-button { max-width: none; }
	.formular-content .secondary-button { max-width: none; }
	.formular-content .button-trenner { display: none; }
	.formular-content .fehler { text-align: left; }
	.formular-content .radio-button.kursart { padding-right: 34px; }
	.formular-content .radio-button .ab-preis { position: relative; right: 0px; top: 0px; }
	.kursfinder-infopopup { margin-top: -75px; }
	.kursfinder-detailpopup-container { margin-top: -160px; }
}

@media only screen and (max-width: 385px) {
	.kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste-scroll-up, .kursfinder-detailpopup-container .kursfinder-infopopup .kursart-liste-scroll-down { right: 5px; }
}