/*
Description: Responsive CSS MS-CD 2016
Editor: Michael Gattmann
Version: 1.5


Ursprüngliche Version:
======================
Description: Responsive CSS für die Stadt Münster
Author: Roman Breitenbach
Version: 1.0
Author URI: http://netztriebwerk.de
*/



/*

ALLGEMEIN

S  bis 785px
M  bis 1024px
L  bis 1280px
XL  > 1280px


@media screen and (max-width: 785px)
@media screen and (max-width: 1024px)
@media screen and (min-width: 785px) and (max-width: 1024px)
@media screen and (min-width: 1279px)

@media only screen and (min-width:320px) and (max-width: 767px)
@media only screen and (min-width:320px) and (max-width: 400px)
@media only screen and (min-width:401px) and (max-width: 479px)
@media screen and (max-device-width: 640px) and (orientation: landscape)
@media screen and (max-device-width: 534px) and (orientation: landscape)
@media screen and (max-device-width: 640px) and (orientation: portrait)
@media screen and (max-device-width: 568px) and (orientation: portrait)
@media screen and (min-width: 1024px) and (max-width:1278px)
@media screen and (min-width: 768px) and (max-width:1023px)
@media screen and (max-width: 767px) and (orientation: portrait)
@media screen and (max-width: 480px) and (orientation: portrait)
@media screen and (max-width: 767px) and (orientation: landscape)
*/



  @media screen and (max-width: 500px) {
    #seiten-wrapper
    {
      padding:  0;
    }

    main h1,  /* Wichtig, damit lange Wörter */
    main h2,  /* am Seitenrand nicht abge- */
    main h3,  /* schnitten werden. */
    main h4
    {
      -webkit-hyphens:  auto;
      -moz-hyphens:    auto;
      -ms-hyphens:    auto;
      hyphens:      auto;
    }
  }
  @media screen and (min-width: 500px) and (max-width: 641px) {
    #seiten-wrapper
    {
      padding:  0 0 0.5em;
    }
  }
  @media screen and (max-width: 641px) {
    header .stadt-ms
    {
      right:  0;
    }
  }
  @media screen and (min-width: 641px) and (max-width: 785px) {
    #seiten-wrapper
    {
      padding:  0 1em 0.5em;
    }
    header .stadt-ms
    {
      right:    1em;
    }
  }
  @media screen and (max-width: 785px) {
    header .stadt-ms
    {
      margin-top:  0;
    }
    header .bx-wrapper .bx-controls
    {
      width:  30%;
    }

  .flexbox{
      display: inline;
   }
  }
  /*@media screen and (min-width: 501px) and (max-width: 785px) {
  }*/



/* #### Responsive Media Query bis 785px #### */
/* "Tablet" (M) und "Mobile" (S) ohne Navi-Spalte */

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

    .ui-dialog
    {
      width:  98% !important;
    }

    #seiten-wrapper
    {
      width: 100%;
      -moz-box-sizing:  border-box;
      -webkit-box-sizing:  border-box;
      box-sizing:      border-box;
    }

    #navi-spalte
    {
      display:  none;
    }

    #info-spalte
    {
      border-left:    0;          /* da Navi ausgeblendet, muss dieser Wert 0 sein */
    }

    header
    {
      height:    285px;  /* Muss zusammen mit top bei header .header-overlay angepasst werden. */
    }

    header .amt
    {
      height: 85px;      /* ACHTUNG: Muss gemeinsam mit top-Wert bei header .content-header .bx-wrapper (siehe unten) angepasst werden! */
      width:  240px;
    }
    header .amtsbezeichnung
    {
      padding-top:  20px; /* 11px; */
      font-size:    1.4rem;
    }
    header .amtsfaehnchen
    {

    }

    header .muenster-de
    {
      font-size:  3rem;
    }
    header .stadt-ms
    {
      /*margin-top:  12px;*/
      width:    163px;
    }

    header .header-overlay
    {
      top:    143px;  /* Muss zusammen mit height bei header angepasst werden. */
    }

    header .content-header .bx-wrapper      /* ACHTUNG: Muss gemeinsam mit height-Wert bei header .amt angepasst werden! */
    {
      top:    -15px;
    }

  }

