/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/

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

@media all and ( min-width: 1600px ) {
  .hide1500 { display: none; }
  .show1500 { display: block; }
}

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

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

  header, main, footer {
    position: relative;
    margin: 0 12vw;
  }

}

/* -----  Max. 1440  --------------------------------------------------- */

@media all and (max-width: 1440px) {
  .hide1500 { display: none; }
  .show1500 { display: block; }

  :root { --h-size: 4vw; }

  header, main, footer { margin: 0 4vw; }
  article section.px-vw-8 { padding-left: 4vw; padding-right: 4vw; }

}

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

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

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

@media all and (max-width: 1024px) {
  .hide1024 { display: none; }
  .show1024 { display: block; }

  :root { --h-size: 4.5vw; }
  :where(.wp-block-columns.is-layout-flex) { gap: 30px; }

  #districts,
  #page-header { min-height: 400px; width: 100%; }
  #page-header section h1 { width: calc(75% - 8vw); }
  #projects section div.content { padding: 6vw; width: 75%; }

  footer section.pt-vw-4 { padding-top: 5vw;}
  footer section.py-4 { padding: 1rem 4vw 4vw !important; }
  footer ul.footer { display: flex; align-items:center; justify-content:center; margin-bottom: .75rem; }
  footer div.right { text-align: center; }

}

@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; }

  :root { --h-size: 6vw; }

  .content h2,
  div.h2  { font-size: calc(var(--h-size) * 0.5); }

  :is(#page, #single) .content.text h1 { font-size: 2rem; }

  #page-header { min-height: 350px; }
  #page-header section h1 { font-size: calc(var(--h-size) * 1.2); width: calc(90% - 8vw); }

  article section { padding-top: 6vw !important; padding-bottom: 6vw !important; }
  article section.p-vw-10 { padding: 6vw; }
  #hero section h1 { font-size: calc(var(--h-size) * 1.3); line-height: calc(var(--h-lineheight) * 0.9); }
  #districts.align_h { margin: 4vw 0 2vw; }
  #projects section div.content { padding: 6vw; width: 100%; }

  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex: 0 0 calc(50% - 15px) !important; max-width: calc(50% - 15px) !important; }

}
  
@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: 550px) {
  .hide550 { display: none; }
  .show550 { display: block; }

  :root { --h-size: 10vw; }
  .text { font-size: .95rem; line-height: 1.45em; }
  .text p { margin-bottom: 1.45rem; }

  :is(#page, #single) .content.text h1 { font-size: 1.8rem; }
  :is(#page, #single) .content.text h2 { font-size: 1.6rem; }
  :is(#page, #single) .content.text h3 { font-size: 1.45rem; }
  :is(#page, #single) .content.text h4,
  :is(#page, #single) .content.text h5,
  :is(#page, #single) .content.text h6 { font-size: 1.35rem; }

  main, footer { margin: 0; }
  header { margin: 0 4vw; }
  header { align-items: start; text-align: left; padding: 4vw 0 5vw; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex: 0 0 100% !important; max-width: 100% !important; }

  #hero { min-height: 300px; width: 100%; }
  #hero section.py-vw-8 { padding-top: 50px !important; padding-bottom: 50px !important; }
  #hero section h1 { font-size: calc(var(--h-size) * 0.9); }
  #hero section div.h3 { font-size: calc(var(--h-size) * 0.40); }

  #districts,
  #page-header { min-height: 250px; width: 100%; }
  #page-header section h1 { font-size: calc(var(--h-size) * 0.9); width: calc(90% - 8vw); }
  #page-header blockquote h2 { font-size: calc(var(--h-size) * 0.5); }
  #page section .bg-primary-light.p-3 { padding: 4vw; }
  #page section time.my-3 { margin-top: 4vw; margin-bottom: 4vw; }

  #single-header { min-height: 250px; }
  #single-header section h1 { font-size: calc(var(--h-size) * 0.9); width: 90%; }
  #single section time.my-4 { margin-top: 0; margin-bottom: 1.35rem; }

  footer section.py-4 { padding: 1rem 4vw 6vw !important; }
  footer ul.footer { margin-bottom: .5rem; }

}

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

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

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