.imgvorschau { /* Bild in der Suche, Vorschaubild */
  max-width: 100%;
	}

.whgsuchin { /* Block für interne Trennung innerhalb des Suchergebnisses */
  display: table-cell;
  vertical-align: top;
  width: 48%;
  padding: 0.1em;
  margin:0.1em;
  float: left;
  position:relative;
  font-size: 1em;
}

.suchefrei { /* Frei von bis innerhalb des Suchergebnisses */
  float: left;
  position:relative;
  color: 00af00;
}

.whgsuch { /* Block für eine Wohnung bei der Ausgabe der Suchergebnisse  */
  border: 1px solid #cfcfcf;
  background-color: #ffffff;
  display: table;
  width: 97%;
  vertical-align: top;
  padding: 0.3em;
  margin:0.3em;
  float: none;
  position:relative;
  font-size: 1em;
}

.rahmensuch { /* Rahmen rechts bei der Ausgabe der Suchergebnisse  */
  max-width: 40em;
  border: 1px solid #cfcfcf;
  background-color: #f5f5f5;
  display: table;
  vertical-align: top;
  padding: 0.3em;
  margin:0.3em;
  float: left;
  position:relative;
  font-size: 1em;
}

.selectsuch { /* Rahmen links um alle Bedienelemente bei Suche  */
  max-width: 16em;
  border: 1px solid #cfcfcf;
  background-color: #f5f5f5;
  display: table;
  vertical-align: top;
  padding: 0.3em 0.3em 0.3em;
  margin:0.3em 0.3em 0.3em;
  float: left;
  position:relative;
  font-size: 1em;
}

.asinfo {
  background-color: #bfffbf;
	font-weight: bold;
  border: 1px solid #808080;
  text-decoration: none;
  font-size: 0.9em;

}

.asefsuch { /* Select in der Suche */
  color: #8f8f8f;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  height: 100%;
  padding: 0.2em;
  margin:0.1em 0.1em 0.1em;
  float: left;
  display: table-cell;
  vertical-align: middle;
  width: 99%;
  font-size: 1em;
}

.trdssuch { /*   Rand um Tabellenfelder ua. Datumsauswahl in der Suche */
  color: #8f8f8f;
  border: 1px solid #cfcfcf;
  background-color: #ffffff;
  float: left;
  vertical-align: middle;
  font-size: 1em;
  padding: 0.1em;
  margin:0.1em;
  width: 15em;

}

.tddsssuch{ /*  Tabellenfeld um Datumsselect in der Suche */
  float: left;
  vertical-align: middle;
  background-color: #ffffff;
  padding: 0.2em;
  font-size: 1em;
  }

.chksuch { /* Suche Parameter menu links */
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  float: left;
  display: table-cell;
  vertical-align: middle;
  padding: 0.3em;
}


.expoben{ /* Expose oben rechts */
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  float: left;
  display: table-cell;
  vertical-align: middle;
  padding: 0.3em;
}


body { /* global */
  font-family: arial;
  color: #8f8f8f;
}

.monat,.monat a  { /* Kalender Überschrift Monatsname und Links */
  color: #8f8f8f;
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #8f8f8f;
  height: 1.75em;
  text-decoration: none;
}

.mofr, .saso { /* Kalender alle Tage */
  background: none;
  width: 1.65em;
  height: 1.75em;
}

.mofr { /* Kalender Farbe Montag bis Freitag */
  color: #8f8f8f;
}

.saso {  /* Kalender Farbe Samstag und Sonntag */
  color: #e00;
}


.ww { /* Kalender gewählt */
  background: url("https://www.fewo-line.de/img/ka/1-ww-25.png");
  color: #fff;
}

.fw { /* Kalender frei auf gewählt */
  background: url("https://www.fewo-line.de/img/ka/1-fw-25.png");
  color: #fff;
}

.wf { /* Kalender gewäglt auf frei */
  background: url("https://www.fewo-line.de/img/ka/1-wf-25.png");
  color: #fff;
}

.bw { /* Kalender belegt auf gewählt */
  background: url("https://www.fewo-line.de/img/ka/1-bw-25.png");
  color: #fff;
}

.wb { /* Kalender gewählt auf belegt */
  background: url("https://www.fewo-line.de/img/ka/1-wb-25.png");
  color: #fff;
  }

.gw { /* Kalender grau auf gewählt */
  background: url("https://www.fewo-line.de/img/ka/1-gw-25.png");
  color: #fff;
}

