html { font-family: 'Raleway', sans-serif; font-weight:300; /* option 300,200 */ font-size:0.970em; overflow-y:scroll; }
nav, nav .container { font-weight:300; }
footer, footer .container a { font-size:100%; font-weight:300; }
h1, h2 { opacity:0.87; font-weight:300; }
h3, h4, h5 { opacity:0.67; font-weight:300; }
h6, h7, h8, h9 { opacity:0.54; font-weight:200; }
body, footer { background:#fff; color:rgba(0,0,0,0.87) }
main { background:#fafafa }
nav { background-color:rgba(255,255,255,1); color:#121212; font-size:124%;}
main aside, main article { background: #ffffff; color:#222; }
main > div.container > h2 { font-size:210%; float:left; margin-bottom:12px;}
main aside>h2 { width:100%; display:inline-block; float:left; text-align:left; margin-bottom:32px; }
main aside>form { display:block; float:left; position:relative; width:100%;}
main aside>form button[type='submit'] { display:block; width:95%; margin-left:2.5%; padding:12px 0px;
color: rgba(255,255,255,1.00); background:rgba(55,55,55,1.00); font-size:133%;}
/* GrundStruktur */
.container { max-width:1440px; }
header, header .container { background-color:#fafafa }
main aside.top { background-color:#fff }
main .container { padding:64px 16px; margin-top:76px; min-height:84vh; }
footer { min-height:190px; border-top:rgba(224,224,224,1.00) 1px solid }
/* Responsive Key-Part */
main section { width:65%; margin:36px 5% 36px 0px; float:left; position:relative; }
main div.aside { width:30%; margin:36px 0px 36px 0px; float:right; position:relative; }
nav { display:block;
background-image: url(pic/logo.svg) !important;
background-size:contain;
background-repeat:no-repeat;
background-position:192px;
z-index:999; position:fixed; }
/* Zoom Navi */
nav.smooth { }
nav .container ul li a { padding:56px 22px 18px 22px; font-size:120%; font-weight:300; }
nav.smooth .container ul li a {
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-ms-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out; }
nav.slim .container ul li a { padding:20px 20px 18px 20px; font-size:100%; position:relative; }
nav .container ul li a:after { display:block; position:relative; width:100%; float:left; height:1px; background:#66a317; content:''; opacity:0; margin-top:4px;}
nav .container ul li a:hover:after { opacity:0.33; }
nav .container ul li a.actual:after { opacity:1; }
/* ALLGEMINER ZURÜCK-Button */
button.back { display:block; float:left; padding:6px 38px 6px 17px !important; width:auto;
margin-right:16px; font-size:14px; font-weight:400 !important; text-transform:uppercase; background-color:#66a317;}
/* WELCOME IMAGE BOX HOME-SITE */
header div.parallaxImage { font-size:240%; display:block; position:relative; float:left; width:100%; width:100vw;
background-size:100%; background-size:cover; background-repeat: no-repeat; padding-top:18vh; background-color:#66a317;
border-bottom:7px solid rgba(102,163,23,1);}
header div.parallaxImage div.homelogo { display:inline-block; position:relative; float:left; width:100%; height:15vh; text-align:center; margin-bottom:4vh;
background-color:transparent; background-image:url(pic/logo.svg); background-size:contain; background-repeat:no-repeat; background-position:center; }
header div.parallaxImage h2 { font-size:200%; font-family: 'Raleway', sans-serif; font-weight:300;
display:inline-block; position:relative; float:left;
color:rgba(255,255,255,1.00); width:100%; text-align:center;
opacity:0.9; text-shadow: 2px 2px 4px #000000; }
header div.parallaxImage h2 small { font-weight:200; font-style:italic; font-size:50%; }
header div.parallaxImage div.buttonBar { display:inline-block; position:relative; float:left; width:100%; margin-top: 64px; }
header div.parallaxImage div.buttonBar a.button { display:block; position:relative; width:23%; float:left; padding:32px 0px 0px 0px !important; font-size:76%; background:#66a317 !important;
color:rgba(255,255,255,1.00);
-webkit-transition: all 190ms ease-in-out;
-moz-transition: all 190ms ease-in-out;
-ms-transition: all 190ms ease-in-out;
-o-transition: all 190ms ease-in-out;
transition: all 190ms ease-in-out; }
header div.parallaxImage div.buttonBar a.button:first-child { margin-left:14%; }
header div.parallaxImage div.buttonBar a.button:nth-child(2) { margin-left:2%; }
header div.parallaxImage div.buttonBar a.button:nth-child(3) { margin-left:2%; }
header div.parallaxImage div.buttonBar a.button { font-family: 'Raleway', sans-serif;
font-weight:300;
text-transform: uppercase;
-webkit-border-radius: 24px 0 24px 0;
border-radius: 24px 0 24px 0; }
header div.parallaxImage div.buttonBar a.button:hover
{ padding:28px 0px 24px 0px !important; -webkit-border-radius: 24px 0 0 0; border-radius: 24px 0 0 0;
background:#ffffff !important; color:rgba(79,79,79,1.00); text-decoration:underline }
header div.parallaxImage div.buttonBar a.button > div.linktext { position:relative; width:80%; margin-top:-24px; height:0px; overflow:hidden; display:inline-block; opacity:0;}
header div.parallaxImage div.buttonBar a.button > div.linktext p { font-size:62%; color:rgba(74,74,74,0.00); line-height:1.67em; text-transform:none !important}
header div.parallaxImage div.buttonBar a.button:hover > div.linktext { margin-top:28px; height:auto; overflow:hidden; opacity:1; }
header div.parallaxImage div.buttonBar a.button:hover > div.linktext p { color:rgba(74,74,74,1.00); }
/* Content-Formatierung */
main article, main aside { padding:32px 24px; display:block; position:relative; float:left;}
main aside { width:100%; margin-bottom:36px; }
main article:nth-child(even) { background-color:rgba(102,163,23,0.10);}
main article { width:100%; margin-bottom:24px; margin-top:24px; border-bottom:2px solid rgba(102,163,23,0.5);} /* Normale Blogbeiträge auf News */
main article.left70 { width:68%; margin-top:36px; border-bottom:0px solid rgba(102,163,23,0.0); background-color:rgba(255,255,255,1);} /* Normale Startseitenbeiträge */
main article > h2, main article > p { display:block; float:left; margin:2%; }
main article > h2 { text-align:left; font-weight:300; font-size:190%; }
main article > p { line-height:1.67em; opacity:0.87; font-size:120%; font-weight:200;}
main article > a > img.articlebild,
main article > img.articlebild { display:block; float:left; width:25%; /* margin-top:72px; */ }
main article > time { display:block; margin-top:-12px; width:98%; text-align:right;
font-size:87%; opacity:0.87; z-index:2;}
main article > p > a { color:rgba(0,0,0,1.00); font-weight:300; font-size:105%; }
main article > p > a:hover { text-decoration:underline; }
main article a.speichern { display:block; position:relative; float:right; padding:8px 24px; text-transform:uppercase; max-width:25%; }
/* Andere Abwandlungen - Impressum, Datenschutz, Haftung etc... */
main article.imprint.half { width:45%; margin:2.5%; }
main article.imprint > h2,
main article.imprint > h3,
main article.imprint > p { line-height:1.67em; opacity:0.90; float:left; margin-left:2%; width:95%; font-weight:300;}
main article.imprint > h2 { font-size:185%; }
main article.imprint > p { font-size:100%; }
/* Standort */
main article.standort > figure { display:inline-block; float:left; position:relative; width:70%; }
main article.standort > figure > div#googleMapFrame { position:relative; margin:0px; width:100% !important; height:600px !important;}
main article.standort > figure > a { color:rgba(73,73,73,1.00); }
main article.standort > p { float:right; width:25%; }
/* fewo Unterseiten */
main article.fewosite { background-color:rgba(255,255,255,1); }
main article.fewosite > h2 { display:inline-block; position:relative; width:98%; padding-left:8%; float:left; font-size:300%; height:86px; padding-top:28px; border-bottom:rgba(177,177,177,1.00) solid 1px; margin-bottom:36px; background-image:url(pic/fewo-info.svg); background-size:64px; background-position:left center; background-repeat: no-repeat; text-align:right }
main article.fewosite > figure { display:inline-block; float:left; width:98%; margin-bottom:24px; }
main article.fewosite > div.imageblock
{ display:flex; min-height:86px; position:relative; background-color:rgba(245,245,245,1.00); float:left; width:25%;
align-content:flex-start;
justify-content: space-around;
align-items:center;
flex-wrap:wrap;
flex-direction:row;
-webkit-box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.5);
box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.5); }
main article.fewosite > div.imageblock > a { display:block; margin:8px; }
main article.fewosite > div.imageblock > h3 {display:inline-block; position:relative; width:100%; height:36px; float:left; margin-top:12px; border-bottom:2px solid rgba(102,163,23,1); text-align:center; }
main article.fewosite > div.priceinfo { display:block; float:left; width:70%; margin-left:3%; background:rgba(102,163,23,1);
padding:8px; text-align:right; color:rgba(255,255,255,1.00); font-size:133%; }
main article.fewosite > p { width:40%; text-align:justify; float:left; margin-left:3%; margin-top:12px; font-size:107%; }
main article.fewosite > div.contactbox { display:block; float:left; margin-left:3%; margin-top:12px; min-height:86px; width:25%; background:rgba(144,208,255,0.30); padding:20px; position:relative}
main article.fewosite > div.contactbox > h3 { display:block; width:100%; padding:4px 0; border-bottom:rgba(180,180,180,1.00) 1px solid; margin-bottom:20px; }
main article.fewosite > div.contactbox > p { display:block; width:100%; font-size:90%; color:rgba(96,96,96,1.00); margin-bottom:20px; }
main article.fewosite > div.contactbox > a.button { width:100% !important; display:inline-block; float:left; margin-top:64px; background:rgba(1,87,204,1.00); color:rgba(255,255,255,1.00); font-size:120%; font-weight:300; opacity:0.67; }
main article.fewosite > div.contactbox > a.button:hover { opacity:1; }
/* Seiten - News : Startseite */
main aside { font-size:95%; padding-bottom:12px; border-right:2px solid rgba(102,163,23,0.33); border-bottom:2px solid rgba(102,163,23,0.33);}
main aside>div { width:100%; position:absolute; top:0px; left:0px;
height:96px; z-index:1; overflow:hidden; background-size:100%;
background-position:center; background-repeat:no-repeat;}
main aside>a { width:56px; height:56px; background-image:url(pic/g_link.svg);
background-size:108%; opacity:0.87; background-position:center; background-repeat:no-repeat; overflow:hidden;
position:absolute; top:67px; right:24px; z-index:2;
background-color:rgba(255,255,255,1.00); -webkit-border-radius: 28px; border-radius: 28px; }
main aside>a:hover { opacity:1; }
main aside h3 { opacity:1; display:block; padding-right:16%; margin-top:80px;}
main aside time { display:block; margin-top:-12px; width:98%; text-align:right;
font-size:87%; opacity:0.87; z-index:2;}
main aside p { line-height:24px; margin-top:24px; overflow:hidden; text-align:justify; }
/* Linien / Abstandsbalken */
main article h2:after,
main aside h3:after { content:''; display:block; width:100%; height:1px; margin:8px 0px 16px 0px; }
main article h2:after { background:rgba(0,0,0,0.02); }
main aside h3:after { background:rgba(255,255,255,0.01); }
div.datumselect { width:23%; margin:1%;}
div.datumselect { text-align:center; display:inline-block; float:left; position:relative; overflow:hidden !important;
-ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
div.datumselect::selection { background: transparent; color: inherit; }
div.datumselect::-moz-selection { background: transparent; color: inherit; }
div.kalendernav { display:block; width:100%; height:48px; margin:2% 0 0px 0;
line-height:48px; font-size:133%; font-weight:300; color:rgba(45,45,45,1.00);}
div.kalendernav div.switch { display:inline-block; width:12%; margin:4px; background:rgba(81,81,81,0.50); color:rgba(255,255,255,0.30); line-height:40px; font-size:28px; margin-top:18%; z-index:50;}
div.kalendernav div.switch:first-child { float:left }
div.kalendernav div.switch:last-child { float:right }
div.kalendernav div.switch:hover { color:rgba(255,255,255,1); cursor:pointer; background:rgba(94,94,94,1.00);}
div.kalendernav div.switch:first-child:before { content:'<'; }
div.kalendernav div.switch:last-child:before { content:'>'; }
div.kalenderfloat { display: block; position:relative !important; }
div.kalenderslide { display:inline-block; position:relative !important; float:left;}
/* background-image:url(pic/kalenderbox.svg);background-repeat:no-repeat;background-size:cover !important;background-size:100%; */
div.kalenderhead {display:block; width:70%; position:relative; text-align:center; font-size:133%; padding:8px 0 7px 0; background:rgba(67,67,67,1.00); color: rgba(255,255,255,1.00); font-weight:300; margin:-44px 15% 2px 15%; z-index:10;}
div.kalenderbox {display:block; position:relative; }
div.kalenderday{display:block;float:left;width:11%;height:9.6%;margin:3% 1.43%;padding:0px !important;position:relative;}
div.kalenderday:nth-child(1),div.kalenderday:nth-child(2),div.kalenderday:nth-child(3),div.kalenderday:nth-child(4),div.kalenderday:nth-child(5),div.kalenderday:nth-child(6),div.kalenderday:nth-child(7){margin-top:15%}
div.kalenderday:nth-child(1),div.kalenderday:nth-child(8),div.kalenderday:nth-child(15),div.kalenderday:nth-child(22),div.kalenderday:nth-child(29),div.kalenderday:nth-child(36){margin-left:3%}
div.kalenderbox { width:100%;min-height:360px}
div.kalenderbox { }
div.kalenderbox:before { display:block; width:100%; height:12%; top:2.5%;
content:'Mo Di Mi Do Fr Sa So'; font-size:1.2em;
position:absolute; text-align:center; word-spacing:0.9em; }
/* KalenderDay Style */
div.kalenderday { background-color:rgba(85,85,85,1.00); text-align:center;
line-height:32px; font-weight:300; font-size:21px;
color:rgba(255,255,255,1.00); border:thin solid rgba(100,100,100,0.10);
-webkit-transition: all 120ms ease-in-out;
-moz-transition: all 120ms ease-in-out;
-ms-transition: all 120ms ease-in-out;
-o-transition: all 120ms ease-in-out;
transition: all 120ms ease-in-out; }
div.kalenderday:hover { color:rgba(255,255,255,0.10);}
/* Hover Text Preset */
div.kalenderday:before { position:absolute; display:block; content:''; font-size:10px;
width:100%; text-align:center; color:rgba(255,255,255,0.00); line-height:32px; left:0px;}
div.kalenderday:hover:before { color:rgba(255,255,255,1.00); }
/* Freies Zimmer */
div.kalenderday.available { background-color:rgba(102,163,23,1); }
div.kalenderday.available:before { display:none; }
div.kalenderday.available:hover:before { display:none; }
/* Heute */
div.kalenderday.today { background-color: rgba(112,172,191,1.00); cursor:not-allowed;}
div.kalenderday.today:before { content:'heute'; font-size:12px; }
div.kalenderday.today:hover:before { color:rgba(255,255,255,1.00); }
/* Tage vor dem ersten Tag des Monatsblogs */
div.kalenderday.empty { opacity:0; visibility:hidden; }
/* Vergangene Tage */
div.kalenderday.old { opacity:0.1; cursor:not-allowed; }
div.kalenderday.old:before { display:none; }
div.kalenderday.old:hover { color:rgba(255,255,255,1);}
/* Vorgesperrte Tage */
div.kalenderday.booked ,
div.kalenderday.locked { background-color: rgba(171,171,171,1.00); opacity:0.5; cursor:not-allowed; }
div.kalenderday.booked:hover,
div.kalenderday.locked:hover { color:rgba(255,255,255,0.00) !important; background-image: url(pic/lock.svg);
background-size:40px; background-repeat:no-repeat; background-position:center; }
/* Radio Button Label Styling */
div.kalenderday.available input[type="radio"] { position:absolute; display:block; width:100%; height:100%; left:0px; opacity:0.01; z-index:20; cursor:pointer;}
div.kalenderday.available label { position:absolute; display:block; width:100%; height:100%; left:0px; background-color:rgba(70,70,70,0.00);
z-index:10; }
div.kalenderday.available input[type="radio"]:hover + label { color:rgba(255,255,255,1); background-image:url(pic/check-02.svg); background-size:90%; background-repeat:no-repeat; background-position:center; }
div.kalenderday.available input[type="radio"]:checked + label { background-color:rgba(70,70,70,1.00); color:rgba(0,0,0,0.2); background-image:url(pic/check-01.svg); background-size:90%; background-repeat:no-repeat; background-position:center;}
output.hidden { visibility:hidden; width:1px; height:1px; overflow:hidden; }
div.steptwo { display:inline-block; float:left; width:50%;}
div.checkin { -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
div.checkin::selection { background: transparent; color: inherit; }
div.checkin::-moz-selection { background: transparent; color: inherit; }
div.checkin, div.kundeninfo { display:inline-block; float:left; position:relative; padding:20px; margin-top:24px; min-height:465px; }
div.checkin { width:60%; text-align:center; background-color:rgba(102,163,23,0.33); }
div.kundeninfo { width:40%; background:rgba(255,255,255,1.00); color:rgba(0,0,0,1.00); font-weight:300;}
div.checkin > button {
position:absolute; bottom:4px; width:94%; left:3%; background:rgba(102,163,23,1); color:rgba(255,255,255,1.00); font-weight:300; font-size:28px;}
div.checkin > button:hover { background:rgba(0,131,225,1.00) }
div.checkin table { display:block; position:relative; float:left; width:100%; background-color:rgba(255,255,255,1.00); padding:20px 0; }
div.checkin table tr { display:block; position:relative; float:left; width:90%; border-bottom:rgba(210,210,210,1.00) 1px solid; padding:4px 12px; margin:2px 5%;}
div.checkin table tr td { font-size:22px; height:32px; }
div.checkin table tr:nth-child(2) td,
div.checkin table tr:nth-child(4) td { font-size:14px; color:rgba(122,122,122,1.00); }
div.checkin table tr td:nth-child(1) { width:50%; display:inline-block; position:relative; float:left; }
div.checkin table tr td:nth-child(2) { width:40%; text-align:right !important; display:inline-block; position:relative; float:right; }
div.checkin table tr td input[type='number'] { display:block; float:right; width:90px; height:24px; padding:0px; text-align:center;font-weight:300; margin:0px; font-size:inherit; line-height:inherit; background:rgba(207,247,180,1.00);}
div.personendaten { display:none;
position:relative; float:left;
width:100%; margin-top:24px;
min-height: 90px; padding:20px 2%;
background: rgba(230,230,230,1.00); }
div.personendaten button.verwerfen { width:67%; background:rgba(189,0,3,1.00); display:block;
color:rgba(255,255,255,1.00); float:left; opacity:0.8; }
div.personendaten button.verwerfen:hover { opacity:1 }
div.personendaten ul { display:block; background:rgba(255,255,255,0.89); padding:24px; width:33%;
font-size:120%; margin-top:2%; float:left; }
div.personendaten ul h3 { display:inline-block; margin-bottom:20px; }
div.personendaten ul li { display:block; padding-top:28px; padding-bottom:12px;
border-bottom: solid rgba(210,210,210,1.00) 1px; }
div.personendaten ul li span { display:inline-block; float:right; text-align:right; font-size:107%;}
div.personendaten ul li span output { display:inline-block; float:left; margin:0px 4px; }
div.personendaten ul li:nth-child(4) { border-bottom: solid rgba(180,180,180,1.00) 1px; }
div.personendaten ul li:nth-child(5) { border-bottom: double 3px rgba(81,81,81,1.00);}
div.personendaten ul li:nth-child(6) { font-size:70%; height:90px; font-style:italic;}
div.datainputs { display:block; float:left; width:56%; background:rgba(255,255,255,1.00); min-height:240px;
margin:2% 0 0 5%; -webkit-box-shadow: 1px 1px 9px 1px rgba(0,0,0,0.25); box-shadow: 1px 1px 9px 1px rgba(0,0,0,0.25);}
/* //////////////////////////////// NEUE FEWO ERSTELLEN /////////////////////////////////// */
div.addFeWo { display:block;
float:left;
position:relative;
width:100%;
/* perspective: 800px;
transform-style: preserve-3d; */ }
div.addFeWo.open { background-color: rgba(255,251,216,1.00); border-bottom:rgba(90,90,90,1.00) solid 4px; }
div.addFeWo > div.ocToggle {
font-weight:200;
display:block;
float:left;
text-align:left;
width:100%;
padding:12px 12px 12px 90px;
font-size:100%;
background-image: url(pic/info.svg);
background-size:contain;
background-repeat:no-repeat;
background-position:left top;
background-color:rgba(65,155,220,1.00);
color:rgba(255,255,255,1.00);}
div.addFeWo > div.ocToggle > strong { font-weight:300; font-size:120%; margin-bottom:6px; display:inline-block; float:left; width:100%;}
div.addFeWo > div.ocToggle:hover { background-color: rgba(90,90,90,1.00); cursor:pointer; }
div.addFeWo.open > div.ocToggle { background-color: rgba(90,90,90,1.00); background-image: url(pic/infoclose.svg) !important; }
div.addFeWo > div.ocToggle { animation-name: shift;
animation-duration: 0.07s;
animation-iteration-count: 6;
animation-timing-function: ease-in;
animation-delay:0.9s;
/* backface-visibility: visible;*/ }
/*
@keyframes rotate {
0% { -ms-transform: rotateX(0deg); transform: rotateX(0deg) }
50% { -ms-transform: rotateX(180deg); transform: rotateX(180deg)}
100% { -ms-transform: rotateX(360deg); transform: rotateX(360deg)}
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg) }
50% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg) }
100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg) }
}
@-moz-keyframes rotate {
0% { -moz-transform: rotateX(0deg); transform: rotateX(0deg) }
50% { -moz-transform: rotateX(180deg); transform: rotateX(180deg)}
100% { -moz-transform: rotateX(360deg); transform: rotateX(360deg)}
}
@-o-keyframes rotate {
0% { -o-transform: rotateX(0deg); transform: rotateX(0deg) }
50% { -o-transform: rotateX(180deg); transform: rotateX(180deg)}
100% { -o-transform: rotateX(360deg); transform: rotateX(360deg)}
} */
@keyframes shift {
0% { -ms-transform: translateX(0px); transform: translateX(0px) }
25% { -ms-transform: translateX(12px); transform: translateX(12px)}
75% { -ms-transform: translateX(-12px); transform: translateX(-12px)}
100% { -ms-transform: translateX(0px); transform: translateX(0px)}
}
@-webkit-keyframes shift {
0% { -webkit-transform: translateX(0px); transform: translateX(0px) }
25% { -webkit-transform: translateX(12px); transform: translateX(12px) }
75% { -webkit-transform: translateX(-12px); transform: translateX(-12px) }
100% { -webkit-transform: translateX(0px); transform: translateX(0px) }
}
@-moz-keyframes shift {
0% { -moz-transform: translateX(0px); transform: translateX(0px) }
25% { -moz-transform: translateX(12px); transform: translateX(12px)}
75% { -moz-transform: translateX(-12px); transform: translateX(-12px)}
100% { -moz-transform: translateX(0px); transform: translateX(0px)}
}
@-o-keyframes shift {
0% { -o-transform: translateX(0px); transform: translateX(0px) }
25% { -o-transform: translateX(12px); transform: translateX(12px)}
75% { -o-transform: translateX(-12px); transform: translateX(-12px)}
100% { -o-transform: translateX(0px); transform: translateX(0px)}
}
div.addFeWo > div.ocToggle:hover,
div.addFeWo.open > div.ocToggle { animation-name:none; animation-duration:0s; animation-iteration-count:0; }
div.addFeWo > div.addFeWoForm { display:none; }
div.addFeWo.open > div.addFeWoForm { display:block; }
div.addFeWoForm { width:98%; position:relative; float:left; margin:8px 1% 32px 1%; padding:24px; color:rgba(81,81,81,1.00); }
span.descriptions { font-size:92%; margin-bottom:32px; display:block; float:left; width:100%; line-height:1.67em; }
span.descriptions.short { width:80%; margin-left:10%; text-align:justify;}
form.newFewo {
background-color: rgba(255,251,216,1.00);
display:block; position:relative;
float:left; width:80% !important;
margin: 20px 10% 36px 10% !important; }
form.newFewo > label { text-align:left !important; }
div.addFeWoForm > a.button.new { float:right; width:auto; font-size:140%; }
/* //////////////////////////////// ADMIN MY FEWO ////////////////////////////////// */
div.imageArea { background:rgba(0,0,0,0.20); margin-bottom:64px; height:360px;}
/* Upload Area */
div.imgadd { background:rgba(0,0,0,0.67) !important; display:block; float:right; min-width:224px; width:25%; height:360px; position:relative; text-align:center; padding-top:12px; overflow:hidden !important} /* Dropzone */
div.imgadd p { display:block; margin-left:20px; width:185px; text-align:justify; color:rgba(255,255,255,1.00); }
div.imageOverview { display:block; position:relative; background: rgba(213,213,213,1.00); float:right; width:75%; min-height:360px; }
div.imageOverview div.imgEdit { display:inline-block; position:relative; margin:16px 16px; text-align:left; float:left; height:148px; background:rgba(255,255,255,1.00); padding: 1% 1.2%;}
div.imageOverview div.imgEdit img { max-width:150px; max-height:100px; }
div.imageOverview div.imgEdit a { display:block; position:absolute; background:rgba(255,0,4,1.00); padding:3px 12px; width:100%; color:rgba(255,255,255,1.00); text-align:center; bottom:0px; left:0px;}
@media only screen and (max-width : 1600px) {
html { font-size:0.890em; }
nav { background-position:80px; }
.container { max-width:1260px; }
header div.parallaxImage div.buttonBar { margin-top: 56px; }
header div.parallaxImage div.buttonBar a.button { padding:28px 0px 0px 0px !important; font-size:70%; }
header div.parallaxImage div.buttonBar a.button.fewo { -webkit-border-radius: 20px 0 20px 0; border-radius: 20px 0 20px 0; }
header div.parallaxImage div.buttonBar a.button:hover { padding:24px 0px 12px 0px !important; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext { margin-top:-20px; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext p { font-size:58%; line-height:1.67em;}
header div.parallaxImage div.buttonBar a.button.fewo:hover > div.linktext { margin-top:24px; }
main article > ul.ausstattung {width:33%; padding:1% 1%; margin:0px 1%; }
}
@media only screen and (max-width : 1280px) {
html { font-size:0.860em; }
nav { background-position:58px 2px; background-size:28px; font-size:120%;}
.container { max-width:97%; }
main .container { padding:48px 12px; margin-top:70px; }
main article > ul.ausstattung { padding:1% 0%; margin:0px 1%; font-size:90%; }
main article > ul.ausstattung:nth-child(4) { width:28%; }
main article > ul.ausstattung:nth-child(3) { width:43%; }
main article > a.button { font-size:120%; float:left; width:100% !important; max-width:none !important; margin-top:34px; }
main article.fewosite > h2 { height:auto; background-size:40px; background-position:center top; font-size:180%; padding:48px 0px 0px 0px; text-align:center;}
main article.linkblock > ul { width:42%; }
/* BUCHUNGSDIALOG */
div.datumselect { }
div.kalendernav { } /* Überschrift der Box */
div.kalendernav div.switch { line-height:32px; font-size:20px; }
div.kalenderhead { width:72%; margin:-35px 14% 2px 14%; font-size:110%; padding:6px 0 9px 0; }
/* Container für Kästchen */
div.kalenderbox { height:280px}
/* Kästchen */
div.kalenderday{width:12%; height:12.5%; margin:1% 1%; font-size:16px; line-height:32px; }
/* gesamt pos oben -> Kästchen */
div.kalenderday:nth-child(1),div.kalenderday:nth-child(2),div.kalenderday:nth-child(3),div.kalenderday:nth-child(4),div.kalenderday:nth-child(5),div.kalenderday:nth-child(6),div.kalenderday:nth-child(7){margin-top:12%}
/* gesamt pos links -> Kästchen */
div.kalenderday:nth-child(1),div.kalenderday:nth-child(8),div.kalenderday:nth-child(15),div.kalenderday:nth-child(22),div.kalenderday:nth-child(29),div.kalenderday:nth-child(36){margin-left:2%}
/* Bezeichnung der Tage: */
div.kalenderbox:before { height:14%; font-size:1.2em; word-spacing:0.62em; }
/* KalenderDay Style */
/* Heute */
div.kalenderday.today:before { font-size:8px; }
/* Vorgesperrte Tage */
div.kalenderday.booked:hover,
div.kalenderday.locked:hover { background-size:100%; }
/* Felder neben Kalender */
div.steptwo { width:50%; }
div.checkin,
div.kundeninfo { display:inline-block; float:left; position:relative; padding:4px; margin-top:24px; min-height:360px; }
div.checkin { width:70%; }
div.kundeninfo { width:30%; font-size:70%; padding-top:64px;}
div.checkin > button { bottom:2px; width:98%; left:1%; font-size:22px; padding:4px 0px 4px 0px; line-height:24px;}
div.checkin table { padding:8px 0; }
div.checkin table tr { width:98%; padding:4px 8px; margin:2px 1%; position:relative}
div.checkin table tr td { font-size:18px; height:28px; }
div.checkin table tr:nth-child(2) td,
div.checkin table tr:nth-child(4) td { font-size:14px; }
div.checkin table tr td:nth-child(1) { width:47%; }
div.checkin table tr td:nth-child(2) { width:51%; background: rgba(244,255,225,1.00) }
div.checkin table tr td input[type='number'] { width:100%; height:28px; font-weight:300; font-size:20px; background:rgba(159,216,123,1.00); }
/* Nach Weiter Click */
div.personendaten { width:100%; margin-top:18px; padding:20px 1%; }
div.personendaten button.verwerfen { width:100%; }
div.personendaten ul { padding:16px; width:40%; font-size:110%; margin-left:0%; }
div.personendaten ul h3 { margin-bottom:10px; }
div.personendaten ul li { display:block; padding-top:20px; padding-bottom:8px; }
div.personendaten ul li span { font-size:110%; }
div.personendaten ul li span output { margin:0px 4px; }
div.personendaten ul li:nth-child(6) { font-size:90%; }
div.datainputs { width:56%; margin:2% 0 0 2%; -webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.25); box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.25); }
div.datainputs label { font-size:14px !important }
div.datainputs .button.speichern { font-size:12px !important }
}
@media
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1),
only screen and (max-width : 1040px) {
html { font-size:0.800em; }
nav { font-size:110%; }
.container { max-width:99%; }
header div.parallaxImage { padding-top:19vh; }
/* //////////////////////////////// NEUE FEWO ERSTELLEN /////////////////////////////////// */
span.descriptions.short { width:95%; margin-left:2.5%; }
form.newFewo { width:95% !important; margin: 20px 2.5% 36px 2.5% !important; }
div.addFeWoForm > a.button.new { font-size:120%; }
}
@media only screen and (max-width : 960px) {
nav { font-size:110%; }
nav .container ul li a { padding:56px 12px 18px 12px; }
nav.slim .container ul li a { padding:20px 10px 18px 10px; }
main .container { padding:48px 8px; }
div.addFeWo > div.ocToggle { background-size:64px; }
/* BUCHUNGSDIALOG */
div.datumselect { }
div.kalendernav { font-size:14px; height:72px;} /* Überschrift der Box */
div.kalendernav div.switch { line-height:24px; font-size:17px; margin-top:49px }
div.kalenderhead { width:68%; margin:-28px 16% 2px 16%; font-size:100%; padding:4px 0 5px 0; }
/* Container für Kästchen */
div.kalenderbox { height:210px}
/* Kästchen */
div.kalenderday {width:12%; height:12.5%; margin:1% 1%; font-size:13px; line-height:24px; }
/* gesamt pos oben -> Kästchen */
div.kalenderday:nth-child(1),div.kalenderday:nth-child(2),div.kalenderday:nth-child(3),div.kalenderday:nth-child(4),div.kalenderday:nth-child(5),div.kalenderday:nth-child(6),div.kalenderday:nth-child(7){margin-top:18%}
/* Bezeichnung der Tage: */
div.kalenderbox:before { height:14%; font-size:1em; word-spacing:0.52em; }
/* Heute */
div.kalenderday.today:before { font-size:4px; }
/* Felder neben Kalender */
div.checkin,
div.kundeninfo { min-height:370px; }
div.checkin { width:70%; }
div.kundeninfo { width:30%; font-size:70%; padding-top:48px;}
div.checkin > button { bottom:0px; }
div.checkin table { padding:0px 0; }
div.checkin table tr { width:98%; padding:4px 2px; margin:1px 0.5%;}
div.checkin table tr td { font-size:15px; height:28px; }
div.checkin table tr:nth-child(2) td,
div.checkin table tr:nth-child(4) td { font-size:11px; }
div.checkin table tr td input[type='number'] { font-size:15px; }
/* //////////////////////////////// ADMIN MY FEWO ////////////////////////////////// */
div.imageArea { height:auto;}
/* Upload Area */
div.imgadd { background:rgba(0,0,0,0.33) !important; width:100%; height:250px; } /* Dropzone */
div.imgadd p { display:block; margin-left:20px; width:320px; font-size:120%; }
div.imageOverview { width:100%; min-height:240px; }
}
/* FULL MOBILE */
@media
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1),
only screen and (max-width : 765px) {
html { font-size:0.860em; }
nav { background-size:0px; }
/* Effekte entfernen */
nav .container ul li a:after { display:none; height:0px; background:none; copacity:0; margin-top:0px;}
nav .container ul li a:hover:after { opacity:0; }
nav .container ul li a.actual:after { opacity:0; }
header div.parallaxImage { padding-top:14vh; }
footer, footer .container a { font-size:80%; }
main .container { padding:0px 8px; margin-top:48px;}
/* Blog Seite bzw. Ferienwohnungen */
main article img.articlebild,
main article h2,
main article p { width:100% !important; max-width:none !important; float:left;}
main article img.articlebild { margin-bottom:24px; }
main > div.container > h2 { font-size:165%; }
/* Startseit : News ausblenden, etc. */
main section { width:100%; margin:36px 0px 36px 0px; float:left; position:relative; }
main div.aside { width:100%; margin:36px 0px 36px 0px; float:left; position:relative; display:none !important; }
main article.left70 { margin-top: 36px; width: 100%; text-align:left !important;}
main article.left70 img { max-width:480px !important; margin:0 auto 32px auto; float:none !important;}
main article > ul.ausstattung { padding:1% 0%; margin:0px 1%; font-size:100%; text-align:left !important;}
main article > ul.ausstattung:nth-child(4) { width:48%; }
main article > ul.ausstattung:nth-child(3) { width:48%; }
main article.special > img.paymentmethod,
main article.special > a.buchen { width:50%; position:relative; }
main article.special > img.paymentmethod { max-height:48px; }
main article.special > a.buchen { float:left; }
main article.fewosite > p { width:70% !important; float:right; }
main article.fewosite div.contactbox { width:72% !important; float:right; }
main article.fewosite div.contactbox a.button { font-size:12px !important; }
main article.fewosite div.imageblock h3 { font-size:10px; font-weight:300; }
main article.linkblock > ul { width:95%; margin-left:5%;}
main article.linkblock > ul > li > a { font-size:100%;}
/* Standort */
main article.standort > figure { width:100%; }
main article.standort > figure > div#googleMapFrame { height:320px !important;}
main article.standort > p { float:left; width:96%; margin-top:24px; margin-left:2.5%; }
/* BUCHUNGSDIALOG */
div.datumselect { margin: 1%; width: 48%; }
div.kalendernav { font-size:20px; } /* Überschrift der Box */
div.kalendernav div.switch { line-height:48px; font-size:27px; }
div.kalenderhead { width:72%; margin:-52px 14% 7px 14%; font-size:110%; padding:14px 0 15px 0; }
/* Container für Kästchen */
div.kalenderbox { height:320px; }
/* Kästchen */
div.kalenderday{width:12%; height:12.5%; margin:1% 1%; font-size:16px; line-height:32px; }
/* gesamt pos oben -> Kästchen */
div.kalenderday:nth-child(1),div.kalenderday:nth-child(2),div.kalenderday:nth-child(3),div.kalenderday:nth-child(4),div.kalenderday:nth-child(5),div.kalenderday:nth-child(6),div.kalenderday:nth-child(7){margin-top:12%}
/* gesamt pos links -> Kästchen */
div.kalenderday:nth-child(1),div.kalenderday:nth-child(8),div.kalenderday:nth-child(15),div.kalenderday:nth-child(22),div.kalenderday:nth-child(29),div.kalenderday:nth-child(36){margin-left:2%}
/* Bezeichnung der Tage: */
div.kalenderbox:before { height:14%; font-size:1.2em; word-spacing:0.6em; text-align:center !important}
/* Felder neben Kalender */
div.steptwo { width:100%; }
div.checkin,
div.kundeninfo { display:inline-block; float:left; position:relative; padding:4px; margin-top:24px; min-height:390px; }
div.checkin { width:60%; }
div.kundeninfo { width:40%; font-size:90%; padding-top:32px;}
div.checkin > button { bottom:2px; width:98%; left:1%; font-size:22px; padding:4px 0px 4px 0px; line-height:24px;}
div.checkin table { padding:8px 0; }
div.checkin table tr { width:98%; padding:4px 8px; margin:2px 1%; position:relative}
div.checkin table tr td { font-size:18px; height:28px; }
div.checkin table tr:nth-child(2) td,
div.checkin table tr:nth-child(4) td { font-size:14px; }
div.checkin table tr td:nth-child(1) { width:47%; }
div.checkin table tr td:nth-child(2) { width:51%; background: rgba(244,255,225,1.00) }
div.checkin table tr td input[type='number'] { width:100%; height:28px; font-weight:300; font-size:20px; background:rgba(159,216,123,1.00); }
/* Nach Weiter Click */
div.personendaten { width:100%; margin-top:18px; padding:20px 1%; }
div.personendaten button.verwerfen { width:50%; }
div.personendaten ul { padding:16px; width:100%; font-size:110%; margin-left:0%; }
div.personendaten ul h3 { margin-bottom:10px; }
div.personendaten ul li { display:block; padding-top:20px; padding-bottom:8px; }
div.personendaten ul li span { font-size:110%; }
div.personendaten ul li span output { margin:0px 4px; }
div.personendaten ul li:nth-child(6) { font-size:90%; }
div.datainputs { width:96%; margin:2% 0 0 2%; -webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.25); box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.25); }
div.datainputs label { font-size:14px !important }
div.datainputs .button.speichern { font-size:20px !important }
}
@media only screen and (max-width : 720px) {
/* WELCOME IMAGE BOX HOME-SITE */
header div.parallaxImage { font-size:210%; padding-top:12vh; }
header div.parallaxImage div.buttonBar { margin-top: 36px; }
header div.parallaxImage div.buttonBar a.button { width:31%; font-size:70%; padding:14px 0px 0px 0px !important;
min-width: 64px !important;}
header div.parallaxImage div.buttonBar a.button:first-child { margin-left:2.5%; }
header div.parallaxImage div.buttonBar a.button:nth-child(2) { margin-left:1%; }
header div.parallaxImage div.buttonBar a.button:nth-child(3) { margin-left:1%; }
header div.parallaxImage div.buttonBar a.button.fewo { -webkit-border-radius: 13px 0 13px 0; border-radius: 13px 0 13px 0; }
header div.parallaxImage div.buttonBar a.button:hover { padding:14px 0px 12px 0px !important; -webkit-border-radius: 13px 0 0 0; border-radius: 13px 0 0 0; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext { width:90%; margin-top:-12px; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext p { font-size:60%; }
header div.parallaxImage div.buttonBar a.button.fewo:hover > div.linktext { margin-top:20px; }
}
@media only screen and (max-width : 520px) {
/* WELCOME IMAGE BOX HOME-SITE */
header div.parallaxImage { font-size:177%; padding-top:10vh; }
header div.parallaxImage h2 { font-size:160%; }
header div.parallaxImage h2 small { font-size:55%; }
header div.parallaxImage div.buttonBar { margin-top: 36px; }
header div.parallaxImage div.buttonBar a.button { width:31%; font-size:70%; padding:14px 0px 0px 0px !important;
min-width: 64px !important;}
header div.parallaxImage div.buttonBar a.button:first-child { margin-left:2.5%; }
header div.parallaxImage div.buttonBar a.button:nth-child(2) { margin-left:1%; }
header div.parallaxImage div.buttonBar a.button:nth-child(3) { margin-left:1%; }
header div.parallaxImage div.buttonBar a.button.fewo { -webkit-border-radius: 13px 0 13px 0; border-radius: 13px 0 13px 0; }
header div.parallaxImage div.buttonBar a.button:hover { padding:14px 0px 12px 0px !important; -webkit-border-radius: 13px 0 0 0; border-radius: 13px 0 0 0; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext { width:90%; margin-top:-12px; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext p { font-size:60%; }
header div.parallaxImage div.buttonBar a.button.fewo:hover > div.linktext { margin-top:20px; }
main article > ul.ausstattung:nth-child(4) { width:98%; }
main article > ul.ausstattung:nth-child(3) { width:98%; }
main article.standort > figure { width:0%; display:none !important; }
main article.standort > figure > div#googleMapFrame { height:0px !important; width:0%; display:none !important; }
/* BUCHUNGSDIALOG */
div.datumselect { margin:0%; width:100%; }
div.kalendernav { font-size:27px; } /* Überschrift der Box */
/* Bezeichnung der Tage: */
div.kalenderbox:before { height:14%; font-size:1.4em; word-spacing:0.9em; text-align:center !important}
/* Felder neben Kalender */
div.checkin { width:100%; }
div.kundeninfo { width:100%; }
}
/* iPhone 5 */
@media
only screen and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait),
only screen and (max-width : 389px) {
/* WELCOME IMAGE BOX HOME-SITE */
header div.parallaxImage { font-size:150%; padding-top:10vh; }
header div.parallaxImage h2 { font-size:180%; }
header div.parallaxImage h2 small { font-size:50%; }
header div.parallaxImage div.buttonBar { margin-top: 24px; }
header div.parallaxImage div.buttonBar a.button.fewo { -webkit-border-radius: 9px 0 9px 0; border-radius: 9px 0 9px 0; }
header div.parallaxImage div.buttonBar a.button:hover { -webkit-border-radius: 9px 0 0 0; border-radius: 9px 0 0 0; }
header div.parallaxImage div.buttonBar a.button.fewo > div.linktext p { font-size:55%; }
}