@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/

/* -----  Min. 1600  --------------------------------------------------- */

@media all and ( min-width: 1400px ) {
  .hide1600 { display: none; }
  .show1600 { display: block; }

  h1 { font-size: 5.2rem; }
  h2 { font-size: 4rem; }
  h3 { font-size: 3rem; }

}

/* -----  Min. 2000  --------------------------------------------------- */

@media all and ( min-width: 2000px ) {
  .hide2000 { display: none; }
  .show2000 { display: block; }
}

/* -----  Max. 1200  --------------------------------------------------- */

@media all and (max-width: 1200px) {
  .hide1200 { display: none; }
  .show1200 { display: block; }

  h1 { font-size: 4.2rem; }
  h2 { font-size: 3.5rem; }
  h3 { font-size: 3rem; }
  hr { margin: 30px 0; }
  .bg-leightyellow-beans { padding-bottom: 12vw; }
}

/* -----  Max. 1024  --------------------------------------------------- */

@media all and (max-width: 1024px) {
  .hide1024 { display: none; }
  .show1024 { display: block; }
  .bg-leightyellow-beans { padding-bottom: 200px; }
}

@media all and (orientation: landscape) and (max-width: 1024px) {
}
  
@media all and (orientation: portrait) and (max-width: 1024px) {
}
  
/* -----  Max. 768  ---------------------------------------------------- */
  
@media all and ( max-width: 768px ) {
  .hide768 { display: none; }
  .show768 { display: block; }

  h1 { font-size: 4.5rem; line-height: .9em; margin-left: -0.05em; }
  h2 { font-size: 4rem; line-height: .9em; margin-left: -0.05em; }
  h4 { font-size: 1.75rem; }
  hr { margin: 25px 0; width: 80px; }
  .container { padding: 0 30px; }
  #welcome section { padding-bottom: calc(6vw + 80px); background-position: bottom left; }
  ul#getraenke li.pad2vw, ul#produkte li.pad2vw, ul#produkte li.pad2vw { padding: 20px; }
  footer section.pad2_0vw { padding: 20px 0; }
}
  
@media all and (orientation: landscape) and (max-width: 768px) {
}
  
@media all and (orientation: portrait) and (max-width: 768px) {
}
  
/* -----  Max. 600  ---------------------------------------------------- */
  
@media all and (max-width: 600px) {
  .hide550 { display: none; }
  .show550 { display: block; }

  h1 { font-size: 4.5rem; }
  h5 { font-size: 1.25rem; }
  .container { padding: 20px; }
  header section { padding: 0; }
  header#page section { padding: 0; }
  header img.logo { width: 150px; min-width: 150px; }
  ul#kaffee li.pad2vw { padding: 15px; }
  .wp-block-image > figure.alignleft,
  .wp-block-image > figure.alignright { width: 100%; margin: 0 0 .5rem 0; float: none; }
}

@media all and (orientation: landscape) and (max-width: 550px) {
}

@media all and (orientation: portrait) and (max-width: 550px) {
}

/* -----  Max. 450  ---------------------------------------------------- */
  
@media all and (max-width: 450px) {
  .hide450 { display: none; }
  .show450 { display: block; }

  #welcome section { padding-bottom: calc(6vw + 100px); } 
  h1 { font-size: 4rem; margin-bottom: 1.5rem !important; }
}