.bb { /* Kalender belegt */
  background: url("https://www.fewo-line.de/img/ka/1-bb-25.png");
  color: #fff;
}

.ff {  /* Kalender frei */
  background: url("https://www.fewo-line.de/img/ka/1-ff-25.png");
  color: #fff;
}

.bf { /* Kalender Wechsel belegt auf frei */
  background: url("https://www.fewo-line.de/img/ka/1-bf-25.png");
  color: #8f8f8f;
}

.fb { /* Kalender frei auf belegt */
  background: url("https://www.fewo-line.de/img/ka/1-fb-25.png");
  color: #8f8f8f;
}

.dd { /* Kalender direkter Wechsel */
  background: url("https://www.fewo-line.de/img/ka/1-dd-25.png");
  color: #fff;
}

.gb { /* Kalender Vergangenheit (grau) auf belegt */
  background: url("https://www.fewo-line.de/img/ka/1-gb-25.png");
  color: #fff;
}

.gf { /* Kalender Vergangenheit (grau) auf frei */
  background: url("https://www.fewo-line.de/img/ka/1-gf-25.png");
  color: #fff;
}

.gg { /* Kalender Vergangenheit und leere Felder */
  background: url("https://www.fewo-line.de/img/ka/1-gg-25.png");
  color: #fff;
}

.ww,.fw,.wf,.bw,.wb,.gw,.bb,.ff,.bf,.fb,.dd,.gb,.gf,.gg { /* Kalender Eigenschaften aller Datumsfelder */
  background-size: 1.65em 1.65em;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-color: transparent;
  border: 1px solid transparent;
  width: 1.65em;
  height: 1.75em;
  text-align: center;
}

.ww a,.wf a,.bw a,.wb a,.dd a { /* Kalender Links hell */
  text-decoration: none;
  color: #fff;
}

.gf a,.gw a,.ff a,.bf a,.fw a {  /* Kalender Links dunkel*/
  text-decoration: none;
  color: #8f8f8f;
}


.leg { /* Kalender Text Legende */
  line-height:0.9em;
  font-size:0.9em;
}

.wwl,.bbl,.ffl {/* Kalender Format Legende Quadrate */
  line-height:0.9em;
  font-size:0.9em;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid #cfcfcf;
  color: #8f8f8f;
}

.wwl { /* Kalender frei Legende */
  background-color: #00c000;
}

.bbl { /* Kalender belegt Legende */
  background-color: #fadfdf;
}

.ffl { /* Kalender frei Legende  */
  background-color: #dfffdf;
}

.verborgen{ /* Preisrechner */
  display:none;
}

.ckidall{ /* Preisrechner, Rahmen um Altersabfrage der Kinder */
  border: 1px solid #cfcfcf;
  background-color: #cfcfcf;
  display:table;
  position:absolute;
  z-index:2;
  font-family: arial;
  font-size: 1em;
  top:45px;
  left:-50px;
  width:93px;
  height:300px;
  line-height:30px;
  text-align:center;
}

.ckid{ /* Preisrechner, einzelnes Select Altersabfrage Kinder */
  display: table-cell;
  position:absolute;
  z-index:2;
  top:0px;
  left:5px;
  display:block;
  text-align:center;
  font-size: 1em;
}

.pfeil { /* Preisrechner, Pfeil oben an der Altersabfrage Kinder */
  position:relative;
  z-index:2;
  top:-45px;
  left:45px;
  width: 0px;
  height: 0px;
  -webkit-transform:rotate(0deg);
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #cfcfcf transparent;
  }


.kreuz { /*  Preisrechner, Kreuz zum Schließen der Altersabfrage Kinder */
  position:absolute;
  z-index:3;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  -webkit-transform:rotate(0deg);
  border-style: solid;
  border-width: 1px;
  border-color: #8f8f8f;
  color: #ffffff;
  background-color: #ff0000;
  text-decoration: none;
  font-weight: bold;
}


.table1, .kalender { /* Preisrechner, Hauptbereich um die Selects */
  display: table;
  position:relative;
  color: #8f8f8f;
  font-family: arial;
  padding: 0px;
  margin: 0px;
}

.yspacer {
  line-height: 0.7em;
  height: 0.7em;
	font-size: 0.7em;
	float: none;
  display: block;
	width: 100%;
	}

.table1{
  float: left;
}

.kalender{
  float: right;
}


