/*HAUPTCONTAINER FÜR ALLE INHALTE*/

#mainContent {
  width: 88%;
  margin: 40px auto;
  overflow: hidden;
}

/*DIE REITER*/

ul.tabs {
  width: 100%;
  position: relative;
  border-spacing:10px;
  display: table;
}

#mainContent ul.tabs li{
  position: relative;
  display: table-cell;
  width: 33.3%;
  border-bottom: 4px solid #e2e7e6;
  padding: 6px 0px 6px 30px;
  text-transform: uppercase;
  font: 0.9em 'lato_regular', Arial;
  vertical-align: bottom;
  color: #249cd7;
}

#mainContent ul.tabs li:before {
  border-radius: 0;
  margin: 0;
  background-color: white;
  border-right: 3px solid #e2e7e6;
  border-bottom: 3px solid #e2e7e6;
  transform: rotate(-45deg);
  display: block;
  position: absolute;
  bottom: 20px;
  top: auto;
  left: 4px;
}

#mainContent ul.tabs li.active{
  color: black;
  border-bottom: 4px solid #5cbed3;
}

#mainContent ul.tabs li.active:before {
  border-right: 3px solid #5cbed3;
  border-bottom: 3px solid #5cbed3;
  transform: rotate(45deg);
}

#mainContent ul.tabs li:hover {
  border-bottom: 4px solid #5cbed3;
  color: black;
  cursor: pointer;
}

#mainContent ul.tabs li:hover:before {
  border-right: 3px solid #5cbed3;
  border-bottom: 3px solid #5cbed3;
}

/*Der Inhalt für die Reiter*/

.tab_content {
  background-color: #f5fafd;
  margin-right: 2px;
  -moz-box-shadow:    1px 1px 2px rgba(0,0,0, 0.2);
     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
     box-shadow:  1px 1px 2px rgba(0,0,0, 0.2);
}

/*Der Inhalt in #mainContent ist in REIHEN gegliedert*/

.row {
  position: relative;
  clear: both;
  padding: 6px 5px 20px 5px;
  overflow: hidden;
  /*margin-bottom: 60px;*/
}
.high-margin-bottom {
  margin-bottom: 60px;
}

/*Und innerhalb der Reihen gibt es Kolumnen*/

.column1, .column2, .column3 {
  width: 32.4%;
  float: left;
  margin-right: 1.4%;
  position: relative;
  z-index:1;
}
.column3 {
  margin: 0;
}

.column1-2 {
  width: 66.2%;
  float: left;
  margin-right: 1.4%;
  z-index:1;
}

.column2-3 {
  width: 66.2%;
  float: left;
  margin-right: 0;
  z-index:1;
}
.column1-2-3 {
  width: 100%;
  z-index:1;
}

.column1-2-3-no-br {
  width: 100%;
  z-index:1;
}
.column65 {
  width: 64%;
  float: left;
  position: relative;
  z-index:1;	
}
.column50 {
  width: 49%;
  float: left;
  position: relative;
  z-index:1;
}
.column50:first-child {
  margin-right: 2%;
}
.column25 {
  width: 24%;
  float: left;
  position: relative;
  z-index:1;
}
/*Todo: Handle in Media queries*/
.column10 {
  width: 9%;
  float: left;
  position: relative;
  z-index:1;
}
.column10HideForMobile {
  width: 9%;
  float: left;
  position: relative;
  z-index:1;
}
.column15 {
  width: 14%;
  float: left;
  position: relative;
  z-index:1;
}
.column15HideForMobile {
  width: 14%;
  float: left;
  position: relative;
  z-index:1;
}
column15BookingInfoMobile {
  width: 14%;
  float: left;
  position: relative;
  z-index:1;
}
.column20 {
  width: 19%;
  float: left;
  position: relative;
  z-index:1;
}
.column20HideForMobile {
  width: 19%;
  float: left;
  position: relative;
  z-index:1;
}
.column20Mobile50 {
	 width:19%;
  float: left;
  position: relative;
  z-index:1;
}
.column35 {
  width: 34%;
  float: left;
  position: relative;
  z-index:1;
}
.columnHideForMobile {
  float: left;
  position: relative;
  z-index:1;
}
.column35BookingInfoMobile {
  width: 34%;
  float: left;
  position: relative;
  z-index:1;
}
column15BookingInfoMobile {
  width: 14%;
  float: left;
  position: relative;
  z-index:1;
}
.column75 {
  width: 74%;
  float: left;
  position: relative;
  z-index:1;
  overflow-x:auto;
}
.column80 {
  width: 79%;
  float: left;
  position: relative;
  z-index:1;
}
.column85 {
  width: 84%;
  float: left;
  position: relative;
  z-index:1;
}

