@charset "UTF-8";

/* ------------------------------------------
  RESET
--------------------------------------------- */

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}


body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-style: normal;
}

body a {
  color: inherit;
  text-decoration: none;
}

div, p {box-sizing: border-box;}

/* Elemente ***************************/

  #video {
    width: 100%;
    height: auto;
  }

  .image {
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }


/* Grid & Layout ***************************/

  .pageWrapper {
    width: 100%;
    text-align: center;

  }
  .section {
    display: block;
    overflow: hidden;
  }

  .sectionContent {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1170px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    clear: both;
  }

  @media screen and (max-width: 768px) {
    .sectionContent {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  .span1,.span2,.span3,.span4,.span5,.span6,
  .span7,.span8,.span9,.span10,.span11,.span12 {
    display: inline-block;
    float: left;
  }


@media screen and (min-width: 769px) {

  .span1 {width: 8.333%;}
  .span2 {width: 16.666%;}
  .span3 {width: 25%;}
  .span4 {width: 33.333%;}
  .span5 {width: 41.666%;}
  .span6 {width: 50%;}
  .span7 {width: 58.333%;}
  .span8 {width: 66.666%;}
  .span9 {width: 75%;}
  .span10 {width: 83.333%;}
  .span11 {width: 91.663%;}
  .span12 {width: 100%;}

  .offset1 {margin-left: 8.333%;}
  .offset2 {margin-left: 16.666%;}
  .offset3 {margin-left: 25%;}
  .offset4 {margin-left: 33.333%;}
  .offset5 {margin-left: 41.666%;}
  .offset6 {margin-left: 50%;}
  .offset7 {margin-left: 58.333%;}
  .offset8 {margin-left: 66.666%;}
  .offset9 {margin-left: 75%;}
  .offset10 {margin-left: 83.333%;}
  .offset11 {margin-left: 91.663%;}
}

@media screen and (max-width: 768px) {

  .span1, .span2, .span3, .span4 {width: 50%;}
  .span5, .span6,.span7, .span8, .span9, .span10, .span11.span12 {width: 100%;}

  .offset1, .offset2, .offset3, .offset4, .offset5, .offset6, .offset7, .offset8, .offset9, .offset10, .offset11 {margin-left: 0;}

}



/* Typo ***************************/

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Droid Serif', serif;
    color: #000000;
    font-weight: normal;
    margin: 0;
    padding: 0;
  }

  p, li {font-size: 1.3rem;}
  h1 {font-size: 4.5rem; margin-bottom: 2rem;}

  .typoWhite h1, .typoWhite p {color: #fff;}


  @media screen and (max-width: 768px) {
    p, li {font-size: 1.1rem;}
    h1 {font-size: 2.3rem; margin-bottom: 1rem;}
  }


/* Styling ***************************/

/* Header */

  #header {background: #eccb5a;}

  #header .sectionContent {padding: 1rem 2rem 9rem 2rem; clear: both;}

  @media screen and (max-width: 768px) {
    #header .sectionContent {padding: 0.7rem 1rem 5.3rem 1rem;}
  }

  #logo {float: left; max-width: 180px; }

  @media screen and (max-width: 768px) {
     #logo {width: 35%;}
  }

  #header nav {
    margin-top: 3rem;
  }

@media screen and (max-width: 768px) {
 #header nav {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Intro */

#intro {background: url("../images/bg_intro.jpg"); background-size: cover; background-position: center center; min-height: 28rem;}

#intro h1 {
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
  margin-top: 5rem;
}

  @media screen and (max-width: 768px) {

    #intro {background: url("../images/bg_intro_mobile.jpg"); background-size: cover; background-position: bottom center; min-height: 28rem;}

    #intro h1 {
      margin-top: 1rem;
    }
  }

/* naturheilkunde*/

  #naturheilkunde {background: #eccb5a; padding-top: 3rem;}

  #naturheilkunde p {
    margin-bottom: 2rem;
  }
  
  #logosVerbaende {
    width: 100%;
    max-width: 183px;
  }

   #logosVerbaendeMobile {
    width: 100%;
    max-width: 380px;
  }


  #naturheilkunde .span3 {padding-right: 1rem;}

  @media screen and (max-width: 768px) {
     #naturheilkunde {padding-top: 1.5rem;}

     #naturheilkunde .span3, #naturheilkunde .span4, #naturheilkunde .span6 {width: 100%;}
  }