.table3,.table4 { /* Kalender, Hauptbereich um die Selects */
  display: table;
  font-size: 1em;
  float: none;
  position:relative;
  color: #8f8f8f;
  font-family: arial;
}

.table4 { /* CMS Schritt 2 */
  padding: 0.2em;
}

.td4 { /* Preisrechner, Zelle um Ausgabe */
  display: table-cell;
  padding: 0.3em 0.3em 0.3em;
  vertical-align: middle;
  float:right;
  position:relative;
  font-family: arial;
  font-size: 1em;
}


.tr2 { /* Preisrechner, Zelle um die Ausgabe der Berechnung */
  max-width: 41em;
  display: table;
  vertical-align: middle;
  font-size: 1em;
  line-height: 1.3em;
  padding: 0em;
  margin: 0em;
  float: right;
  text-align: right;
}


.selrand { /* Eingabe Anreise und Personen, Aussenbereich um die Select Zellen */
  border: 1px solid #cfcfcf;
  display: table-row;
  vertical-align: middle;
  margin: 0px 1px 0px;
  padding: 0px;
  float:left;
  text-align: right;
  position:relative;
  font-size: 0.97em;
  line-height: 2.2em;
  }


.sellab,.seltaki { /* Eingabe Anreise und Personen Label */
  margin: 0em 0em 0em 0.2em;
  display: table-cell;
  vertical-align: middle;
  float:left;
  position:relative;
  font-family: arial;
  font-size: 0.9em;
}

.preisliste {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  float:left;
  position:relative;
  font-family: arial;
  font-size: 1em;
  width: 100%;
}

.preitb {
  background-color: #f5f5f5;
  width: 100%;
}

.preitd,.preith {
  background-color: #ffffff;
  padding: 0.6em;
  font-size: 1em;
}

.preith {
  font-weight: bold;
}

.td1 { /* Preisrechner, Zelle um den Select */
  margin: 0em 0em 0em 0.2em;
  display: table-cell;
  vertical-align: middle;
  float:left;
  position:relative;
  font-family: arial;
  font-size: 0.98em;
  line-height: 2em;
  height: 2em;

}


.td1 select{ /* Preisrechner, der Select selbst */
  border-color: #cfcfcf;
  font-size: 0.98em;
  vertical-align: middle;
  color: #8f8f8f;
  background-color: #ffffff;
}

.sel_list {
  border-color: #cfcfcf;
  font-size: 0.9em;
  line-height: 1em;
  color: #8f8f8f;
  background-color: #ffffff;
}

.celbr { /* Hinweis  */
  max-width: 40em;
  border: 1px solid #cfcfcf;
  display: table;
  vertical-align: middle;
  margin: auto;
  padding: 0.3em 0.3em 0.3em;
  float: none;
  position:relative;
  font-size: 1em;
}

.prta { /* Wiederholung der Preise im Schritt 2 */
  max-width: 40em;
  display: table;
  vertical-align: middle;
  margin: auto;
  padding: 0.3em 0.3em 0.3em;
  float: none;
  position:relative;
  font-size: 1em;
}

.hl { /* Überschrift Schritt2 */
  display: block;
  vertical-align: middle;
  float: none;
  position:relative;
  font-size: 1em;
  padding: 0.2em;
  font-weight: bold;
}

.ptak { /* Preisrechner, Ausgabefenster Tabelle rechte Seite */
  text-align: right;
  padding: 0.1em 0;
  vertical-align: bottom;
  line-height: 1.3em;
}

.err { /* Preisrechner, Ausgabefenster Tabelle rechte Seite Fehlerpreis */
  text-align: right;
  padding: 0.1em 0;
  vertical-align: bottom;
  line-height: 1.3em;
  font-weight: bold;
  color: #ff0000;
}


.ptak b { /* Preisrechner, Ausgabefenster Tabelle Summe rechts*/
  border-top: 1px solid #8f8f8f;
  display: block;
  margin-top: 0.1em;
  padding-top: 0.9em;
  text-align: right;
}

.ptab {
  text-align: right;
}

.btn { /* Preisrechner Button */
  padding: 0.3em;
  margin-left: 1em;
  color: #8f8f8f;
  background-color: #ffffff;
  float: right;
}

.bt2 { /* AGB Button */
  position:relative;
  color: #8f8f8f;
  background-color: #f5f5f5;
  float: right;
}

