/*
 * https://hoecker-moehnesee.de/kunden
 *
 * Copyright 2015 Sven Höcker
 *
 */
 
* 


:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #222222; /* Default color used for the majority of the text content across the entire website */
  --heading-color: color(display-p3 0.329 0.336 0.326 / 0.802); /* Color for headings, subheadings and title throughout the website */
  --accent-color: color(display-p3 0.329 0.336 0.326 / 0.802); /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --white-color: white; /* Default color used for the majority of the text content across the entire website */
  --grey-footer-color: #535353; /* Default color used for the majority of the text content across the entire website */ 
  --grey-color: color(display-p3 0.212 0.243 0.255); /* Default color used for the majority of the text content across the entire website */ 
  --blue-color: #0957aa; /* Default color used for the majority of the text content across the entire website */
  --pink-color: color(display-p3 0.757 0.259 0.478); /* Default color used for the majority of the text content across the entire website */ 
  --red-color: #ae0829; /* Default color used for the majority of the text content across the entire website */ 
  --green-color: #198754; /* Default color used for the majority of the text content across the entire website */
  --yellow-color: color(display-p3 0.867 0.588 0.302); /* Default color used for the majority of the text content across the entire website */
  --orange-color: color(display-p3 0.75 0.387 0.015); /* Default color used for the majority of the text content across the entire website */
  --home-color: color(display-p3 0.329 0.336 0.326 / 0.802); /* Color for headings, subheadings and title throughout the website */
  --light-green-color: #1db548; /* Helles Grün */
  --light-rot-color: #ae0829;   /* Helles Rot */
  --light-grey-color: #f0f0f0; /* Hellgrau für leere Felder */
  --topbar-color: #222222; /* Default color used for the majority of the text content across the entire website */
  
}


