/* Screen Stylesheet
©2024 paepke
*/

  * { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
  html, body { font-family: "Trebuchet MS", Arial, sans-serif; text-decoration: none; height: 100%; }
  body { overflow: hidden; background-color: #fff;  }
  h1,h2,h3,h4,h5,h6,h7 { font-weight: bold; }
  a {  text-decoration: none; color: #702745; }
  a:hover { text-decoration: underline; }
  :active { outline:none; }
  :focus { -moz-outline-style:none; }
  ::selection, ::-moz-selection { background: #eee; }

  li, ul { list-style: none; }
  h1,h2,h3,h4,h5,h6,p,ul { padding-bottom: 1.5em; font-size: 13px; line-height: 150%; }
  p, li { hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphenate-limit-chars: 10 3 4; hyphenate-limit-lines:2; }
  h3,h4,h5,h6 { padding-bottom: 0; }
  
  div.site { }
  
  main#side { overflow-x: auto; height: 100%; }
  
  .huhn-1 { background: top left no-repeat url(/img/huhn-1.png); background-size: 20% auto; }
  .huhn-2 { background: bottom right no-repeat url(/img/huhn-2.png); background-size: 15em auto; padding-right: 12em;}
  
  #header, #content {  }
  
  div.page { max-width: 720px; margin-left: 30%; }

  #header { background: #D4DCD8; height: 225px; }
  #header div.page { height: 100%; background: no-repeat left center url(../img/titel.svg); }
  #header h1 { display: none; }
  
  #content { }
  
  #address { margin-top: -46px; height: 320px; background: no-repeat 0 0 url(../img/logo-desktop.svg); position: relative; }
  #address p.address { display: inline-block; position: absolute; }
  #address p.address-1 { top: 117px; }
  #address p.address-2 { left: 340px; top: 157px; width: 20em; background: #fff; }
  #address p.address, #address p.address a, .red { color: #702745; }
  #address p strong { display: inline-block; font-weight: normal; background: #fff;}
  #address p strong:before, #address p strong:after { content: "-"; width: 1em; display: inline-block; background: #fff; color: #fff }
  #address p strong:before { margin-left: -1em; color: #fff }
  #address p strong:after { margin-right: -1em; }

  #info-2 { color: #000; width: 100%; }

  #images { margin-bottom: 1.5em; position: relative; margin-left: -25%; width: 100%; font-size: 12px; }
  #images .phone {display: none; }
  #images div.img.desktop { margin: 0 -0.6em; width: 100%; }
  #images a.img { display: inline-block; padding: 0.6em; padding-top: 0.3em; width: calc(100%/6); }
  #images a.img img { width: 100%; height: 100%; object-fit: contain; }
  #images .shadow { box-shadow: 6px 6px 9px rgba(0,0,0,0.5); }
  #images .shadow:hover { box-shadow: 2px 2px 2px rgba(0,0,0,0.5); }

  #images .schraeg { display: block; transform: rotate(-6deg); width: 25%; position: absolute; left: -10%; top: -22%; z-index: 1000; }
  #images .schraeg a:hover {  }
  #images .schraeg img { width: 100%; height: auto;  }

  #footer { clear: both; height: 50px; }


/* overlay */

  div.overlay { display: none; background: rgba(0,0,0,0.50); z-index: 1000000; width: 100%; height: 100vh; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
  div.overlay .container { display: flex; justify-content: center; align-items: center; height: 100% }

  #overlay_titel img { height: auto; width: 80%; border: solid 1em #fff; }

  #overlay.scrollable .container .slider { width: 100%; height: 80%; }
    
  #slider.scrollable div.slidermask, #slider.scrollable ul, #slider.scrollable li, #slider.scrollable li img { width: 100%; height: 100%; }
  #slider.scrollable div.slidermask { position:relative; overflow:hidden; }
  #slider.scrollable li { padding: 2em; }
  #slider.scrollable li img { display: block; margin: 0 auto; width: auto; height: 100%; object-fit: contain; background: #fff; padding: 1em; }
  #slider.scrollable a.browse { position:absolute; top:0; cursor:pointer; height:100%; width:40%; z-index: 10000000; }
  #slider.scrollable a.left { right: 2%; }
  #slider.scrollable a.right { left: 2%; }
  #slider.scrollable a:hover.left { background: right center no-repeat url(../img/next.png) }
  #slider.scrollable a:hover.right { background: left center no-repeat url(../img/prev.png) }
  #slider.scrollable a.disabled { display: none; }

  div.overlay a.close { background: center center no-repeat url(../img/close.svg); position:absolute; right:28px; top:28px; cursor:pointer; height:30px; width:30px; z-index: 1000000000; }
  div.overlay a.close:hover { opacity:0.7; }
  
  ::-moz-selection { background:rgba(0, 0, 0, 0.1) }
  ::selection {background:rgba(0, 0, 0, 0.1) }

  @media screen {
  
      main, img { -moz-animation: fade 2s; -webkit-animation: fade 2s; -o-animation: fade 2s; -ms-animation: fade 2s; animation:fade 2s; }
  
      @-moz-keyframes fade {  0% { opacity:0 } 100% { opacity:1 } }
      @-webkit-keyframes fade {  0% { opacity:0 } 100% { opacity:1 } }
      @-o-keyframes fade {  0% { opacity:0 } 100% { opacity:1 } }
      @-ms-keyframes fade {  0% { opacity:0 } 100% { opacity:1 } }
      @keyframes fade {  0% { opacity:0 } 100% { opacity:1 } }
  
  }

/* tablet */
  @media screen and (max-width: 750px) {
      #header { height: 13em; }
      #header div.page { background-position: 2em 50%; }
      
      div.page { margin: 0; padding: 0 3em; }
      
      
      #address { background: no-repeat right top url(../img/logo-mobil.svg); height: 500px; margin-left: 40%; }
      #address p.address { margin: 0; margin-bottom: 1.5em; left: 0; }
      #address p.address strong { display: inline; padding-right: 0.7em; background: #fff; }
      #address p.address-1 { top: 102px; background: none; }
      #address p.address-2 { top: 328px; background: none; }
      
      #images { margin: 0; }
      #images .schraeg { left: -5%; }
      
      #info-2 { color: #000; width: 100%; margin: 0; padding-right: 30%; }
      
      .huhn-1 { background-size: 40% auto; }
      .huhn-2 { background-size: auto 75%;  }
 }

  @media screen and (orientation: portrait) {

  }

/* mobil smartphone */
  @media screen and ( max-width: 650px ) {
      body { position: relative; height: 100%; }
      * { font-size: 14px !important; } 
      
      .desktop { display: none !important; }
      
      div.page { padding: 0 2em; }
      
      #address { background-position: right top; margin-left: 0; }
  
      #images { margin: 0;  } 
      #images .phone { display: block; margin-bottom: 2em; }
      #images .phone img { display: block; width: 100%; height: auto; }
  
      #info-2, #info-1 { margin: 0; width: 100%; padding: 0; margin-bottom: 2em; }

      .huhn-1 { background-position: 80% 10em; background-size: 20em auto; }
      .huhn-2 { background-size: auto 14em; padding-bottom: 13em !important; }

      
  }
  
  @media screen and ( max-device-width: 650px ) and (orientation: landscape) {
  }