.nt { /* Expose Tabelle Eigenschaften */
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  vertical-align: top;
  padding: 0.3em;
}

.im { /* Ausgabe Buchung step2 Sicherheitscode */
  float: right;
  display: table-cell;
  vertical-align: middle;
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
}

.ime { /* Ausgabe Buchung step2 Sicherheitscode Fehlerfall rot */
  color: #ffffff;
  background-color: #ff0000;
  float: right;
  display: table-cell;
  vertical-align: middle;
  font-family: arial;
  font-size: 1em;
}



.alstl{ /* Ausgabe Buchung step3 links */
  height: 1.6em;
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  width: 12em;
  text-align: left;
}

.alstr{ /* Ausgabe Buchung step3 rechts*/
  height: 1.6em;
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  width: 20em;
  text-align: left;
}

.ase, .ase2{ /* Ausgabe Buchung step2 */
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
}

.ase {
	width: 11em;
  float: right;
}

.ase2 {
	width: 90%;
  float: left;
  margin-left: 0.5em;
}

.asee{ /* Ausgabe Buchung step2 */
  color: #ffffff;
  background-color: #ff0000;
  font-family: arial;
  font-size: 1em;
  text-align: left;
  float: right;
  display: table-cell;
  vertical-align: middle;
  width: 11em;
}

.asef{ /* Ausgabe Buchung step2 Select aussen */
  color: #8f8f8f;
  height: 1.6em;
  float: left;
  display: table-cell;
  vertical-align: middle;
  width: 11.5em;
}



.nl { /* Ausgabe Buchung step2   */
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  float: left;
  display: table-cell;
  vertical-align: middle;
  padding: 0.3em;
  width: 17.6em;
}


.txt24 { /* Ausgabe Buchung step2   */
  color: #8f8f8f;
  font-family: arial;
  font-size: 0.95em;
  float: inherit;
  display: table;
  vertical-align: middle;
  padding: 0.3em;
  width: 90%;
}


.ala{ /* Ausgabe Buchung step2 */
  height: 1.6em;
  color: #8f8f8f;
  font-family: arial;
  font-size: 1em;
  width: 6em;
  text-align: left;
  float: left;
  display: table-cell;
  vertical-align: middle;
}

.lnk1,.lnk2,.cbk1{ /* Link Info und Datenverarbeitungshinweis */
  color: #8f8f8f;
  height: 1.6em;
  font-size: 0.8em;
  float: left;
  vertical-align: bottom;
  margin-left: 0.2em;
  padding-top: 0.2em;
}

.lnk2 a,.lnk1 a {
  color: #8f8f8f;
}

.cbk1{ /* Link Info und Datenverarbeitungshinweis */
  padding-top: 0.0em;
  width: 1.5em;
  vertical-align: middle;
}



.atext{ /* Frageformular */
  color: #8f8f8f;
  float: left;
  display: table-cell;
  vertical-align: middle;
}

.td5l { /* Expose oben */
  width: 44em;
  padding: 1em 1em 1em;
  display: table-cell;
  vertical-align: top;
  float:left;
  position:relative;
  font-family: arial;
  font-size: 1em;
  text-align: left;
}

.td5r { /* Expose oben */
  width: 17em;
  padding: 1em 1em 1em;
  display: table-cell;
  vertical-align: top;
  float: left;
  position:relative;
  font-family: arial;
  font-size: 1em;
  text-align: left;
}


.expbild {/* Bild im Expose */
  width: 32%;
  float: left;
  padding: 0.2em;
}

.exprahmen { /* Expose Aussenrahmen */
  max-width: 65em;
  display: table;
  margin: auto;
  padding: 0px;
  float: none;
  position:relative;
  font-size: 1em;
}