/* ENDE #### Responsive Media Query bis 785px #### */



/* #### Responsive Media Query bis 1024px #### */
/* "Tablet" (M) und "Mobile" (S) (Info-Spalte rutscht unter den Inhalt) */

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

    #hauptteil
    {
      flex-wrap:  wrap;
    }

    #info-spalte
    {
      background-color:  transparent!important;  /* entfernt Hintergrundfarbe der Spalte */
      flex-grow:      1;
    }

    aside
    {
      width:  auto!important;
    }

    aside > div
    {
      display:  flex;    /* Durch diese beiden Anweisungen... */
      flex-flow:  row wrap;  /* ...bekommen die Kästen die gleiche Höhe (sobald sie unter den Inhalt rutschen). */
      text-align:  left;    /* Kästen der Info-Spalte rutschen nach links (da es sich um inline-block Elemente handelt). */
    }

    /* Da die #info-spalte ab dieser Breite unter den Inhalt rutscht,
       sollen die Kästen einen Border bekommen. */
    #info-spalte aside > div > *  /* Rahmen links/rechts */
    {
      border-left:  1px solid grey;
      border-right:  1px solid grey;
    }

    aside > div > div
    {
      border-top:    1px solid grey;  /* Abschluss Kasten oben */
      border-bottom:  1px solid grey;  /* Abschluss Kasten unten */

      display:      inline-block;
      margin-left:    1%;
      margin-right:    1%;
      min-width:      195px;
      width:        31%;
      text-align:      left;
      vertical-align:    text-top;
    }

    /* "bugfixing" - nötig, da die HTML-Struktur der Kästen nicht einheitlich ist. */
    /* ohne diese Anweisungen haben einige Kästen oben und unten einen Abstand zum gesetzten Border */
    /* Aufgrund von Nebenwirkungen nicht in basis_cd.css anwenden! Ggf. im jeweiligen Individual-CSS beeinflussen. */
    /* VERSUCH #info-spalte aside > div > div > .linklist,
    #info-spalte aside > div > div > .kasten
    {
      margin-top:    0;
      margin-bottom:  0;
    }*/

  }

/* ENDE #### Responsive Media Query bis 1024px #### */



/* #### Responsive Media Query 785px bis 1024px #### */
/* "Tablet" (M) und "Mobile" (S) mit Navi-Spalte (Info-Spalte rutscht unter den Inhalt) */

  @media screen and (min-width: 785px) and (max-width: 1024px) {

    #seiten-wrapper
    {
      width:    93%;
      /*max-width:  756px;/* entfällt, da sich der Content nun flexibel ausbreitet*/
    }

    #info-spalte
    {
      border-left:    220px solid #E1E1E1;    /* entspricht Breite der Navigation */
    }

    header .amt
    {
      width:  260px;
    }
    header .amtsbezeichnung
    {
      padding-top:  19px;
      font-size:    1.6rem;
    }
    header .amtsfaehnchen
    {

    }

    header .muenster-de
    {
      font-size:  3.5rem;
    }

    header .stadt-ms
    {
      margin-top:  9px;
      width:    177px;  /* gleicher Wert wie bei header .bx-wrapper .bx-controls */
    }

    header .bx-wrapper .bx-controls
    {
      width:  177px;  /* gleicher Wert wie bei header .stadt-ms */
    }
  }

/* ENDE #### Responsive Media Query 785px bis 1024px */



/* #### Responsive Media Query über 1279px #### */
/* "TV" (XL) */

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

    #seiten-wrapper
    {
      /*width: 1220px;*/
      width: 95%;
      /*max-width:1220px;  /* entfällt, da sich der Content nun flexibel ausbreitet */
    }

  }

/* ENDE #### Responsive Media Query über 1279px #### */






/* BEGINN NTW */