.column25:first-child {
  margin-right: 2%;
}

/*TITEL über einer Spalte (mit Linie darunter)*/

.row h2 {
  border-bottom: 4px solid #5cbed3;
  padding: 6px 4px;
  text-transform: uppercase;
  font: 0.9em 'lato_regular', Arial;
}
.row h2.center-with-margin {
  border-bottom: 4px solid #5cbed3;
  margin-bottom:20px;
  text-align:center;
  text-transform: none;
  font: 1.2em 'lato_regular', Arial;
}
.row h2.no-text-transform {
  text-transform: none;
}  

/*dieselben Überschriften haben in der 2. und 3. Kolumne eine andere Linienfarbe*/

.column3 h2, .column2 h2 {
  border-bottom: 4px solid #e2e7e6;
}

/*Überschrift innerhalb einer Reihe oder auch Kolumne*/

.row h3 {
  padding: 20px 0 10px 0;
  font-size: 1.4em;
  color: #000000;
}

/*grosse ÜBERSCHRIFT über einer Reihe*/

.claim {
  font-size: 2.6em;
    margin: 10px;
    padding-bottom: 10px;
}

/*BILDER*/

/* SSC 10.03.2018: auskommentiert und durch Klasse .bg-row-img ersetzt, da sonst icons in Buttons auf die row Größe gestreckt wurden
.row img {
  width: 100%;
  position: relative;
}
*/
.bg-row-img {
  width: 100%;
  position: relative;
}

.img {
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
}

/*Wenn statt eines Bildes eine Grafik benutzt wird*/

.graphic {
  background-color: #6cccee;
  z-index: 0;
}

/*Verschiedene Hintergrundfarben, eigentlich für die Grafiken gedacht*/

.color4 {
  background-color: rgba(7, 120, 172, 0.7)
}

.color3 {
  background-color: rgba(31, 106, 149, 0.1)
}

.color2 {
  background-color: rgba(108, 204, 238, 0.7)
}

.color1 {
  background-color: rgba(92, 190, 211, 0.2)
}

/*Wenn man eine Reihe mit schrägen Streifen möchte, fügt man die Klasse .stripe hinzu*/

.stripe:before {
  content:"";
  display: block;
  width: 100%;
  height: 200%;
  position: absolute;
  left: 50%;
  top: -10%;
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  background-color: rgba(255, 255, 255, 0.2);
}

.bg.stripe:after {
  content:"";
  display: block;
  width: 100%;
  height: 200%;
  position: absolute;
  left: 60%;
  top: -10%;
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  background-color: rgba(42, 147, 209, 0.08);
}

.bg {
  border-radius: 6px;
}

.bg.stripe:before {
  background-color: rgba(42, 147, 209, 0.05);
}

/*ÜBERSCHRIFT INNERHALB EINES .img KASTENS*/

.img h3 {
  position: relative;
  border-top: 1px solid white;
  padding: 10px 12px 12px 12px;
  font-size: 1.4em;
  color: #000000;
}

.img h3:first-child {
  border: none;
  border-bottom: 1px solid white;
}

/*verschiedene Abstandskorrekturen*/

.img>h3, .img p, #mainContent .img ul {
  padding: 10px 12px 12px 12px;
}


.column1>*:not(h2), .column1>*:not(button), .column2>*:not(h2), .column3>*:not(h2), .column1-2>*:not(h2), .column2-3>*:not(h2), .column1-2-3>*:not(h2), .column1-2-3-no-br>*:not(h2), .column50>*:not(h2){
  margin-left: 8px;
  margin-right: 8px;
}
.column1-2 p {
  padding-right: 20px;
}


/*Ein NEWSEINTRAG*/


.post {
  border-bottom: 1px solid #5cbed3;
  padding-bottom: 12px;
}
.post:last-child {
  border: none;
}

.post h3 {
  font-size: 2em;
  padding: 8px 0 18px 0;
}

#backlog h3 {
  font-size: 1.2em;
  padding-bottom: 0;
}

time {
  display: inline-block;
  background-color: rgba(87, 168,222, 0.1);
  padding: 4px 8px;
  margin-top: 20px;
  border-radius: 5px;
  font: 0.7em 'lato_regular', Arial;
  text-transform: uppercase;
  -moz-box-shadow:    inset 1px 1px 1px rgba(0,0,0, 0.08), 1px 1px 1px rgba(255,255,255, 0.2);
     -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, 0.08), 1px 1px 1px rgba(255,255,255, 0.2);
     box-shadow:         inset 1px 1px 1px rgba(0,0,0, 0.08), 1px 1px 1px rgba(255,255,255, 0.2);
}

