html, body {margin:0; padding:0; background:#ffffff; width:100%; font-family:'Raleway',sans-serif; font-size:95%; color:#000000;}

a:link     {color:#000000; text-decoration:none; }
a:visited  {color:#000000; text-decoration:none; }
a:active   {color:#000000; text-decoration:none; }
a:hover    {color:#565656; text-decoration:none; }

img {border:0;}

#seite {width:880px; margin:0 auto;}

#preload {width:0; height:0; display:none;}

h1 {font-size:95%; font-weight:bold;}
h2 {font-size:120%; font-weight:600; color:#6592A7; margin-top:5px;}
h3 {font-size:160%; font-weight:600;}

#mobile_menue {height:0; display:none;}

#header {text-align:center; font-size:90%; letter-spacing:3.5px; line-height:15px;}
#header_lines {position:absolute; top:9px; left:0.5%; height:49px; width:99%; z-index:90; border-top:1px solid #BFBFBF; margin-top:24px; border-bottom:1px solid #BFBFBF;}
#footer_lines {position:relative; bottom:20px; left:0.5%; height:49px; width:99%; z-index:90; border-top:1px solid #BFBFBF; margin-top:24px; border-bottom:1px solid #BFBFBF;}

#logo    {position:relative; width:600px; height:87px; margin-top:14px; z-index:99;}
#logo_SC {max-width:100%;}
#box_dia {height:500px; margin-top:10px; overflow:hidden;}
#dia     {width:880px; height:500px;}
#nav     {margin-top:20px; font-size:100%;}

#menu_01 {background:#ffffff; color:#000000; text-align:center;}
#menu_02 {width:100%; margin-top:12px; background:#aeaeae; color:#ffffff; font-weight:normal; text-align:center; padding:2px 0 2px 0}
#menu_02 a:link, #menu_02 a:visited, #menu_02 a:active {color:#ffffff;}
#menu_02 a.auswahl {color:#000000;}

#hinaufrutschen {margin-top:-31px;}

#main    {width:880px; margin-top:60px; text-align:justify;}
.preis_eintrag_links   {width:46%; padding:10px; border-radius:5px; background:#ededed; float:left;  text-align:left;}
.preis_eintrag_rechts  {width:46%; padding:10px; border-radius:5px; background:#ededed; float:right; text-align:left;}
.preis_trenner {clear:both; height:20px;}
.preis_linie {border:0; width:90%; color:#6592A7; background-color: #6592A7; height:2px; margin:30px auto;}
#subtext {margin-top:60px; text-align:center;}
#social_trenner {border:1px solid #BFBFBF; width:100%; height:16px; border-radius:5px;}
#emblem  {width:150px; height:81px;}

.foto_galerie {margin-top:20px; margin-bottom:20px; max-width:100%;}
.foto_galerie_quer {margin-top:20px; margin-bottom:20px; max-width:60%;}
.foto_galerie_hoch {margin-top:20px; margin-bottom:20px; max-width:45%;}

/* Kontakt-Seite */
#vier_spalten {width:880px;}
#vier_01 {width:180px; height:270px; padding:10px; margin:12px; float:left; border:1px solid #aeaeae; border-radius:5px; margin-left:0;}
#vier_02 {width:180px; height:270px; padding:10px; margin:12px; float:left; border:1px solid #aeaeae; border-radius:5px; }
#vier_03 {width:180px; height:270px; padding:10px; margin:12px; float:left; border:1px solid #aeaeae; border-radius:5px; }
#vier_04 {width:180px; height:270px; padding:10px; margin:12px; float:left; border:1px solid #aeaeae; border-radius:5px; margin-right:0;}
#vier_03 textarea {height:110px;}
.clear {clear: both;}

/* Felder bei Kontakt*/
#form_1, #form_2, #form_3, #form_4 {font-size:100%; width:96%; }

/* Teergrube */
#texter  {height:0; margin:0; padding:0; visibility:hidden;}

/* Buchungsanfrage */
#buchung {width:880px;}
#buchung_01 {width:360px; margin:auto;}
#buchung_02 {width:360px; margin:auto; margin-top:20px;}
#buchung_02 textarea {width:350px;}
#buchung_03 {width:360px; margin:auto; margin-top:20px;}

#boxen  {width:880px; margin-top:40px;}
#box_01 {overflow:hidden; float:left;}
#box_02 {margin-left:20px; overflow:hidden; float:left;}
#box_03 {margin-left:20px; overflow:hidden; float:left;}

#box_01, #box_02, #box_03 {width:260px; padding:10px; border-radius:5px; background:#aeaeae;
color:#ffffff; text-align:justify; font-size:100%;}

#box_01 a:link, #box_02 a:link, #box_03 a:link, #box_01 a:visited, #box_02 a:visited, #box_03 a:visited, #box_01 a:active, #box_02 a:active, #box_03 a:active { color:#ffffff; font-weight:bold; }

.ueberschrift {font-weight:bold; margin-bottom:10px; font-size:100%;}

#unten {margin-top:40px; margin-bottom:50px; text-align:left; font-size:80%;}
#social_media {width:880px;}
.soc_media_feld {background:#ffffff; padding:8px; border:1px solid #cccccc; border-radius:3px; min-height:245px; color:#000000;}
#soc_01 {width:260px; padding:10px; text-align:center; margin:8px; float:left; margin-left:0;}
#soc_02 {width:260px; padding:10px; text-align:center; margin:8px; float:left;}
#soc_03 {width:260px; padding:10px; text-align:center; margin:8px; float:left; margin-right:0;}
#fb_logo {width:30px;}
.kontrast {margin:2px; border:2px solid #000000;}

/* Preis-Rechner */
.rahmen  {border:1px solid #000000; border-radius:3px;}
.nein    {background-color: #ff8888; border-radius:10px; width:20px; height:20px; vertical-align:middle;}
.ja      {background-color: #88cc88; border-radius:10px; width:20px; height:20px; vertical-align:middle;}
.termin  {background-color: #5599dd; border-radius:10px; width:20px; height:20px; vertical-align:middle;}
.preis   {text-align:right; min-width:70px;}
.links   {text-align:left;}
.rechts  {text-align:right;}
.mitte   {text-align:center;}
.mitte_2 {text-align:center; font-size:75%;}
.plus    {}
.minus   {}
.km_wert {width:100px;}
.but_min {width:35px; font-size:12px;}
small    {font-weight:normal;}

/*-------------------- RESPONSIVE DESIGN 960 --------------------*/
@media only screen and (max-width: 960px) {
#seite {width:660px;}
#logo    {width:450px; height:65px;}
#box_dia {height:375px;}
#dia     {width:660px; height:375px;}
.foto_galerie {width:660px; height:375px;}

#main    {width:660px;}
.preis_eintrag_links   {width:44%; border-radius:4px;}
.preis_eintrag_rechts  {width:44%; border-radius:4px;}

#boxen   {width:660px; height:210px;}
#box_02 {margin-left:15px;}
#box_03 {margin-left:15px;}
#box_01, #box_02, #box_03 {width:180px; padding:14px; border-radius:4px; font-size:100%;}
.ueberschrift {font-size:90%;}

#vier_spalten {width:660px;}
#vier_01 {width:140px; height:220px; padding:7px; margin:6px; font-size:90%; margin-left:0;}
#vier_02 {width:140px; height:220px; padding:7px; margin:6px; font-size:90%;}
#vier_03 {width:140px; height:220px; padding:7px; margin:6px; font-size:90%;}
#vier_04 {width:140px; height:220px; padding:7px; margin:6px; font-size:90%; margin-right:0;}
#vier_03 textarea {height:110px;}
#qr_code {width:130px;}
#form_1, #form_2, #form_3, #form_4 {font-size:90%;}
#buchung {width:660px;}
#social_media {width:300px;}
}

/*-------------------- RESPONSIVE DESIGN 750 --------------------*/
@media only screen and (max-width: 750px) {
#seite {width:500px;}
#box_dia {height:284px;}
#dia     {width:500px; height:284px;}
.foto_galerie {width:500px; height:284px;}

#menu {font-size:90%; letter-spacing:-0.7px; margin-left:-256px;}
.topmenu a {width:60px;}
.submenu a {width:60px;}

#main    {width:500px;}
.preis_eintrag_links   {width:auto; float:none; }
.preis_eintrag_rechts  {width:auto; float:none; margin-top:20px;}

#boxen   {width:500px; height:440px;}
#box_01 {margin:0;}
#box_02 {margin:0; margin-top:10px;}
#box_03 {margin:0; margin-top:10px;}
#box_01, #box_02, #box_03 {width:480px; height:120px; padding:10px; border-radius:4px; font-size:100%; clear:both;}
.ueberschrift {font-size:90%;}

#vier_spalten {width:500px;}
#vier_01 {width:220px; height:220px; padding:7px; margin:12px; font-size:100%; margin-left:0;}
#vier_02 {width:220px; height:220px; padding:7px; margin:12px; font-size:100%; margin-right:0;}
#vier_03 {width:220px; height:220px; padding:7px; margin:12px; font-size:100%; margin-left:0;}
#vier_04 {width:220px; height:220px; padding:7px; margin:12px; font-size:100%; margin-right:0;}
#buchung {width:500px;}
}

/*-------------------- RESPONSIVE DESIGN 650 --------------------*/
@media only screen and (max-width: 650px) {
.rahmen  {font-size: 75%;}
#logo    {width:350px; height:51px;}
}

/*-------------------- RESPONSIVE DESIGN 570 --------------------*/
@media only screen and (max-width: 570px) {
html, body {font-size:100%;}

#seite {width:400px;}
h1 {font-size:100%;}

#box_dia {height:227px;}
#dia     {width:400px; height:227px;}
.foto_galerie {width:400px; height:227px;}

#menu {margin-left:-204px;}
.topmenu a {width:45px;}
.submenu a {width:45px;}

#main    {width:400px;}

#boxen   {width:400px; height:360px;}
#box_01, #box_02, #box_03 {width:380px; height:120px; font-size:100%; clear:both;}
.ueberschrift {font-size:90%;}

#vier_spalten {width:400px;}
#vier_01 {width:170px; height:220px; padding:8px; margin:10px; font-size:100%; margin-left:0;}
#vier_02 {width:170px; height:220px; padding:8px; margin:10px; font-size:100%; margin-right:0;}
#vier_03 {width:170px; height:220px; padding:8px; margin:10px; font-size:100%; margin-left:0;}
#vier_04 {width:170px; height:220px; padding:8px; margin:10px; font-size:100%; margin-right:0;}
#buchung {width:400px;}
}

/*-------------------- RESPONSIVE DESIGN 440 --------------------*/
@media only screen and (max-width: 440px) {
#seite {width:300px;}
h1 {font-size:100%;}
#logo    {width:280px; height:41px;}
#header {margin-top:10px;}
#header_lines {top:19px;}


#box_dia {height:170px;}
#dia     {width:300px; height:170px;}
.foto_galerie {width:300px; height:170px; margin-top:8px; margin-bottom:8px;}

#mobile_menue {position:absolute; top:0; left:0; display:inline; z-index:100; margin:0; padding:0; }
#burger {background:#dddddd; padding:5px; font-size:100%;}
#burger_icon {height:12px;}
#mobi_men {margin:0; padding:14px; padding-left:20px; padding-top:4px; text-align:left;}
.trenner {width:99%; margin:2px; border-top:1px dotted #666666;}
#nav {display:none;}

#main    {width:300px; margin-top:20px; text-align:justify;}
#boxen   {width:300px; height:500px; margin-top:20px;}
#box_01, #box_02, #box_03 {width:280px; height:140px; text-align:justify;}
.ueberschrift {font-size:90%; text-align:center;}

#vier_spalten {width:300px;}
#vier_01 {width:280px; height:160px; padding:8px; font-size:90%; margin:0;}
#vier_02 {width:280px; height:70px;  padding:8px; font-size:90%; margin:0; margin-top:15px;}
#vier_03 {width:280px; height:180px; padding:8px; font-size:90%; margin:0; margin-top:15px;}
#vier_04 {width:280px; height:120px; padding:8px; font-size:90%; margin:0; margin-top:15px;}
#qr_code {width:100px;}
#vier_03 textarea {height:70px;}
#buchung {width:300px;}
#buchung_01 {width:300px;}
#buchung_02 {width:300px; margin-top:10px;}
#buchung_02 textarea {width:300px;}
#buchung_03 {width:300px; margin-top:10px;}

#subtext, #unten {font-size:80%;}
}