#navi-spalte {
  min-width: 220px;
}
#info-spalte {
  min-width: 215px;
}
#switch {
  margin-top: 2em;
  text-align: center;
}
.bx-wrapper img {
  object-fit: cover;
}
img.srcsetImages {
  object-fit: cover;
}
header .bx-wrapper .bx-caption {
  width: 82%;
}


@media screen and (min-width: 320px) and (max-width: 1024px) {

  #seiten-wrapper.desktop
  {
    max-width: 960px !important;
    width: 100% !important;
  }
}


@media screen and (min-width: 1024px) and (max-width: 1278px) {

  header .bx-wrapper .bx-caption
  {
    width: 77%;
  }
}


@media screen and (min-width: 785px) and (max-width: 1024px) {

  header .bx-wrapper .bx-caption
  {
    width: 71%;
  }
}

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

  #inhalts-spalte .linkliste a {
      text-overflow: ellipsis;
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
   }

   main ul li::before, main ul li.intern::before, main ul li.extern::before, main ul li.pdf::before, main ul li.punkt::before, main ul li.mail::before, main ul li.sprung::before {

   }

  .menu-trigger
  {
    display: block;
  }

  header .amt
  {
    top: 1.2em;
  }

  header .stadt-ms
  {
    /*margin-top: 1.2em;*/
    position: absolute;
    top: 0;
    width: 215px;
  }

  header .muenster-de
  {
    margin-top: 30px;
  }

  #jPanelMenu-menu > #navi-spalte
  {
    display: block;
  }

  header .bx-wrapper .bx-caption
  {
    width: 60%;
  }
}


/* Verhalten des Headers bei Auflösungen unter 500px Viewport */

  @media screen and (max-width: 500px) and (min-width: 451px) {

    header .stadt-ms
    {
      margin: 0;
      right: 0;
    }
  }


  @media screen and (max-width: 450px) and (min-width: 401px) {

    header .stadt-ms
    {
      right: 0;
    }
  }


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

    header .amt
    {
      max-width: 200px;
      width: 100%;
    }
    header .amt .m-logo
    {
      overflow:  hidden;
    }
    header .amtsbezeichnung
    {
      width: 100%;
    }
    header .muenster-de
    {
      font-size: 2rem;
    }
    header .logos.flexbox
    {
      padding-right:    0.3em;
    }
    header .header-overlay
    {
      width:  205px;
    }
  }


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

    header .stadt-ms
    {
      margin: 0;
    }
  }

/* ENDE Verhalten des Headers bei Auflösungen unter 500px Viewport */








  /* TEST für mobile Ansicht (Ausblendung der Header-Bilder) */

    @media screen and (max-width: 500px) {
      #inhalts-spalte .linkliste a {
         text-overflow: ellipsis;
         width: 300px;
         white-space: nowrap;
         overflow: hidden;
         display: inline-block;
       }

      main ul li::before, main ul li.intern::before, main ul li.extern::before, main ul li.pdf::before, main ul li.punkt::before, main ul li.mail::before, main ul li.sprung::before {
         margin-right: 0em;
      }

      header
      {
        height:  108px;
      }

      header .amt
      {
        width:  190px;
      }

      header .amt .m-logo img
      {
        width:  100%;  /* Wichtig für die Darstellung! */
      }

      header .muenster-de
      {
        font-size:  30px;
      }

      header .logos.flexbox
      {
        margin-right:    20px;
        justify-content:  flex-end;
      }

      header .content-header
      {
        display:  none;
      }
      header .header-overlay    /* Ergänzung E.E., 26.7.2017 */
      {
        display: none;
      }
    }

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

      header
      {
        height:  86px;
      }

      header .muenster-de
      {
        margin-top:  34px;
        font-size:  25px;
      }

      header .amt
      {
        width:  140px;
        /*height:  70px;*/
        height:      auto;
        min-height:    50px;
        margin-bottom:  10px;
      }

      header .amt .amtsbezeichnung
      {
        font-size:  13px;
      }

    }

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

      header .muenster-de
      {
        margin-top:  38px;
        font-size:  20px;
      }

     #inhalts-spalte .linkliste a {
          text-overflow: ellipsis;
          width: 280px;
          white-space: nowrap;
          overflow: hidden;
          display: inline-block;
      }

      main ul li::before, main ul li.intern::before, main ul li.extern::before, main ul li.pdf::before, main ul li.punkt::before, main ul li.mail::before, main ul li.sprung::before {
         margin-right: 0em;
      }

    }

  /* TEST für mobile Ansicht */