.kartenframe { /* Expose iframe Googlekarte */
  position: relative;
  padding-bottom: 56.25%;  /* Seitenverhältnis */
  height: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.kartenframe iframe { /* Expose iframe Googlekarte */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.buframe { /* Expose iframe Buchungstool */
  position: relative;
  display: table-cell;
  padding-bottom: 60%;  /* Seitenverhältnis */
  overflow: hidden;
  width: 42em;
  margin: 0px;
  padding: 0px;
  height: 40em;
  float:left;
}

.feld, .preise {
  position: relative;
  max-width: 20em;
  display: table-cell;
  border: 1px solid #8f8f8f;
  background-color: #f5f5f5;
  padding: 0.5em;
  margin-top: 1.1em;
  float: left;
}

.td31,.td32,.td33,.td34,.td35 { /* Kalenderblöcke */
  margin: 0.1em 0.1em 0.1em 0.1em;
  display: table-cell;
  vertical-align: middle;
  float:left;
  position:relative;
  font-family: arial;
  font-size: 1em;
  }

.mpf0,.mpf1,.mpf2,.mpf3,.mpf4,.mpf5 { /* Kalender Navigationspfeile */
  color: #8f8f8f;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  height: 1em;
  line-height: 1em;
  text-decoration: none;
  border: 1px solid #cfcfcf;
  float: left;
}

.mpf1,.mpf2 {
  display: none;
}



/*  Wenn Bildschirm schmaler als ... diese Einstellungen verwenden */
@media only screen and (max-width: 64em) {


  .td5l { /* Expose oben */
    width: 90%;
  }

  .expbild { /* Bild im Expose */
    width: 49%;
  }

  .preise {
    width: 95%;
    max-width: 95%;
    display: table-cell;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 0em 0em 2em;
    margin: 0em 0em 0em;
    float: left;
  }

  .preitd,.preith {
    background-color: #ffffff;
    padding: 0.1em;
    font-size: 0.9em;
  }

}

/*  Wenn Bildschirm schmaler als ... diese Einstellungen verwenden */
@media only screen and (max-width: 41em) {
  .tr2 {/* Aussenrand */
    max-width: 27em;
  }

  .expbild { /* Bilder unter mindestbreite nur noch eine Spalte */
    width: 98%;
  }

  .buframe { /* Expose iframe Buchungstool */
    height: 50em;
    width: 98%;
  }

  .mpf2 { /* Rechtspfeil in Kalender 2 einblenden */
    display: table-cell;
  }

  .td33 { /* Kalender 3 ausblenden */
    display: none;
  }

  .preisliste { /* Preisliste unten ausblenden */
    display: none;
  }

  .selrand {/* Beide Selektblöcke auf gleiche Brteite setzen */
    width: 27em;
    float: right;
  }

  .sellab {/* Label der Selektblöcke auf gleiche Brteite setzen, damit werden die selects eingerückt */
    width: 8em;
  }
}


@media only screen and (max-width: 28em) {



  .tr2 {/* Aussenrand */
    max-width: 22em;
  }

  .sellab {/* Label der Selektblöcke auf gleiche Brteite setzen, damit werden die selects eingerückt */
    width: 6em;
  }

  .selrand {/* Beide Selektblöcke auf gleiche Brteite setzen */
    width: 95%;
  }


  .saso,.mofr,.monat,.mpf0,.mpf1,.mpf2 {
    width: 1.3em;
    font-size: 0.8em;
  }

  .leg,.wwl { /* Kalender 2 ausblenden */
    font-size:0.8em;
  }

  .ww,.fw,.wf,.bw,.wb,.gw,.bb,.ff,.bf,.fb,.dd,.gb,.gf,.gg {
    background-size: 1.4em;
    width: 1.4em;
    font-size:0.9em;
    height: 1.4em;
  }


  .buframe { /* Expose iframe Buchungstool */
    height: 65em;
    width: 98%;
  }


.whgsuchin {    /* Block für interne Trennung innerhalb des Suchergebnisses. Jetzt unterneinander schreiben*/
  width: 98%;
  display: block;
  float: none;
  }

.whgsuch {    /* Block für interne Trennung innerhalb des Suchergebnisses. Jetzt unterneinander schreiben*/
  width: 93%;
  display: block;
  float: none;
  }

.imgvorschau { /* Bild in der Suche, Vorschaubild (für alte firefox Version)*/
	width: 100%;
  float: none;
	}


}



@media only screen and (max-width: 21.5em) {

.saso,.mofr,.monat,.mpf0,.mpf1,.mpf2 {
  width: 1.4em;
  font-size: 1.2em;
  }

.leg,.wwl { /* Kalender 2 ausblenden */
   font-size:0.9em;
   }

.td32 {
   display: none;
  }

.mpf1 { /* Rechtspfeil in Kalender 1 einblenden */
   display: table-cell;
   }

.ww,.fw,.wf,.bw,.wb,.gw,.bb,.ff,.bf,.fb,.dd,.gb,.gf,.gg {
  background-size: 1.7em;
  width: 1.7em;
  font-size:1.3em;
  height: 1.8em;
  }


}