@media all and (min-width: 1400px) {
  
  #mainContent {
    width: 80%;
  }
  
}

@media all and (min-width: 1000px) {
  .column1-2-3 {
    padding-top: 20px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
       -moz-column-gap: 50px; /* Firefox */
       column-gap: 50px;
       
   -webkit-column-rule: 1px outset rgba(31, 106, 149, 0.2); /* Chrome, Safari, Opera */
   -moz-column-rule: 1px outset rgba(31, 106, 149, 0.2); /* Firefox */
   column-rule: 1px outset rgba(31, 106, 149, 0.2);
  }
  
  .column1-2-3-no-br {
    /*padding-top: 20px;*/
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
       -moz-column-gap: 50px; /* Firefox */
       column-gap: 50px;
       
   -webkit-column-rule: 1px outset rgba(31, 106, 149, 0.2); /* Chrome, Safari, Opera */
   -moz-column-rule: 1px outset rgba(31, 106, 149, 0.2); /* Firefox */
   column-rule: 1px outset rgba(31, 106, 149, 0.2);
  }
  
  .column1-2-3, .column1-2-3-no-br h3 {
    padding-top: 0px;
  }
  
  .column1-2-3 p, .column1-2-3 li, .column1-2-3 h3, .column1-2-3-no-br p, .column1-2-3-no-br li, .column1-2-3-no-br h3 {
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
    page-break-inside: avoid; 
  }
/*  

  .column1-2-3-no-br p, .column1-2-3-no-br li, .column1-2-3-no-br h3 {
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
    page-break-inside: avoid; 
  }
 */ 
  .claim {
      padding-bottom: 20px;
  }
  
}
@media all and (max-width: 900px) {
	
	html{
		overflow-y:scroll;
	}
	#mainContent {
  		width: 96%;
  		margin: 1px auto;
  		overflow: hidden;
}
	.column80, .column85, .column75, .column65 {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
  }
 /* 
  Verschoben in 600: reicht später
  .column1, .column2, .column3, .column1-2, .column2-3, .column1-2-3, .column1-2-3-no-br {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;

  }
  */  
	/*column20 und andere früher umbrechen. Prüfen ob eigene Klasse notwendig, aber bei Verwendung als 5 Spalten fließen labels ggf. ineinander, bei Verwendung 80/20 prüfen*/

  .column25, .column15, .column35, .column20, .column10 {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
  }
  .column15HideForMobile, .column10HideForMobile, .column20HideForMobile, .hideForMobile {
	  display: none;
  }

  .column35BookingInfoMobile {
	 width:79%;
	 margin: 0;
    margin-bottom: 10px;
	font-size: 0.7em;
  }
  .column15BookingInfoMobile {
	 width:19%;
	 margin: 0;
    margin-bottom: 10px;
	float:right;
	font-size: 0.7em;
  }
  .column20Mobile50 {
	 width:49%;
	 margin: 0;
    margin-bottom: 5px;
	font-size: 0.7em;
  }

  .claim {
    font-size: 2em;
    padding-top: 8px;
    padding-bottom: 0px;
  }
  
  #mainContent ul.tabs li{
    font-size: 0.76em;
  }
  
}
@media all and (max-width: 650px) {
	/*html, body{
		overflow:scroll;
	}*/
  .column1, .column2, .column3, .column1-2, .column2-3, .column1-2-3, .column1-2-3-no-br {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;

  }
  .column25, .column15, .column35, .column20 {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
  }

/*}
S.Schleicher: geändert 20.04.2018--> erst ab 400px; zurück am 03.04. ggf. Spezialbehandlung schon für 600
@media all and (max-width: 400px) {*/
  #mainContent {
    width: 100%;
  }
  .column50 {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
  }

  .row {
    padding: 10px 10px 10px 10px;
    /*margin-bottom: 40px;*/
  }
  /*S.Schleicher 20.04.2018: generell aufgeteilt, um default-mäßig ohne den großen Abstand zu arbeiten. Für kleine displays kann der Abstand auch  geringer sein */
  .high-margin-bottom {
    margin-bottom: 30px;
  }
  
  .bg {
    border-radius: 0;
  }
  
  #mainContent ul.tabs {
    margin-bottom: 8px;
  }
  
  #mainContent ul.tabs li {
    padding-left: 4px;
  }
  
  #mainContent ul.tabs li:before {
    bottom: -20px;
  }
  
  #mainContent ul.tabs li:not(.active):before {
    display: none;
  }
  
  .claim {
    margin-left: 20px;
  }
  .ok {
	  float:none;
  }
  
}