.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; } .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; } 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; } .nl { /* Ausgabe Buchung step2 */ color: #8f8f8f; font-family: arial; font-size: 1em; float: left; display: table-cell; vertical-align: middle; padding: 0.3em; } .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; } .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; } .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; } .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; } }