{
	-webkit-overflow-scrolling: touch;
	-webkit-touch-callout: none;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

body {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #000000;
	/*background-color: #eee; */
}

body .viewport {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

body .viewport .frame {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0; 
}

body .viewport .frame .menu {
  display: none;
  float: left;
  height: 100% !important;
  width: 320px;
  background-color: #444;
}

body .viewport .frame .menu ul {
	margin: 0;
	padding: 0;
}

body .viewport .frame .menu .navigation_item {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #444;
}

body .viewport .frame .menu .navigation_item .badge {
	margin-top: 10px;
}

body .viewport .frame .menu .navigation_item span {
	margin-right: 5px;
}

body .viewport .frame .menu .search {
	background-color: #333;
	padding: 10px 20px;
}

body .viewport .frame .menu .navigation_item a:link, body .viewport .frame .menu .navigation_item a:active, body .viewport .frame .menu .navigation_item a:visited {
	display: block;
	line-height: 40px;
	height: 40px;
	margin: 0;
	padding: 0px 10px;
	font-size: 18px;
	vertical-align: middle;
	color: #fff;
	background-color: #555;
	font-weight: normal;
}

body .viewport .frame .menu .navigation_item a:hover, body .viewport .frame .menu .active a:link, body .viewport .frame .menu .active a:active, body .viewport .frame .menu .active a:visited {
	background-color: #444;
	text-decoration: none;
}

body .viewport .frame .menu .divider {
	display: block;
	line-height: 40px;
	height: 40px;
	background-color: #333;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	font-size: 18px;
	font-weight: bold;
}

body .viewport .frame .view {
  width: 50%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

body .viewport .frame .view #content {
  margin: 0px 0px auto 0px !important;
  text-align: justify; 
}

img#logo {
	width: 24px;
	height: 20px;
}

bc {
	color: color(display-p3 0.757 0.259 0.478);
	font-weight: bold;
}

.content-box-center {
	padding: 10px;
	background-color: #f9f9f9;
	border-left: 4px solid color(display-p3 0.757 0.259 0.478);/*hier war keine farbe. nach solid;*/
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	margin-bottom: 20px;
	font-size: 0.7em;
}

.book-button {
  display: inline-block;
  perspective: 1000px; /* 3D-Perspektive */
  cursor: pointer;
}

/* Buchstruktur */
.book {
  position: relative;
  width: 150px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

/* Vorderseite des Buches */
.book-front {
  width: 150px;
  height: 200px;
  background: color(display-p3 0.212 0.243 0.255); /* Hintergrund bleibt die Default-Farbe */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  backface-visibility: hidden;
  z-index: 2;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  transform: rotateY(0deg);
  padding-top: 15px;
  box-sizing: border-box;
  outline: 1px solid black; /* Weißer Rahmen um das Element */
  border: 8px solid white; /* Grüner äußerer Rand */
}
/* Logo oben in der Mitte */
.book-logo {
  width: 60px; /* Passe die Größe an */
  height: auto;
  margin-bottom: 10px; /* Abstand zum Text */
}

.book-img {
  width: 80%; /* Passe die Größe an */
  height: auto;
  margin-top: 10px; /* Abstand zum Text */
  
}

/* Text auf der Vorderseite */
.book-text {
  color: black;
  font-family: 'Arial', sans-serif;
  font-size: 1.0em;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  margin: 5px;
}

/* Rückseite des Buches */
.book-back {
  width: 150px;
  height: 200px;
  background: color(display-p3 0.757 0.259 0.478);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  backface-visibility: hidden; /* Unsichtbar von der Vorderseite */
  transform: rotateY(180deg);
  outline: 1px solid black; /* Weißer Rahmen um das Element */
  border: 8px solid white; /* Grüner äußerer Rand */
}

.book-link {
  color: white;
  font-family: 'Arial', sans-serif;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.book-link:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Hover-Effekt: Buchdeckel klappt auf */
.book-button:hover .book {
  transform: rotateY(-180deg); /* Buchdeckel klappt auf */
}



.login-panel {
	max-width: 728px;
	background-color: #000000;
	padding: 5px 20px 20px;
	margin: 20% auto 20px auto;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
	box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

@media screen and (max-height:480px) {
	.login-panel {
		margin: 10px auto !important;
	}
}

.login-panel h3 {
	margin-top: 10px;
}

.no-border {
	border: 0;
}

textarea {
    resize: none;
}

.badge-default {
	background-color: #aaa;
}

.badge-primary {
	background-color: #428bca;
}

.badge-info {
	background-color: #469bc5;
}

.badge-success {
	background-color: #5cb85c;
}

.badge-danger {
	background-color: #d9534f;
}

.datepicker, .ui-autocomplete, .bootstrap-timepicker-widget {
	z-index: 9999;
}

.clickable {
	cursor: pointer;
}

.nowrap {
	white-space: nowrap !important;
}

h3 .fa {
	margin-right: 8px;
}

td .fa {
	margin: 0px 8px;
}

td.text-left {
	text-align: left !important;
}

td.text-right {
	text-align: right !important;
}

td.text-center {
	text-align: center !important;
}

th.text-left {
	text-align: left !important;
}

th.text-right {
	text-align: right !important;
}

th.text-center {
	text-align: center !important;
}

td .td-icon {
	width: 20px;
	max-width: 20px;
	margin: 0px 8px;
	text-align: right;
}

.bold {
	font-weight: bold;
}

.semibold {
	font-weight: 500;
}

.margin-top {
	margin-top: 20px;
}

.margin-top10 {
	margin-top: 10px;
}

.margin-top5 {
	margin-top: 5px;
}

.margin-top0 {
	margin-top: 0 !important;
}

.margin10 {
	margin-left: 10px;
	margin-right: 10px;
}

.margin-left10 {
	margin-left: 10px;
}

.margin-left15 {
	margin-left: 15px;
}

.margin-right10 {
	margin-right: 10px;
}

.margin-right15 {
	margin-right: 15px;
}

.margin5 {
	margin-left: 5px;
	margin-right: 5px;
}

.margin-left5 {
	margin-left: 5px;
}

.margin-right5 {
	margin-right: 5px;
}

.margin-bottom0 {
	margin-bottom: 0 !important;
}

.margin-bottom5 {
	margin-bottom: 5 !important;
}

.img-question {
	margin-left: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 250px;
	max-height: 200px;
	
}

.video50 {
	width: 50%;
	height: 50%;	
}

.video100 {

	max-width:100%; 
	height:auto;	
}


.table_padding th {
	padding-right: 10px;
}

#calendar-menu {
	float: right;
	font-size: 24px;
	cursor: pointer;
	margin-right: 10px;
}

@media only screen and (min-width: 992px) {
	.equal, .equal > div[class*='col-'] {  
	    display: -webkit-flex;
	    display: flex;
	    flex: 1 1 auto;
	}
	
	.equal div[class*='col-'] .panel {
		width: 100% !important;
	}
}

.hide, .invisibly {
	display: none;
}

.icon {
	display: block;
	border: 0;
	background-size: cover;
	background-repeat: no-repeat;
	float: left;
}

.icon16 {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	margin: 0px 4px;
}

.icon-segelschule {
	background-image: url('../images/pdf-segelschule.png');
}

.icon-segelschule-blank {
	background-image: url('../images/pdf-segelschule-blank.png');
}

.icon-strandkorb {
	background-image: url('../images/pdf-strandkorb.png');
}

.icon-strandkorb-blank {
	background-image: url('../images/pdf-strandkorb-blank.png');
}

.icon-ferienwohnung {
	background-image: url('../images/pdf-ferienwohnung.png');
}

.icon-ferienwohnung-blank {
	background-image: url('../images/pdf-ferienwohnung-blank.png');
}

tr.showAll {
	cursor: pointer;
}

label {
	text-align: left !important;
}

select {
	min-width: 50px !important;
}

/* Bootstrap changes */

.hide {
	display: none !important;
}

.navbar-header {
    width: 100%;
    height: 50px;
    margin: 10px;
}

.navbar-brand {
	float: none;
	color: white !important;
	font-weight: 500;
	margin-left: -24px;
}

.panel {
	margin-top: 20px;
}

.panel.no_margin {
	margin-top: 0;
}

a.navbar-brand:link,ul.navbar-nav a:link {
	color: white !important;
}

.has-error input {
	background-color: #fdd;
}

.modal-dialog {
	margin-top: 75px;
}

#toggle-menu {
	float: left;
	font-size: 24px;
	cursor: pointer;
	margin-left: -10px;
}

.navbar {
	color: #ffffff;
	min-height: 50px;
	height: 50px;
	border: none;
	opacity: 0.95;
}

.navbar .form-group, body .viewport .frame .menu .search .form-group {
	margin: -3px 0px 0px 0px;
}

li.search {
	margin-top: -10px;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
	vertical-align: middle;
	text-align: left;
}

.panel-collapse .table {
	margin: 0;
}

.nav-tabs {
	margin-top: 20px;
	margin-bottom: -24px;
	border-bottom: 0;
	background-color: #ddd;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

.nav-tabs li a:hover {
	background-color: #ccc;
}

.nav-tabs li.active a:link, .nav-tabs li.active a:active, .nav-tabs li.active a:visited, .nav-tabs li.active a:hover {
	background-color: #f5f5f5;
	font-weight: 500;
}

.nav-tabs.nav-justified {
	z-index: 100000;
}

.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>.active>a:focus {
	border-bottom: 0;
}

.nav-pills {
	margin-top: 20px;
}

.nav-pills li a:hover {
	background-color: #ccc;
}

h2.panel-title {
	font-size: 26px;
}

.badge {
	padding-left: 9px;
	padding-right: 9px;
}

.dl-horizontal {
  margin-bottom: 0;
}

.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  content: "";
  line-height: 0;
}

.dl-horizontal:after {
  clear: both;
}

@media screen and (max-width:480px) {
	.dl-horizontal dt {
	  float: left;
	  width: 115px;
	  clear: left;
	  text-align: right;
	  overflow: hidden;
	  text-overflow: ellipsis !important;
	  white-space: nowrap;
	  margin-right: 10px;
	}
	
	.dl-horizontal dd {
	  margin-left: 125px;
	  overflow: hidden;
	  text-overflow: ellipsis !important;
	}
}

@media screen and (min-width:481px) {
	.dl-horizontal dt {
	  float: left;
	  width: 150px;
	  clear: left;
	  text-align: right;
	  overflow: hidden;
	  text-overflow: ellipsis !important;
	  white-space: nowrap;
	  margin-right: 10px;
	}
	
	.dl-horizontal dd {
	  margin-left: 160px;
	}
}

.panel-default>.panel-heading>a[data-toggle="collapse"] {
	color: #333 !important;
	text-decoration: none;
}


.panel-primary>.panel-heading>a[data-toggle="collapse"] {
	color: #fff !important;
	text-decoration: none;
}

.panel-info>.panel-heading>a[data-toggle="collapse"] {
	color: #31708f !important;
	text-decoration: none;
}

.panel-danger>.panel-heading>a[data-toggle="collapse"] {
	color: #a94442 !important;
	text-decoration: none;
}

.panel-warning>.panel-heading>a[data-toggle="collapse"] {
	color: #86590c !important;
	text-decoration: none;
}

.panel-success>.panel-heading>a[data-toggle="collapse"] {
	color: #3c763d !important;
	text-decoration: none;
}

/* Custom Navbar */

.navbar-basic {
	background: #545454; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #545454 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #545454 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #545454 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #545454 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #545454 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */
}

.navbar-segelschule {
	background: #00a7ff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYTdmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDBkNTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #00a7ff 0%, #000d53 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a7ff), color-stop(100%,#000d53)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00a7ff 0%,#000d53 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00a7ff 0%,#000d53 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00a7ff 0%,#000d53 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #00a7ff 0%,#000d53 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a7ff', endColorstr='#000d53',GradientType=0 ); /* IE6-8 */
}

.navbar-strandkorb {
	/* background: #9D2531; */
	background: #ff0151; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDE1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NDBmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ff0151 0%, #540f00 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0151), color-stop(100%,#540f00)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff0151 0%,#540f00 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff0151 0%,#540f00 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff0151 0%,#540f00 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff0151 0%,#540f00 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0151', endColorstr='#540f00',GradientType=0 ); /* IE6-8 */
}

a.black:link, a.black:active, a.black:visited {
	font-weight: 500;
	color: black;
}

a.black:hover {
	color: #555;
	text-decoration: none;
}

a.white:link, a.white:active, a.white:visited {
	font-weight: 500;
	color: white;
}

a.black:hover {
	color: white;
	text-decoration: none;
}

a.line-through:hover {
	text-decoration: line-through;
	color: #AA0000;
}

/*
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.datepicker {
	top:0;
	left:0;
	padding:4px;
	margin-top:1px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.datepicker:before {
	content:'';
	display:inline-block;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #ccc;
	border-bottom-color:rgba(0,0,0,0.2);
	position:absolute;
	top:-7px;
	left:6px;
}

.datepicker:after {
	content:'';
	display:inline-block;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #fff;
	position:absolute;
	top:-6px;
	left:7px;
}

.datepicker > div {
	display:none;
}

.datepicker table {
	width:100%;
	margin:0;
}

.datepicker td,.datepicker th {
	text-align:center;
	width:20px;
	height:20px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.datepicker td.day:hover {
	background:#eee;
	cursor:pointer;
}

.datepicker td.day.disabled {
	color:#eee;
}

.datepicker td.old,.datepicker td.new {
	color:#999;
}

.datepicker td.active,.datepicker td.active:hover {
	color:#fff;
	background-color:#006dcc;
	background-image:-moz-linear-gradient(top,#08c,#04c);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
	background-image:-webkit-linear-gradient(top,#08c,#04c);
	background-image:-o-linear-gradient(top,#08c,#04c);
	background-image:linear-gradient(to bottom,#08c,#04c);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	border-color:#04c #04c #002a80;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	*background-color:#04c;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,0.25);
}

.datepicker td.active:hover,.datepicker td.active:hover:hover,.datepicker td.active:focus,.datepicker td.active:hover:focus,.datepicker td.active:active,.datepicker td.active:hover:active,.datepicker td.active.active,.datepicker td.active:hover.active,.datepicker td.active.disabled,.datepicker td.active:hover.disabled,.datepicker td.active[disabled],.datepicker td.active:hover[disabled] {
	color:#fff;
	background-color:#04c;
	*background-color:#003bb3;
}

.datepicker td.active:active,.datepicker td.active:hover:active,.datepicker td.active.active,.datepicker td.active:hover.active {
	background-color:#039 \9;
}

.datepicker td span {
	display:block;
	width:47px;
	height:54px;
	line-height:54px;
	float:left;
	margin:2px;
	cursor:pointer;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.datepicker td span:hover {
	background:#eee;
}

.datepicker td span.active {
	color:#fff;
	background-color:#006dcc;
	background-image:-moz-linear-gradient(top,#08c,#04c);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
	background-image:-webkit-linear-gradient(top,#08c,#04c);
	background-image:-o-linear-gradient(top,#08c,#04c);
	background-image:linear-gradient(to bottom,#08c,#04c);
	background-repeat:repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	border-color:#04c #04c #002a80;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	*background-color:#04c;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,0.25);
}

.datepicker td span.active:hover,.datepicker td span.active:focus,.datepicker td span.active:active,.datepicker td span.active.active,.datepicker td span.active.disabled,.datepicker td span.active[disabled] {
	color:#fff;
	background-color:#04c;
	*background-color:#003bb3;
}

.datepicker td span.active:active,.datepicker td span.active.active {
	background-color:#039 \9;
}

.datepicker td span.old {
	color:#999;
}

.datepicker th.switch {
	width:145px;
}

.datepicker th.next,.datepicker th.prev {
	font-size:21px;
}

.datepicker thead tr:first-child th {
	cursor:pointer;
}

.datepicker thead tr:first-child th:hover {
	background:#eee;
}

.input-append.date .add-on i,.input-prepend.date .add-on i {
	display:block;
	cursor:pointer;
	width:16px;
	height:16px;
}

/* Live Search */

.livesearch-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.livesearch-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.livesearch-selected { background: #F0F0F0; }
.livesearch-suggestions strong { font-weight: normal; color: #3399FF; }



	.box-discount {
	  position: relative;
	  width: 100%;
	  height: 200px;
	  background: #fff;
	  border: 1px solid #ddd;
	  
	  border-radius: 16px;
	  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	  overflow: hidden;
	  text-align: left;
	  padding: 20px;
	  padding-top: 60px; /* Zusätzlicher Abstand für den Textbereich */
	  margin: 20px;
}

	/* Nur die Überschrift weiter nach oben und nach links verschoben */
	.box-discount h2 {
	  margin: 0;
	  font-size: 14px;
	  color: blue;
	  margin-top: -40px; /* Weiter nach oben */
	  margin-right: 10px; /* Weiter nach links */
	}
	
	/* Abstand zwischen Überschrift und dem Text */
	.box-discount p {
	  margin: 50px 0 0; /* Mehr Abstand nach der Überschrift */
	  color: #666;
	}
	
	.box-discount small {
	 
	  color: #aaa;
	  font-size: 12px;
	}
	
	/* Diagonales Rabatt-Banner */
	.box-discount-banner {
		position: absolute;
		top: 20px; /* Tiefer in die Box verschoben */
		right: -60px; /* Weiter nach links in die Box verschoben */
		background: blue;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		text-transform: uppercase;
		padding: 10px 70px;
		transform: rotate(45deg);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		display: flex; /* Flexbox aktivieren */
		align-items: center; /* Vertikal zentrieren */
		justify-content: center; /* Horizontal zentrieren */
		white-space: nowrap; /* Verhindert Umbrüche im Text */
	}





		/* ----------------------------------------
		   Basislayout für Panels
		---------------------------------------- */
		.panel {
		  background-color: rgba(30, 30, 30, 0.85);
		  border-radius: 16px;
		  border: none;
		  padding: 24px 32px;
		  margin: 40px auto;
		  transition: all 0.3s ease;
		  color: #fff;
		  box-shadow:
			0 10px 25px rgba(0, 0, 0, 0.8),
			0 2px 6px rgba(255, 255, 255, 0.05);
		}
		
		.panel:hover {
		  transform: translateY(-8px);
		  box-shadow:
			0 18px 40px rgba(0, 0, 0, 0.9),
			0 6px 12px rgba(255, 255, 255, 0.1);
		}
		
		/* ----------------------------------------
		   Panel Header
		---------------------------------------- */
		.panel-heading {
		  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		  margin-bottom: 1rem;
		}
		
		/* Überschriften: schwarz + Glow */
		.panel-heading h3,
		.panel-heading h4 {
		  font-size: 1.4rem;
		  font-weight: 700;
		  color: #000; /* Schwarze Schrift */
		  margin-bottom: 0.5rem;
		  transition: text-shadow 0.3s ease;
		  letter-spacing: 0.5px;
		}
		
		.panel-heading p {
		  color: #ccc;
		  font-size: 0.95rem;
		  line-height: 1.6;
		}
		
		.panel-body {
		  color: #eee;
		}
		
		/* ----------------------------------------
		   Farb-Styles für Panels (mit Glow)
		---------------------------------------- */
		
		/* Goldene Wärme */
		.panel-warning {
		  background: linear-gradient(145deg, rgba(255, 180, 0, 0.15), rgba(30, 30, 30, 0.9));
		  border: 1px solid rgba(255, 180, 0, 0.3);
		}
		.panel-warning .panel-heading h3,
		.panel-warning .panel-heading h4 {
		  text-shadow:
			0 0 8px rgba(255, 200, 50, 0.9),
			0 0 16px rgba(255, 180, 0, 0.8),
			0 0 32px rgba(255, 160, 0, 0.6);
		}
		
		/* Roter Akzent */
		.panel-danger {
		  background: linear-gradient(145deg, rgba(231, 76, 60, 0.18), rgba(30, 30, 30, 0.9));
		  border: 1px solid rgba(231, 76, 60, 0.3);
		}
		.panel-danger .panel-heading h3,
		.panel-danger .panel-heading h4 {
		  text-shadow:
			0 0 8px rgba(231, 76, 60, 0.9),
			0 0 16px rgba(231, 76, 60, 0.7),
			0 0 32px rgba(231, 76, 60, 0.6);
		}
		
		/* Grüner Erfolg */
		.panel-success {
		  background: linear-gradient(145deg, rgba(46, 204, 113, 0.18), rgba(30, 30, 30, 0.9));
		  border: 1px solid rgba(46, 204, 113, 0.3);
		}
		.panel-success .panel-heading h3,
		.panel-success .panel-heading h4 {
		  text-shadow:
			0 0 8px rgba(46, 204, 113, 0.9),
			0 0 16px rgba(46, 204, 113, 0.7),
			0 0 32px rgba(46, 204, 113, 0.5);
		}
		
		/* Blauer Info-Look */
		.panel-info {
		  background: linear-gradient(145deg, rgba(52, 152, 219, 0.18), rgba(30, 30, 30, 0.9));
		  border: 1px solid rgba(52, 152, 219, 0.3);
		}
		.panel-info .panel-heading h3,
		.panel-info .panel-heading h4 {
		  text-shadow:
			0 0 8px rgba(52, 152, 219, 0.9),
			0 0 16px rgba(52, 152, 219, 0.7),
			0 0 32px rgba(52, 152, 219, 0.6);
		}
		
		/* Dezentes Grau */
		.panel-default {
		  background: linear-gradient(145deg, rgba(120, 120, 120, 0.15), rgba(30, 30, 30, 0.9));
		  border: 1px solid rgba(150, 150, 150, 0.3);
		}
		.panel-default .panel-heading h3,
		.panel-default .panel-heading h4 {
		  text-shadow:
			0 0 8px rgba(200, 200, 200, 0.8),
			0 0 16px rgba(180, 180, 180, 0.6),
			0 0 32px rgba(160, 160, 160, 0.5);
		}
		
		/* ----------------------------------------
		   Buttons
		---------------------------------------- */
		.btn {
		  border: none;
		  font-weight: 600;
		  color: #000;
		  transition: 0.25s ease;
		}
		
		.btn-warning { background-color: #ffb300; }
		.btn-danger  { background-color: #e74c3c; }
		.btn-info    { background-color: #3498db; }
		
		.btn:hover {
		  opacity: 0.85;
		  transform: scale(1.02);
		}
		
		/* ----------------------------------------
		   Labels (für Begrüßung etc.)
		---------------------------------------- */
		.label {
		  font-size: 1.2rem;
		  font-weight: 600;
		  border-radius: 8px;
		  padding: 6px 12px;
		  display: inline-block;
		  transition: all 0.3s ease;
		}
		
		/* Farbvarianten mit Glow */
		.label-primary {
		  background: linear-gradient(135deg, #007bff, #3399ff);
		  color: #000;
		  text-shadow: 0 0 12px rgba(0, 123, 255, 0.8);
		}
		.label-info {
		  background: linear-gradient(135deg, #17a2b8, #33c2d1);
		  color: #000;
		  text-shadow: 0 0 12px rgba(23, 162, 184, 0.8);
		}
		.label-warning {
		  background: linear-gradient(135deg, #ffb300, #ffd54f);
		  color: #000;
		  text-shadow: 0 0 12px rgba(255, 200, 50, 0.9);
		}
		.label-danger {
		  background: linear-gradient(135deg, #e74c3c, #ff6f61);
		  color: #000;
		  text-shadow: 0 0 12px rgba(231, 76, 60, 0.9);
		}
		.label-default {
		  background: linear-gradient(135deg, #555, #777);
		  color: #fff;
		  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
		}
		
		/* Hover-Effekt */
		.label-primary:hover    { box-shadow: 0 0 20px rgba(0, 123, 255, 0.6); }
		.label-info:hover       { box-shadow: 0 0 20px rgba(23, 162, 184, 0.6); }
		.label-warning:hover    { box-shadow: 0 0 20px rgba(255, 200, 50, 0.6); }
		.label-danger:hover     { box-shadow: 0 0 20px rgba(231, 76, 60, 0.6); }
		.label-default:hover    { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }
		
		/* ----------------------------------------
		   Begrüßung
		---------------------------------------- */
		.greeting {
		  margin: 60px 0 30px 0;
		  text-align: left;
		  font-size: 2.2rem;
		  font-weight: 600;
		  letter-spacing: 0.5px;
		}
		
		.greeting .label {
		  padding: 14px 28px;
		  border-radius: 14px;
		  font-size: 2rem;
		  font-weight: 700;
		  text-transform: none;
		  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		  text-shadow: 0 0 10px rgba(255,255,255,0.25);
		}
		
		/* Hover: sanftes Leuchten */
		.greeting .label:hover {
		  transform: translateY(-3px);
		  box-shadow:
			0 6px 18px rgba(0,0,0,0.6),
			0 0 12px currentColor;
		  text-shadow: 0 0 12px rgba(255,255,255,0.4);
		}
		
		/* ----------------------------------------
		   Globale Tabellen in Panels (Dark + Card-Style)
		---------------------------------------- */
		
		/* Basis: alle .table in .panel */
		.panel .table {
		  margin: 0;
		  background: transparent;
		  color: #f5f5f5;
		  border-collapse: separate;
		  border-spacing: 0 6px; /* Abstand = Karten-Effekt */
		}
		
		/* Standard Bootstrap-Striping/ Hover neutralisieren,
		   wir übernehmen das Styling */
		.panel .table.table-striped > tbody > tr:nth-of-type(odd),
		.panel .table.table-striped > tbody > tr:nth-of-type(even) {
		  background-color: transparent;
		}
		
		.panel .table.table-hover > tbody > tr:hover {
		  background-color: transparent;
		}
		
		/* Zeilen als „Cards“ */
		.panel .table > tbody > tr {
		  background: rgba(10, 4, 4, 0.96);
		  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.75);
		  transition: all 0.25s ease;
		}
		
		/* leichtes Altern für mehr Tiefe */
		.panel .table > tbody > tr:nth-child(odd) {
		  background: rgba(20, 8, 8, 0.96);
		}
		
		/* Hover-Effekt */
		.panel .table > tbody > tr:hover {
		  background: rgba(40, 16, 16, 0.98);
		  box-shadow:
			0 8px 18px rgba(0, 0, 0, 0.95),
			0 0 8px rgba(255, 255, 255, 0.05);
		}
		
		/* Abgerundete erste/letzte Zelle für Card-Look */
		.panel .table > tbody > tr > td:first-child {
		  border-radius: 12px 0 0 12px;
		}
		.panel .table > tbody > tr > td:last-child {
		  border-radius: 0 12px 12px 0;
		}
		
		/* Zellen allgemein */
		.panel .table > tbody > tr > td {
		  border-top: none !important;
		  vertical-align: middle;
		  padding: 10px 12px;
		  color: #e9e0e0;
		}
		
		/* „Muted“ & „semibold“ besser lesbar machen */
		.panel .text-muted {
		  color: #d3c7c7 !important;
		}
		.panel .semibold {
		  font-weight: 600;
		  color: #ffffff !important;
		}
		
		/* Label in Tabellen leicht veredeln (z.B. Fahrstunden-Nr.) */
		.panel .label.label-default {
		  background: linear-gradient(135deg, #555, #777);
		  color: #fff;
		  border-radius: 999px;
		  padding: 4px 10px;
		  font-weight: 600;
		  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
		}
		
		.questionaire input[type="radio"] {
			display: none;
		}
		
		/* Wrapper für jede Antwort */
		.questionaire .form-group {
			margin-bottom: 6px;
		}
		
		/* Unausgewählte Antworten: dunkle Cards, gut lesbar im Dark Theme */
		.questionaire label {
			display: block;
			width: 100%;
			background-color: rgba(40, 40, 40, 0.96);
			color: #f5f5f5;                 /* helle Schrift auf dunklem Hintergrund */
			padding: 8px 12px;
			border-radius: 8px;
			cursor: pointer;
			border: 1px solid rgba(255, 255, 255, 0.08);
			font-weight: normal;
			transition: all 0.2s ease;
		}
		
		/* Hover-Effekt für Feedback */
		.questionaire label:hover {
			background-color: rgba(60, 60, 60, 0.98);
		}
		
		/* Falsche Antwort angeklickt */
		.questionaire .falsch input[type="radio"]:checked + label {
			background-color: #E56565;
			color: #fff;
			font-weight: bold;
			border-color: rgba(229, 101, 101, 0.9);
		}
		
		/* Richtige Antwort angeklickt */
		.questionaire .richtig input[type="radio"]:checked + label {
			background-color: #90EE90;
			color: #000;
			font-weight: bold;
			border-color: rgba(90, 180, 90, 0.95);
		}
		
		
		/*
		 * =========================================================
		 * Globale Aktionsbuttons
		 * =========================================================
		 */
		
		.action-buttons {
			display: flex;
			align-items: stretch;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 24px;
		}
		
		
		/*
		 * =========================================================
		 * Einzelner Action Button
		 * =========================================================
		 */
		
		.action-button {
			display: inline-flex !important;
			align-items: center;
			justify-content: center;
			gap: 9px;
			min-height: 48px;
			padding: 12px 18px !important;
			border-radius: 11px !important;
			font-size: 14px;
			font-weight: 600;
			line-height: 1.2;
			text-decoration: none !important;
			box-shadow: 0 3px 9px rgba(0, 0, 0, 0.07);
			transition:
				transform 0.15s ease,
				box-shadow 0.15s ease,
				background 0.15s ease,
				border-color 0.15s ease;
		}
		
		
		.action-button:hover,
		.action-button:focus {
			transform: translateY(-1px);
			box-shadow: 0 6px 14px rgba(0, 0, 0, 0.11);
			text-decoration: none !important;
		}
		
		
		.action-button:active {
			transform: translateY(0);
		}
		
		
		/*
		 * =========================================================
		 * Info Button
		 * =========================================================
		 */
		
		.action-button-info {
			background: #337ab7 !important;
			border-color: #2e6da4 !important;
			color: #ffffff !important;
		}
		
		
		.action-button-info:hover,
		.action-button-info:focus {
			background: #286090 !important;
			border-color: #204d74 !important;
			color: #ffffff !important;
		}
		
		
		/*
		 * =========================================================
		 * Anmeldung Button
		 * =========================================================
		 */
		
		.action-button-register {
			background: #5cb85c !important;
			border-color: #4cae4c !important;
			color: #ffffff !important;
		}
		
		
		.action-button-register:hover,
		.action-button-register:focus {
			background: #449d44 !important;
			border-color: #398439 !important;
			color: #ffffff !important;
		}
		
		
		/*
		 * =========================================================
		 * Icons
		 * =========================================================
		 */
		
		.action-button .fa,
		.action-button .glyphicon {
			font-size: 15px;
		}
		
		
		/*
		 * =========================================================
		 * Bewegter Pfeil
		 * =========================================================
		 */
		
		.scroll-arrow {
			display: inline-block;
			margin-left: 2px;
			animation: actionArrowDown 1.15s ease-in-out infinite;
		}
		
		
		@keyframes actionArrowDown {
		
			0%,
			100% {
				transform: translateY(0);
			}
		
			50% {
				transform: translateY(4px);
			}
		
		}
		
		
		/*
		 * =========================================================
		 * Kursbuchung
		 *
		 * Global für ALLE Ausbildungsbereiche
		 * =========================================================
		 */
		
		.course-booking-section {
			margin-top: 24px;
			color: #344d61;
		}
		
		
		/*
		 * =========================================================
		 * Überschrift
		 * =========================================================
		 */
		
		.course-booking-heading {
			display: flex;
			align-items: center;
			gap: 13px;
			margin-bottom: 14px;
			padding: 16px 18px;
			border: 1px solid #dce7ef;
			border-radius: 14px;
			background: linear-gradient(
				to right,
				#f8fbff,
				#edf5fb
			);
		}
		
		
		.course-booking-heading-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 42px;
			width: 42px;
			height: 42px;
			border-radius: 11px;
			background: #e4eff8;
			color: #337ab7;
			font-size: 18px;
		}
		
		
		.course-booking-heading-content {
			flex: 1;
			min-width: 0;
		}
		
		
		.course-booking-heading-content h3 {
			margin: 0 0 3px;
			font-size: 18px;
			font-weight: 700;
			color: #30475a !important;
		}
		
		
		.course-booking-heading-content p {
			margin: 0;
			font-size: 12px;
			line-height: 1.45;
			color: #71808e !important;
		}
		
		
		/*
		 * =========================================================
		 * Reiter
		 * =========================================================
		 */
		
		.course-booking-tabs {
			display: flex;
			width: 100%;
			margin-bottom: 0;
			border-bottom: 0;
		}
		
		
		.course-booking-tabs > li {
			float: none;
			flex: 1 1 0;
			min-width: 0;
			margin-right: 5px;
			margin-bottom: 0;
		}
		
		
		.course-booking-tabs > li:last-child {
			margin-right: 0;
		}
		
		
		.course-booking-tabs > li > a {
			display: flex;
			align-items: center;
			justify-content: center;
		
			width: 100%;
			height: 100%;
		
			gap: 7px;
		
			margin: 0;
			padding: 11px 16px;
		
			border: 1px solid #dce5eb !important;
			border-bottom: 0 !important;
			border-radius: 11px 11px 0 0;
		
			background: #f3f6f8 !important;
		
			color: #687a87 !important;
		
			font-size: 12px;
			font-weight: 600;
			line-height: 1.35;
		
			text-align: center;
			white-space: normal;
		
			text-decoration: none !important;
		
			box-sizing: border-box;
		}
		
		
		.course-booking-tabs > li > a .fa,
		.course-booking-tabs > li > a .glyphicon {
			color: #5cb85c !important;
		}
		
		
		.course-booking-tabs > li > a:hover,
		.course-booking-tabs > li > a:focus {
			background: #edf3f7 !important;
			color: #337ab7 !important;
		}
		
		
		.course-booking-tabs > li.active > a,
		.course-booking-tabs > li.active > a:hover,
		.course-booking-tabs > li.active > a:focus {
			background: #ffffff !important;
			color: #30475a !important;
			border-color: #dce5eb !important;
		}
		
		
		/*
		 * =========================================================
		 * Reiter Inhalt
		 * =========================================================
		 */
		
		.course-booking-tab-content {
			padding: 16px;
			border: 1px solid #dce5eb;
			border-radius: 0 12px 12px 12px;
			background: #ffffff !important;
			color: #344d61 !important;
			box-shadow: 0 5px 16px rgba(0, 0, 0, .05);
		}
		
		
		.course-booking-tab-content > .tab-pane {
			background: #ffffff !important;
			color: #344d61 !important;
		}
		
		
		/*
		 * =========================================================
		 * Einzelner Buchungsbereich ohne Reiter
		 * =========================================================
		 */
		
		.course-booking-content {
			padding: 16px;
			border: 1px solid #dce5eb;
			border-radius: 12px;
			background: #ffffff !important;
			color: #344d61 !important;
			box-shadow: 0 5px 16px rgba(0, 0, 0, .05);
		}
		
		
		/*
		 * =========================================================
		 * book-course
		 *
		 * Globaler Container für publishCourses2()
		 * =========================================================
		 */
		
		.book-course {
			background: transparent !important;
			color: #344d61 !important;
		}
		
		
		.book-course * {
			opacity: 1;
		}
		
		
		/*
		 * =========================================================
		 * Kursgruppen Überschrift
		 * =========================================================
		 */
		
		.course-booking-group-header {
			display: flex;
			align-items: center;
			gap: 13px;
			margin-bottom: 18px;
			padding-bottom: 14px;
			border-bottom: 1px solid #e5ebef;
		}
		
		
		.course-booking-group-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 42px;
			width: 42px;
			height: 42px;
			border-radius: 11px;
			background: #e8f5ea;
			color: #4f9b57;
			font-size: 18px;
		}
		
		
		.course-booking-group-content {
			flex: 1;
			min-width: 0;
		}
		
		
		.course-booking-group-content strong {
			display: block;
			color: #30475a !important;
			font-size: 17px;
			font-weight: 700;
			line-height: 1.4;
		}
		
		
		.course-booking-group-content small {
			display: block;
			margin-top: 3px;
			color: #718391 !important;
			font-size: 11px;
		}
		
		
		/*
		 * =========================================================
		 * Saison
		 * =========================================================
		 */
		
		.course-booking-season {
			margin: 20px 0 11px;
			padding: 0 2px;
			color: #30475a !important;
			font-size: 15px;
			font-weight: 700;
			line-height: 1.4;
		}
		
		
		/*
		 * =========================================================
		 * Kurskarte
		 * =========================================================
		 */
		
		.course-booking-card {
			margin-bottom: 16px;
			overflow: hidden;
			border: 1px solid #dce6ed !important;
			border-radius: 12px;
			background: #ffffff !important;
			color: #344d61 !important;
			box-shadow: 0 2px 7px rgba(0, 0, 0, .035);
		}
		
		
		.course-booking-card:last-child {
			margin-bottom: 0;
		}
		
		
		/*
		 * =========================================================
		 * Kurskarten Kopf
		 * =========================================================
		 */
		
		.course-booking-card-head {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 14px 15px;
			background: #f7fafc !important;
			border-bottom: 1px solid #e3eaef;
			color: #344d61 !important;
		}
		
		
		.course-booking-card-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 38px;
			width: 38px;
			height: 38px;
			border-radius: 10px;
			background: #e8f5ea !important;
			color: #4d9955 !important;
			font-size: 16px;
		}
		
		
		.course-booking-card-title {
			flex: 1;
			min-width: 0;
		}
		
		
		.course-booking-card-title strong {
			display: block;
			color: #263e53 !important;
			font-size: 15px;
			font-weight: 700;
			line-height: 1.4;
		}
		
		
		.course-booking-card-title small {
			display: block;
			margin-top: 3px;
			color: #718391 !important;
			font-size: 11px;
			line-height: 1.4;
		}
		
		
		/*
		 * =========================================================
		 * Freie Plätze
		 * =========================================================
		 */
		
		.course-booking-places {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 auto;
			padding: 6px 10px;
			border-radius: 999px;
			font-size: 10px;
			font-weight: 700;
			line-height: 1.2;
			white-space: nowrap;
		}
		
		
		.course-booking-places.success {
			background: #e4f4e6 !important;
			color: #3f8246 !important;
		}
		
		
		.course-booking-places.warning {
			background: #fff2d6 !important;
			color: #946b09 !important;
		}
		
		
		.course-booking-places.danger {
			background: #f8e1df !important;
			color: #ad4641 !important;
		}
		
		
		.course-booking-places.default {
			background: #edf1f4 !important;
			color: #667783 !important;
		}
		
		
		/*
		 * =========================================================
		 * Kurskarten Inhalt
		 * =========================================================
		 */
		
		.course-booking-card-body {
			padding: 15px !important;
			background: #ffffff !important;
			color: #344d61 !important;
		}
		
		
		/*
		 * =========================================================
		 * Terminliste
		 * =========================================================
		 */
		
		.course-booking-dates {
			display: grid;
			gap: 8px;
			color: #344d61 !important;
		}
		
		
		/*
		 * =========================================================
		 * Einzelner Termin
		 * =========================================================
		 */
		
		.course-booking-date {
			display: flex;
			align-items: flex-start;
			gap: 11px;
			padding: 11px 12px;
			border: 1px solid #e2e9ee;
			border-radius: 9px;
			background: #f9fbfc !important;
			color: #344d61 !important;
		}
		
		
		.course-booking-date:hover {
			border-color: #ccdbe4;
			background: #f5f9fb !important;
		}
		
		
		.course-booking-date > .fa,
		.course-booking-date > .glyphicon {
			flex: 0 0 18px;
			margin-top: 2px;
			color: #5b91b6 !important;
			font-size: 15px;
		}
		
		
		.course-booking-date > div {
			flex: 1;
			min-width: 0;
		}
		
		
		/*
		 * =========================================================
		 * Datum / Uhrzeit
		 * =========================================================
		 */
		
		.course-booking-date strong {
			display: block;
			color: #30495c !important;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.45;
		}
		
		
		/*
		 * =========================================================
		 * Ort
		 * =========================================================
		 */
		
		.course-booking-date small {
			display: block;
			margin-top: 3px;
			color: #718391 !important;
			font-size: 11px;
			line-height: 1.45;
		}
		
		
		.course-booking-date small .fa,
		.course-booking-date small .glyphicon {
			margin-right: 3px;
			color: #8a9ba6 !important;
		}
		
		
		/*
		 * =========================================================
		 * Buchungsbutton
		 * =========================================================
		 */
		
		.course-booking-card-action {
			margin-top: 14px;
		}
		
		
		.course-booking-card-action .btn-success {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			padding: 9px 16px;
			border-radius: 20px;
			background: #5cb85c !important;
			border-color: #4cae4c !important;
			color: #ffffff !important;
			font-weight: 700;
			text-decoration: none !important;
		}
		
		
		.course-booking-card-action .btn-success:hover,
		.course-booking-card-action .btn-success:focus {
			background: #449d44 !important;
			border-color: #398439 !important;
			color: #ffffff !important;
		}
		
		
		/*
		 * =========================================================
		 * Globale Textkorrektur innerhalb der Kursbuchung
		 *
		 * Verhindert ausgebleichte oder weiße Schrift aus anderen
		 * globalen Styles.
		 * =========================================================
		 */
		
		.course-booking-section .book-course,
		.course-booking-section .course-booking-content,
		.course-booking-section .course-booking-tab-content,
		.course-booking-section .course-booking-card,
		.course-booking-section .course-booking-card-body,
		.course-booking-section .course-booking-dates,
		.course-booking-section .course-booking-date {
			color: #344d61 !important;
		}
		
		
		.course-booking-section strong,
		.course-booking-section b {
			color: #30495c;
		}
		
		
		.course-booking-section small {
			color: #718391;
		}
		
		
		.course-booking-section .course-booking-date strong,
		.course-booking-section .course-booking-card-title strong,
		.course-booking-section .course-booking-season {
			color: #30495c !important;
		}
		
		
		.course-booking-section .course-booking-card-title small,
		.course-booking-section .course-booking-date small {
			color: #718391 !important;
		}
		
		
		/*
		 * =========================================================
		 * Keine Termine
		 * =========================================================
		 */
		
		.course-booking-empty {
			display: flex;
			align-items: flex-start;
			gap: 13px;
			padding: 16px;
			border: 1px solid #dce5eb;
			border-radius: 12px;
			background: #f8fafc !important;
			color: #405766 !important;
		}
		
		
		.course-booking-empty-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 40px;
			width: 40px;
			height: 40px;
			border-radius: 10px;
			background: #e8f0f5;
			color: #6d8798;
			font-size: 17px;
		}
		
		
		.course-booking-empty-content {
			flex: 1;
			min-width: 0;
		}
		
		
		.course-booking-empty-content strong {
			display: block;
			margin-bottom: 4px;
			color: #405766 !important;
			font-size: 14px;
		}
		
		
		.course-booking-empty-content p {
			margin: 0;
			color: #73838e !important;
			font-size: 12px;
			line-height: 1.55;
		}
		
		
		/*
		 * =========================================================
		 * Alte sailing-profi-empty ebenfalls global unterstützen
		 * =========================================================
		 */
		
		.sailing-profi-empty {
			display: flex;
			align-items: flex-start;
			gap: 13px;
			padding: 16px;
			border: 1px solid #dce5eb;
			border-radius: 12px;
			background: #f8fafc !important;
			color: #405766 !important;
		}
		
		
		.sailing-profi-empty > .fa,
		.sailing-profi-empty > .glyphicon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 40px;
			width: 40px;
			height: 40px;
			border-radius: 10px;
			background: #e8f0f5;
			color: #6d8798;
			font-size: 17px;
		}
		
		
		.sailing-profi-empty strong {
			display: block;
			margin-bottom: 4px;
			color: #405766 !important;
			font-size: 14px;
		}
		
		
		.sailing-profi-empty p {
			margin: 0;
			color: #73838e !important;
			font-size: 12px;
			line-height: 1.55;
		}
		
		
		/*
		 * =========================================================
		 * Tablet
		 * =========================================================
		 */
		
		@media (max-width: 991px) {
		
			.course-booking-card-head {
				align-items: flex-start;
			}
		
		}
		
		
		/*
		 * =========================================================
		 * Mobile / iPhone / iOS Safari
		 *
		 * Die zusätzliche max-device-width-Abfrage ist absichtlich
		 * enthalten, damit auch ältere bzw. falsch skalierte
		 * iOS-Safari-Ansichten sauber erfasst werden.
		 * =========================================================
		 */
		
		@media
			screen and (max-width: 767px),
			screen and (max-device-width: 767px) {
		
		
			/*
			 * =====================================================
			 * Aktionsbuttons
			 * =====================================================
			 */
		
			.action-buttons {
				display: block !important;
				width: 100%;
				margin-top: 20px;
			}
		
		
			.action-button {
				display: flex !important;
				width: 100% !important;
				margin-bottom: 8px;
				box-sizing: border-box;
			}
		
		
			.action-button:last-child {
				margin-bottom: 0;
			}
		
		
			/*
			 * =====================================================
			 * Kursbereich
			 * =====================================================
			 */
		
			.course-booking-section {
				width: 100% !important;
				max-width: 100% !important;
				margin-top: 20px;
				box-sizing: border-box;
			}
		
		
			.course-booking-heading {
				padding: 14px;
			}
		
		
			.course-booking-heading-icon {
				flex-basis: 38px;
				width: 38px;
				height: 38px;
			}
		
		
			.course-booking-heading-content {
				min-width: 0;
			}
		
		
			.course-booking-heading-content h3 {
				font-size: 16px;
			}
		
		
			.course-booking-heading-content p {
				font-size: 12px;
				line-height: 1.45;
			}
		
		
			/*
			 * =====================================================
			 * TABS
			 *
			 * WICHTIG:
			 *
			 * Auf Mobile absichtlich KEIN Flex.
			 *
			 * Bootstrap 3 setzt bei .nav-tabs > li ein float:left.
			 * Das wird hier komplett ausgeschaltet.
			 *
			 * display:block + float:none + clear:both ist auf
			 * iOS/Safari robuster als flex-direction:column.
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs {
				display: block !important;
		
				width: 100% !important;
				max-width: 100% !important;
		
				height: auto !important;
				min-height: 0 !important;
		
				margin: 0 0 12px 0 !important;
				padding: 0 !important;
		
				border: 0 !important;
				border-bottom: 0 !important;
		
				list-style: none !important;
		
				float: none !important;
		
				clear: both !important;
		
				overflow: visible !important;
		
				position: relative !important;
				z-index: 20 !important;
		
				box-sizing: border-box !important;
		
				-webkit-overflow-scrolling: touch;
			}
		
		
			/*
			 * =====================================================
			 * Bootstrap Clearfix
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs:before,
			ul.nav.nav-tabs.course-booking-tabs:after {
				display: table !important;
				content: " " !important;
			}
		
		
			ul.nav.nav-tabs.course-booking-tabs:after {
				clear: both !important;
			}
		
		
			/*
			 * =====================================================
			 * Einzelner Tab
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs > li {
				display: block !important;
		
				float: none !important;
				clear: both !important;
		
				flex: none !important;
				-webkit-box-flex: 0 !important;
		
				width: 100% !important;
				max-width: 100% !important;
				min-width: 100% !important;
		
				height: auto !important;
				min-height: 0 !important;
		
				margin:
					0
					0
					8px
					0 !important;
		
				padding: 0 !important;
		
				border: 0 !important;
		
				position: relative !important;
				z-index: 21 !important;
		
				overflow: visible !important;
		
				box-sizing: border-box !important;
			}
		
		
			ul.nav.nav-tabs.course-booking-tabs > li:last-child {
				margin-bottom: 0 !important;
			}
		
		
			/*
			 * =====================================================
			 * Link innerhalb des Tabs
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs > li > a {
				display: flex !important;
		
				align-items: center !important;
				justify-content: flex-start !important;
		
				float: none !important;
		
				width: 100% !important;
				max-width: 100% !important;
				min-width: 0 !important;
		
				min-height: 56px !important;
				height: auto !important;
		
				margin: 0 !important;
		
				padding:
					12px
					14px !important;
		
				border:
					1px
					solid
					#dce6ed !important;
		
				border-bottom:
					1px
					solid
					#dce6ed !important;
		
				border-radius: 11px !important;
		
				background: #f4f7f9 !important;
		
				color: #526979 !important;
		
				font-size: 13px !important;
				font-weight: 600 !important;
				line-height: 1.35 !important;
		
				text-align: left !important;
		
				white-space: normal !important;
		
				word-break: normal !important;
		
				overflow-wrap: break-word !important;
				word-wrap: break-word !important;
		
				text-decoration: none !important;
		
				position: relative !important;
				z-index: 22 !important;
		
				pointer-events: auto !important;
		
				cursor: pointer !important;
		
				box-sizing: border-box !important;
		
				-webkit-box-sizing: border-box !important;
		
				-webkit-appearance: none;
		
				touch-action: manipulation;
		
				-webkit-tap-highlight-color:
					rgba(0, 0, 0, 0);
		
				-webkit-touch-callout: none;
			}
		
		
			/*
			 * =====================================================
			 * Icon im Tab
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs > li > a .fa,
			ul.nav.nav-tabs.course-booking-tabs > li > a .glyphicon {
				display: inline-flex !important;
		
				align-items: center;
				justify-content: center;
		
				flex:
					0
					0
					32px;
		
				width: 32px;
				height: 32px;
		
				margin-right: 10px !important;
		
				border-radius: 8px;
		
				background: #e8f4ea;
		
				color: #5cb85c !important;
		
				font-size: 15px !important;
			}
		
		
			/*
			 * =====================================================
			 * Hover / Focus
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs > li > a:hover,
			ul.nav.nav-tabs.course-booking-tabs > li > a:focus {
				background: #eef4f7 !important;
		
				border-color: #cfdde6 !important;
		
				color: #30495c !important;
		
				text-decoration: none !important;
		
				outline: none !important;
			}
		
		
			/*
			 * =====================================================
			 * Aktiver Tab
			 * =====================================================
			 */
		
			ul.nav.nav-tabs.course-booking-tabs > li.active > a,
			ul.nav.nav-tabs.course-booking-tabs > li.active > a:hover,
			ul.nav.nav-tabs.course-booking-tabs > li.active > a:focus {
				background: #eef8f0 !important;
		
				border-color: #b9d9be !important;
		
				color: #263e53 !important;
		
				font-weight: 700 !important;
		
				box-shadow:
					0 4px 10px
					rgba(0, 0, 0, 0.06) !important;
			}
		
		
			ul.nav.nav-tabs.course-booking-tabs > li.active > a .fa,
			ul.nav.nav-tabs.course-booking-tabs > li.active > a .glyphicon {
				background: #dcefe0 !important;
		
				color: #4c9151 !important;
			}
		
		
			/*
			 * =====================================================
			 * Tab-Inhalt
			 * =====================================================
			 */
		
			.course-booking-tab-content {
				display: block !important;
		
				float: none !important;
				clear: both !important;
		
				width: 100% !important;
				max-width: 100% !important;
		
				height: auto !important;
				min-height: 0 !important;
		
				margin: 0 !important;
		
				padding: 12px !important;
		
				border:
					1px
					solid
					#dce6ed !important;
		
				border-radius: 11px !important;
		
				background: #ffffff !important;
		
				position: relative !important;
				z-index: 1 !important;
		
				overflow: visible !important;
		
				box-sizing: border-box !important;
		
				-webkit-box-sizing: border-box !important;
		
				transform: none !important;
		
				-webkit-transform: none !important;
			}
		
		
			/*
			 * =====================================================
			 * Einzelne Tab-Panes
			 * =====================================================
			 */
		
			.course-booking-tab-content > .tab-pane {
				display: none !important;
		
				float: none !important;
				clear: both !important;
		
				position: relative !important;
		
				z-index: 1 !important;
		
				width: 100% !important;
				max-width: 100% !important;
		
				height: auto !important;
				min-height: 0 !important;
		
				margin: 0 !important;
				padding: 0 !important;
		
				overflow: visible !important;
		
				box-sizing: border-box !important;
		
				-webkit-box-sizing: border-box !important;
		
				pointer-events: none !important;
			}
		
		
			/*
			 * =====================================================
			 * Aktiver Tab
			 * =====================================================
			 */
		
			.course-booking-tab-content > .tab-pane.active {
				display: block !important;
				pointer-events: auto !important;
			}
		
		
			/*
			 * =====================================================
			 * Bootstrap Fade auf Mobile deaktivieren
			 * =====================================================
			 */
		
			.course-booking-tab-content > .tab-pane.fade {
				display: none !important;
		
				opacity: 0 !important;
		
				-webkit-transition: none !important;
				transition: none !important;
			}
		
		
			.course-booking-tab-content > .tab-pane.fade.active,
			.course-booking-tab-content > .tab-pane.fade.in,
			.course-booking-tab-content > .tab-pane.fade.active.in {
				display: block !important;
		
				opacity: 1 !important;
		
				pointer-events: auto !important;
			}
		
		
			/*
			 * =====================================================
			 * Kursinhalt
			 * =====================================================
			 */
		
			.course-booking-content {
				width: 100% !important;
				max-width: 100% !important;
		
				padding: 12px;
		
				box-sizing: border-box;
			}
		
		
			.book-course {
				width: 100% !important;
				max-width: 100% !important;
		
				box-sizing: border-box !important;
			}
		
		
			/*
			 * =====================================================
			 * Kopf innerhalb des Reiters
			 * =====================================================
			 */
		
			.course-booking-tab-head {
				display: block !important;
		
				width: 100% !important;
				max-width: 100% !important;
		
				margin-bottom: 14px;
				padding-bottom: 12px;
		
				box-sizing: border-box;
			}
		
		
			.course-booking-tab-title {
				display: flex;
		
				align-items: center;
		
				width: 100%;
		
				min-width: 0;
			}
		
		
			.course-booking-tab-title > div {
				flex: 1;
		
				min-width: 0;
			}
		
		
			.course-booking-tab-title strong {
				white-space: normal;
		
				word-break: normal;
		
				overflow-wrap: break-word;
				word-wrap: break-word;
			}
		
		
			.course-booking-head-actions {
				display: flex;
		
				align-items: center;
				justify-content: flex-start;
		
				flex-wrap: wrap;
		
				width: 100%;
		
				margin-top: 12px;
		
				gap: 8px;
			}
		
		
			/*
			 * =====================================================
			 * Info Button
			 * =====================================================
			 */
		
			.course-booking-info-button {
				display: inline-flex !important;
		
				align-items: center;
				justify-content: center;
		
				min-height: 36px;
		
				padding-left: 12px;
				padding-right: 12px;
			}
		
		
			/*
			 * =====================================================
			 * Preis Button
			 * =====================================================
			 */
		
			.course-booking-price-button {
				display: inline-flex !important;
		
				align-items: center;
				justify-content: flex-start;
		
				flex-wrap: wrap;
		
				min-height: 38px;
		
				max-width: 100%;
		
				padding: 7px 11px;
		
				border-radius: 12px !important;
		
				box-sizing: border-box;
			}
		
		
			.course-booking-price-main {
				display: inline-flex;
		
				align-items: center;
		
				flex-wrap: wrap;
		
				gap: 5px;
			}
		
		
			.course-booking-bootsmann-hint {
				flex-basis: 100%;
		
				margin-top: 4px;
				margin-left: 20px;
		
				padding-top: 4px;
				padding-left: 0;
		
				border-left: 0;
		
				white-space: normal;
			}
		
		
			/*
			 * =====================================================
			 * Kurskarte
			 * =====================================================
			 */
		
			.course-booking-card {
				width: 100% !important;
				max-width: 100% !important;
		
				margin-left: 0 !important;
				margin-right: 0 !important;
		
				box-sizing: border-box !important;
		
				overflow: hidden;
			}
		
		
			.course-booking-card-head {
				display: flex;
		
				flex-wrap: wrap;
		
				align-items: flex-start;
		
				width: 100%;
		
				padding: 12px;
		
				box-sizing: border-box;
			}
		
		
			.course-booking-card-icon {
				flex:
					0
					0
					36px;
		
				width: 36px;
				height: 36px;
			}
		
		
			.course-booking-card-title {
				flex: 1;
		
				min-width: 0;
			}
		
		
			.course-booking-card-title strong {
				display: block;
		
				font-size: 14px;
		
				white-space: normal;
		
				overflow-wrap: break-word;
				word-wrap: break-word;
			}
		
		
			.course-booking-card-title small {
				display: block;
		
				white-space: normal;
		
				overflow-wrap: break-word;
				word-wrap: break-word;
			}
		
		
			.course-booking-places {
				flex: 0 0 auto;
		
				margin-top: 8px;
				margin-left: 48px;
		
				max-width:
					calc(
						100%
						-
						48px
					);
		
				white-space: normal;
			}
		
		
			.course-booking-card-body {
				width: 100%;
		
				padding: 12px !important;
		
				box-sizing: border-box;
			}
		
		
			/*
			 * =====================================================
			 * Saison
			 * =====================================================
			 */
		
			.course-booking-season {
				margin-top: 8px;
				margin-bottom: 10px;
		
				font-size: 15px;
		
				line-height: 1.35;
			}
		
		
			/*
			 * =====================================================
			 * Termine
			 * =====================================================
			 */
		
			.course-booking-dates {
				width: 100%;
			}
		
		
			.course-booking-date {
				display: flex;
		
				align-items: flex-start;
		
				width: 100%;
		
				padding: 10px;
		
				box-sizing: border-box;
			}
		
		
			.course-booking-date > .fa,
			.course-booking-date > .glyphicon {
				flex: 0 0 auto;
		
				margin-top: 2px;
			}
		
		
			.course-booking-date > div {
				flex: 1;
		
				min-width: 0;
			}
		
		
			.course-booking-date strong {
				display: block;
		
				font-size: 13px;
		
				line-height: 1.4;
		
				white-space: normal;
		
				overflow-wrap: break-word;
				word-wrap: break-word;
			}
		
		
			.course-booking-date small {
				display: block;
		
				margin-top: 3px;
		
				font-size: 10px;
		
				line-height: 1.4;
		
				white-space: normal;
		
				overflow-wrap: break-word;
				word-wrap: break-word;
			}
		
		
			/*
			 * =====================================================
			 * Buchen
			 * =====================================================
			 */
		
			.course-booking-card-action {
				width: 100%;
			}
		
		
			.course-booking-card-action .btn-success {
				display: flex !important;
		
				align-items: center;
				justify-content: center;
		
				width: 100%;
		
				min-height: 42px;
		
				margin: 0;
		
				border-radius: 10px;
		
				box-sizing: border-box;
			}
		
		
			/*
			 * =====================================================
			 * Leer
			 * =====================================================
			 */
		
			.course-booking-empty,
			.sailing-profi-empty {
				padding: 13px;
			}
		
		
			/*
			 * =====================================================
			 * Preis Modal
			 * =====================================================
			 */
		
			.course-price-modal .modal-dialog {
				width: auto;
		
				margin: 15px;
			}
		
		
			.course-price-modal .modal-body {
				padding: 15px;
			}
		
		
			.course-price-row {
				align-items: flex-start;
			}
		
		
			.course-price-bootsmann {
				padding: 12px;
			}
		
		
			/*
			 * =====================================================
			 * Zusätzliche iOS / Safari Sicherheit
			 * =====================================================
			 */
		
			.course-booking-tabs,
			.course-booking-tabs > li,
			.course-booking-tabs > li > a {
				-webkit-transform: none !important;
				transform: none !important;
			}
		
		
			.course-booking-tab-content > .tab-pane:not(.active) {
				display: none !important;
		
				visibility: hidden !important;
		
				pointer-events: none !important;
			}
		
		
			.course-booking-tab-content > .tab-pane.active {
				visibility: visible !important;
		
				pointer-events: auto !important;
			}
		
		}
		
		
		/*
		 * =========================================================
		 * Sehr kleine Smartphones
		 * =========================================================
		 */
		
		@media
			screen and (max-width: 480px),
			screen and (max-device-width: 480px) {
		
			ul.nav.nav-tabs.course-booking-tabs > li > a {
				min-height: 52px !important;
		
				padding:
					10px
					12px !important;
		
				font-size: 12px !important;
			}
		
		
			ul.nav.nav-tabs.course-booking-tabs > li > a .fa,
			ul.nav.nav-tabs.course-booking-tabs > li > a .glyphicon {
				flex:
					0
					0
					30px;
		
				width: 30px;
				height: 30px;
		
				margin-right: 8px !important;
		
				font-size: 14px !important;
			}
		
		
			.course-booking-tab-content {
				padding: 10px !important;
			}
		
		
			.course-booking-card-head {
				padding: 10px;
			}
		
		
			.course-booking-card-body {
				padding: 10px !important;
			}
		
		}