body { background: #eeeeee; background-image: url("bground.jpg"); }
a, a:hover, a:focus { text-decoration: none; } 
#page { width: 780px; height: 500px; margin: 30px auto 0 auto; }
@media only screen and (max-width: 768px) {  }

.left { width: 100%; text-align: left; }
.middle { width: 100%; padding-top: 30px; padding-bottom: 30px; text-align: center; }
.right { width: 100%; text-align: right; }

.txt { padding-top: 30px; font-size: 24px; font-family: sans-serif, arial, helvetica; text-align: center; line-height: 30px; }
.logo { text-align: center; padding: 30px; }


@media only screen and (max-width: 768px)
{
  #page { width: 96%; height: 60%; margin: 10px auto 0 auto; }
  .left { width: 98%; text-align: left; }
  .middle { width: 98%; padding-top: 30px; padding-bottom: 30px; text-align: center; }
  .right { width: 98%; text-align: right; }
  .txt { padding-top: 10px; font-size: 18px; line-height: 1.2; }
  .logo { padding: 10px; }
}

@media only screen and (max-width: 480px)
{
  #page { width: 96%; height: 60%; margin: 10px auto 0 auto; }
  .left > img { width: 96%; height: auto; }
  .middle > img { width: 96%; height: auto; }
  .right > img { width: 96%; height: auto; }

  .txt { padding-top: 10px; font-size: 16px; font-weight: bold; line-height: 1.2; }
  .logo { padding: 10px; }
}

.footer-block { position: absolute; width: 98%; margin: auto; bottom: 0; border-top: 2px solid #222222; padding-bottom: 10px; }
@media only screen and (max-width: 768px) { .footer-block { width: 96%; margin: auto; font-weight: bold; } }
@media only screen and (max-width: 480px) { .footer-block { position: relative; padding-top: 5px; font-size: 0.75em; } }

.footer-copyright { width: 56%; padding-left: 20px; margin: auto; color: #222222; float: left; }
.footer-recht { width: 40%; margin: auto; color: #222222; float: left; }
@media only screen and (max-width: 768px) { .footer-copyright { padding-left: 5px; margin: auto; }  }
@media only screen and (max-width: 480px) { .footer-copyright { padding-left: 5px; margin: auto; }  }