* { outline:none; box-sizing:border-box;  }
html, body, div, span, h1, h2, h3, p, blockquote, a, abbr, address, em, img, strong, ul, li {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display:block; }
ol, ul { list-style:none; }
body              { font-family:CairoliNow-Regular, Arial, sans-serif; font-size:15px; 
                    line-height:1.2; color:#d8353b; 
                    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; 
                    background-color:#fff; position:relative;
                    background-image:url(/img/hg_w.gif), url(/img/hg_bw.gif);
                    background-repeat:no-repeat, repeat-y;
                    background-position:left bottom, 0 0;
                    background-size:100%, 100%; height:100vh;
                  }

nav               { display:block; overflow:hidden; padding-top:6px; }
li                { font-size:1.1rem; float:left; margin-right:.5rem;
                    line-height:1; font-family:CairoliNowCondensed-Medium, Arial, sans-serif; }
li a              { text-decoration:none; color:#d8353b; }
li a:hover        { text-decoration:underline;}

#balken           { background-color:rgba(211, 45, 63, 0.8); 
                    position:fixed; top:20%; transform:translateY(-20%); 
                    width:100%; padding:14px 0 3px; }
#balken div       { background-color:rgba(255, 255, 255, 1); padding:0 20px 0 8px; }
#balken img       { width:220px; max-width:100%; height:auto; padding:6px 0 3px; }
address           { display:block; margin:0 0 1px; padding:0; line-height:.9; font-size:.7rem; color:#d8353b;
                    font-family:CairoliNowCondensed-Medium, Arial, sans-serif; }
address a         { text-decoration:none; color:#d8353b; }
address a:hover   { text-decoration:underline; }
address span      { display:block; }
#email            { margin-bottom:2px; white-space:nowrap; }
#impressum_link,
#impressum_close  { position:fixed; right:3.2%; bottom:30px; display:block;
                    width:16px; height:16px; z-index:10; }
#impressum_link   { background-color:rgba(211, 45, 63, 0.8); border-radius:8px; 
                    border:1px solid rgba(211, 45, 63, 0.8); }
#impressum_close  { width:18px; height:18px; bottom:29px; cursor:pointer; }
#impressum_link:hover { border:3px solid rgba(211, 45, 63, 0.8); background-color:rgba(255, 255, 255, 0.8); }
#impressum  { position:fixed; bottom:20px; right:9px; opacity:0; color:#d8353b;
              z-index:2; width:300px; height:350px; background-color:rgba(211, 45, 63, 0.8);
              font-family:CairoliNow-Regular, Arial, sans-serif; line-height:1.2; font-size:1rem;
              max-width:90vw; max-height:70vh; display:none; }
#impressum.fade-in { display:block; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1;
           animation-timing-function:ease-in; animation-duration:.3s; }
@keyframes fadeInOpacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#impressum div    { background-color:#fff; position:absolute; top:14px; 
                    left:0; right:0; bottom:4px; padding:12px; overflow-y:auto; }
#impressum strong { display:block; margin-bottom:16px; font-family:CairoliNowCondensed-Medium, Arial, sans-serif; font-size:1.5rem; }
#impressum p      { margin-bottom:12px; margin-right:8px; }
#impressum_link.hidden,
#impressum_close.hidden { display:none; }
#impressum p.label { font-size:14px; margin-bottom:3px;font-weight:700; }
#impressum a       { color:#d8353b; text-decoration:underline; }
#impressum a:hover { text-decoration:none; }

/* xs screen, non-retina | 0px - 479px | Bild:480px x 518px */
#hintergrundbild  { background-image:url(/img/hg-sm.jpg);
                    background-repeat:no-repeat;
                    background-position:0 0;
                    background-size:100% auto;
                    width:100%; height:auto; margin-bottom:-20px; }
/* xs screen, retina | Bild: 960px x 1036px */
@media
only screen and (-webkit-min-device-pixel-ratio:2),      
only screen and (   min--moz-device-pixel-ratio:2),      
only screen and (     -o-min-device-pixel-ratio:2/1),    
only screen and (        min-device-pixel-ratio:2),      
only screen and (                min-resolution:192dpi), 
only screen and (                min-resolution:2dppx)  { 
  #hintergrundbild { background-image:url(/img/hg-sm2x.jpg); }
}

@media only screen and (min-width:280px) {
  nav               { position:absolute; right:2.3%; bottom:3.5px; margin-bottom:0; }
  li                { float:left; margin-left:.6rem; margin-right:0; }
}

@media only screen and (min-width:320px) {
  li                { margin-left:.75rem; font-size:1.2rem; }
  address           { margin:0 0 1px;line-height:.9; font-size:.8rem; }
}

@media only screen and (min-width:336px) {
  li                { margin-left:.9rem; }
}

/* sm screen, non-retina | 480px - 767px | Bild: 768px x 829px */
@media only screen and (min-width:480px) {
  #hintergrundbild {  background-image:url(/img/hg-me.jpg);  }
  
  #balken           { top:40%; transform:translateY(-40%);
                      padding:11px 0 4px; }
  #balken img       { width:186px; height:auto; display:inline-block; padding:6px 0 1.5px; }
  #balken div       { padding:0 2.5% 0 2%; line-height:0; }
  nav               { bottom:3px; right:.6rem; }
  li                { margin-left:.4rem; font-size:1.05rem; }
  address           { display:inline-block; font-size:.7rem; margin-left:1rem; line-height:0;
                      position:relative; vertical-align:top; margin-top:18px; }
  #email            { position:absolute; top:-10px }
  #impressum_link,  
  #impressum_close  { right:3.2%; }
  #impressum        { right:1.8%; bottom:19px; }
  #impressum strong { font-size:1.8rem; }
}
@media
only screen and (-webkit-min-device-pixel-ratio:2)      and (min-width:480px),
only screen and (   min--moz-device-pixel-ratio:2)      and (min-width:480px),
only screen and (     -o-min-device-pixel-ratio:2/1)    and (min-width:480px),
only screen and (        min-device-pixel-ratio:2)      and (min-width:480px),
only screen and (                min-resolution:192dpi) and (min-width:480px),
only screen and (                min-resolution:2dppx)  and (min-width:480px) { 

  /* sm screen, retina | Bild: 1536px x 1658px */
  #hintergrundbild {  background-image:url(/img/hg-me2x.jpg);  }


}