/*
Wichtiger Workaround für IE 10/11!
Sonst verhält sich die Flexbox im IE nicht korrekt.
Folgender Media-Query ist IE-spezifisch, daher wird innenliegendes CSS nur im IE angewendet.
*/

  /* S */
  @media screen and (max-width: 785px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #inhalts-spalte .tx-cq-image-gallery  /* PA-Galerie-Extension */
    {
      max-width:  725px;
    }
    #inhalts-spalte .galerie_rahmen      /* "Allgemeine" Galerie */
    {
      max-width:  516px;
    }
  }

  /* M */
  @media screen and (min-width: 785px) and (max-width: 1024px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #inhalts-spalte .tx-cq-image-gallery  /* PA-Galerie-Extension */
    {
      max-width:  516px;
    }
    #inhalts-spalte .galerie_rahmen      /* "Allgemeine" Galerie */
    {
      max-width:  516px;
    }
  }

  /* L */
  @media screen and (min-width: 1024px) and (max-width: 1279px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #inhalts-spalte .tx-cq-image-gallery  /* PA-Galerie-Extension */
    {
      max-width:  720px;
    }
    #inhalts-spalte .galerie_rahmen      /* "Allgemeine" Galerie */
    {
      max-width:  516px;
    }
  }

  /* XL */
  @media screen and (min-width: 1279px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #inhalts-spalte .tx-cq-image-gallery  /* PA-Galerie-Extension */
    {
      max-width:  980px;
    }
    #inhalts-spalte .galerie_rahmen      /* "Allgemeine" Galerie */
    {
      max-width:  765px;
    }
  }

/* ENDE Wichtiger Workaround für IE 10/11! */





/* "Normale" Galerie (nicht bei 13_medien) */

/*  Elemente sollen sich stets linksbündig anordnen, daher werden hier aus esthetischen Gründen
  "von Hand" Abstände gesetzt (eine automatische Zentrierung der Galerie mit linksbündig
  ausgerichteten Elementen ist nicht möglich).
*/
@media screen and (max-width: 456px) {

  main .galerie_rahmen .galerie
  {
    margin-left:    auto;
    margin-right:    auto;
  }

    .frame-type-image > .ce-image, .ce-center, .ce-above > .ce-gallery > .ce-outer > .ce-inner > .ce-row > .ce-column {
        margin-left:    auto;
        margin-right:    auto;
    }

}

@media screen and (min-width: 456px) and (max-width: 483px) {

  main .galerie_rahmen .galerie
  {
    margin-left:    115px;
    margin-right:    auto;
  }

}

@media screen and (min-width: 483px) and (max-width: 510px) {

  main .galerie_rahmen .galerie
  {
    margin-left:    5px;
    margin-right:    auto;
  }

}

@media screen and (min-width: 510px) and (max-width: 525px) {

  main .galerie_rahmen .galerie
  {
    margin-left:    15px;
    margin-right:    auto;
  }

}

@media screen and (min-width: 525px) and (max-width: 574px) {

  main .galerie_rahmen .galerie
  {
    margin-left:    25px;
    margin-right:    auto;
  }

}

@media screen and (min-width: 574px) and (max-width: 785px) {

  main .galerie_rahmen .galerie
  {
    margin-left:    50px;
    margin-right:    auto;
  }

}

@media screen and (max-width: 560px) {
  .linkliste
  {
    display: inline-block;
  }
}

/* ENDE "Normale" Galerie (nicht bei 13_medien) */