/* Leistungen */

  #leistungen {
    background: #cee4e4;
    padding-top: 4rem;
  }
  
  #leistungen ul {
    list-style: none;
    padding: 0;
  }

  #leistungen li {
    margin-bottom: 0.75rem;
  }

  #dekoLeistungen img {
    height: auto;
  }


  @media screen and (max-width: 768px) {

      #leistungen {
      padding-top: 2rem;
    }
  }


/* Hundepensionen */

  @media screen and (min-width: 769px) {


    #hundepension {background: url("../images/bg_tierpension.jpg"); background-size: cover; background-position: top center;}

    #hundepensionContent {
      opacity: 0.9;
      background-color: #a19438;
      padding: 3%;
      margin-top: 8%;
      margin-bottom: 8%;
    }
  }

  @media screen and (max-width: 768px) {

    #hundepension {
      background: #a19438;
      padding-top: 2em;
    }

    #hundepensionContent {
      opacity: 1;
      background-color: #a19438;
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
      padding-bottom: 2rem;

    }

    #impressionenPension .span4 {width: 100%;}
  }

/* Unterwasserlaufband */

  #uwl {
    background: url("../images/bg_uwl.png"), #c9c497;
  }

  #uwl .sectionContent {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  @media screen and (max-width: 768px) {
    #uwl .sectionContent {
      padding-top: 2rem;
      padding-bottom: 1rem;
    }
  }



/* Aktuelles */

  #aktuelles {
    background: #f0ccc0;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  #aktuelles h1 {text-align: center;}

  .eintragAktuelles img, .eintragAktuelles div {width: 50%; float: left; display: inline-block;}

  .eintragAktuelles div {padding-left: 2rem;}

.eintragAktuelles h1, 
.eintragAktuelles h2, 
.eintragAktuelles h3, 
.eintragAktuelles h4, 
.eintragAktuelles h5, 
.eintragAktuelles h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.eintragAktuelles h2 {
  font-size: 29px;
  margin-bottom: 10px;
  line-height: 32px;
}

  @media screen and (max-width: 768px) {
    #aktuelles {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
    .eintragAktuelles img, .eintragAktuelles div {width: 100%; float: left; display: inline-block; margin-bottom: 1rem;}

    .eintragAktuelles div {width: 100%; padding-left: 0;}
  }


/* Anfahrt */

#anfahrt {width: 100%;}

#mapWrapper {height: 40rem;}
#anfahrtImage {height: 40rem; background: url("../images/eingang.jpg"); background-size: cover; background-position: center center;}

  @media screen and (max-width: 768px) {
    #mapWrapper {height: 25rem;}
    #anfahrtImage {height: 30rem;}
    #anfahrt .span4 {width: 100%;}
  }

#map {height: 100%; width: 100%;}




/* Helpers */

@media screen and (max-width: 768px) {
  .hiddenMobile {display: none !important;}
}
@media screen and (min-width: 769px) {
  .hiddenDesktop {display: none !important;}
}

/* Footer */

#footer {background: #fff; height: 3rem; text-align: center; padding-top: 1rem; margin-bottom: 1rem;}

#footer, #footer a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: rgba(0,0,0,0.3);
  text-decoration: none;
  transition: color 0.5s;
}

#footer a:hover {
  color: rgba(0,0,0,1);
}

/* Impressum */

#impressum, #datenschutz {
  background: #c7dbd2;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-size: 2rem;
}

#impressum button, #datenschutz button {
  background-image: url(../images/close.svg);
  background-color: transparent !important;
  background-repeat: no-repeat;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  width: 40px;
  height: 40px;
  top: 0;
  float: right;
  padding: 0;
  z-index: 999;
}

#impressum h1,
#datenschutz h1 
{padding-left: 2rem;}

#impressum h4,
#datenschutz h4 {
  font-size: 1.5rem;
  white-space: pre-wrap;
}

.impressumLeft {
  width: 25%;
  float: left;
  text-align: left;
  padding-left: 2rem;
  padding-right: 2rem;
}

.impressumRight {
  width: 75%;
  float: left;
  text-align: left;
  padding-right: 2rem;
}

.impressumRight p,
.datenschutzLeft p {
  font-size: 1.1rem;
  white-space: pre-wrap;
}

.datenschutzLeft {
  width: 100%;
  float: left;
  text-align: left;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media screen and (max-width: 768px) {


  #impressum h1,
  #datenschutz h1 {padding-left: 0rem;}

  .impressumLeft,
  .datenschutzLeft {
    width: 100%;
    float: none;
    text-align: left;
    padding-left: 0rem;
    padding-right: 0rem;
    margin-bottom: 2rem;
  }

  .impressumRight {
    width: 100%;
    float: none;
    text-align: left;
    padding-left: 0rem;
    padding-right: 0rem;
  }
}