@media only screen and (min-width:490px) {
  li                { margin-left:.5rem; font-size:1.1rem; }
}

/* Zwischenschritt 620 - 768px fuer Balken / Logo / Navi */
@media only screen and (min-width:620px) {
  #balken img       { width:210px; padding:6px 0 1.5px; }
  nav               { bottom:2.65px; right:1.1rem; }
  li                { margin-left:1.1rem; font-size:1.3rem; }
  address           { font-size:.8rem; margin-left:2.4rem; margin-top:19px; }
  #email            { top:-11px }
  #impressum_link,  
  #impressum_close  { right:2.4%; }
}

/* me screen, non-retina | 768px - 991px */
@media only screen and (min-width:768px) {
  #hintergrundbild {  background-image:url(/img/hg-lg.jpg);   }

  #balken           { top:39%; transform:translateY(-39%);
                      padding:17px 0 6px; }
  #balken img       { width:280px; padding:8px 0 3px; }
  #balken div       { padding:0 2.5% 0 2%; }
  nav               { bottom:4px; right:1.3rem; }
  li                { margin-left:1.2rem; font-size:1.8rem; }
  address           { font-size:.9rem; margin-left:2.1rem; margin-top:27px; }
  #email            { top:-14px }
  #impressum_link,  
  #impressum_close  { right:2.7%; }
  #impressum        { right:2%; bottom:17px; width:400px; height:280px; }
  #impressum strong { font-size:1.8rem; }
  #impressum p       { float:left; }
  #impressum p.label { width:140px; font-size:1rem; font-weight:400; clear:left; }

}
@media
only screen and (-webkit-min-device-pixel-ratio:2)      and (min-width:768px),
only screen and (   min--moz-device-pixel-ratio:2)      and (min-width:768px),
only screen and (     -o-min-device-pixel-ratio:2/1)    and (min-width:768px),
only screen and (        min-device-pixel-ratio:2)      and (min-width:768px),
only screen and (                min-resolution:192dpi) and (min-width:768px),
only screen and (                min-resolution:2dppx)  and (min-width:768px) { 

  /* me screen, retina */
  #hintergrundbild {  background-image:url(/img/hg-lg2x.jpg); } 
}

@media only screen and (min-width:840px) {
  nav               { right:2.5rem; }
}

/* lg screen, non-retina | 992px - 1199px */
@media only screen and (min-width:992px) {
  #hintergrundbild {  background-image:url(/img/hg-xl.jpg);  }

  #balken           { padding:21px 0 8px; top:50%; transform:translateY(-50%); }
  #balken img       { width:341px; padding:9px 0 3.5px; }
  #balken div       { padding:0 2%; }
  nav               { bottom:6px; right:3rem; }
  li                { margin-left:2rem; font-size:2.2rem; }
  address           { font-size:1.05rem; margin-left:2.6rem;
                      position:relative; vertical-align:top; margin-top:31px; }
  #email            { position:absolute; top:-16px }
}
@media
only screen and (-webkit-min-device-pixel-ratio:2)      and (min-width:992px),
only screen and (   min--moz-device-pixel-ratio:2)      and (min-width:992px),
only screen and (     -o-min-device-pixel-ratio:2/1)    and (min-width:992px),
only screen and (        min-device-pixel-ratio:2)      and (min-width:992px),
only screen and (                min-resolution:192dpi) and (min-width:992px),
only screen and (                min-resolution:2dppx)  and (min-width:992px) { 

  /* lg screen, retina */
  #hintergrundbild {  background-image:url(/img/hg.jpg);  }
}


/* xl screen, non-retina | 1200px - 2399px */
@media only screen and (min-width:1200px) {
  body              { background-color:#fff; background-image: none; }
  #hintergrundbild  { background-image:url(/img/hg.jpg);  }
  
  #balken           { padding:24px 0 9px; }
  #balken img       { width:386px; padding:10px 0 4px; }
  nav               { bottom:6.5px; right:4rem; }
  li                { margin-left:2.3rem; font-size:2.5rem; }
  address           { font-size:1.1rem; margin-top:36px;}
  #email            { top:-17px }
  #impressum_link,  
  #impressum_close  { right:2.6%; }
  #impressum        { right:2.1%; bottom:17px; }
  #impressum strong { font-size:1.8rem; }
}


@media
only screen and (-webkit-min-device-pixel-ratio:2)      and (min-width:1200px),
only screen and (   min--moz-device-pixel-ratio:2)      and (min-width:1200px),
only screen and (     -o-min-device-pixel-ratio:2/1)    and (min-width:1200px),
only screen and (        min-device-pixel-ratio:2)      and (min-width:1200px),
only screen and (                min-resolution:192dpi) and (min-width:1200px),
only screen and (                min-resolution:2dppx)  and (min-width:1200px) { 

  /* xl screen, retina */
  #hintergrundbild {  background-image:url(/img/hg-2x.jpg);  }
}


/* xxl screen | > 2400px | Bild in Originalgrösse 4697px x 5071px */
@media only screen and (min-width:2400px) {
  #hintergrundbild {  background-image:url(/img/hg-2x.jpg);  }
}