@import "loader.css";

@media screen and (max-width: 835px) {
   .colContent {
      width: 100%;
      float: none;
      margin: 0 0 20px;
   }

   .dokumentation_item {
      float: none;
      /* zentrieren */
      display: block;
      margin: 0 auto;
      margin-bottom: 23px;
      width: 92%;
   }

   img.dokumentation_item {
      width: auto !important;
   }

   .dokumentation_description {
      width: 100%;
      margin: 0;
   }

   .dokumentation_nextbutton {
      margin-right: 27px;
   }
}

@media screen and (max-width: 37.5em) {

   #content {
      margin-top: 29px;
   }

      #content p:before {
         /* Vor Abs�tzen einen 90% breiten Abstand einf�gen. F�hrt dazu, dass Abs�tze immer unter Bilder gestellt
				werden und nicht um das Bild herumflie�en, wodurch bei langen W�rtern L�cken um Bilder verhindert werden k�nnten. */
         content: "";
         width: 90%;
         display: block;
         overflow: hidden;
      }

      #content p {
         -webkit-hyphens: auto;
         -moz-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
      }

   .subtitleFigureRight,
   .subtitleFigureLeft,
   .imgRight,
   .imgLeft,
   .imgCenter,
   div.linkbox_right,
   div.box_right,
   div.linkbox_left,
   div.box_left {
      float: none;
      /* zentrieren */
      display: block;
      margin: 0 auto !important;
      margin-top: 17px !important;
      margin-bottom: 17px !important;
      min-width: 60%;
   }

   .subtitleFigureRight,
   .subtitleFigureLeft,
   .subtitleFigureCenter {
      width: 95% !important;
      text-align: center; /* Bewirkt, dass img im figure zentriert wird */
   }

   figure img {
      /* f�r mobil zu kleine Bilder auf 60% Sichtbreite vergr��ern */
      min-width: 65%;
      width: auto !important;
   }

   .subtitleFigureCenter img {
      /* f�r mobil zu kleine Bilder auf 70% Sichtbreite vergr��ern */
      min-width: 70%;
      width: auto !important;
   }

   .bookcover {
      margin: 0 auto;
      margin-top: 17px;
      margin-bottom: 17px;
   }

   div.linkbox_right,
   div.box_right,
   div.linkbox_left,
   div.box_left {
      width: 98% !important;
   }

   .wideimage {
      /* Bilder der Klasse wideimage sollen mobil extrabreit angezeigt werden (in erster Linie Bilder im Querformat, damit man mehr erkennen kann) */
      width: 88% !important;
   }

   .subtitleCaption {
      font-size: 15px;
      padding: 8px 5px 0;
      color: #555;
      background: none;
   }

   .linkboxtitle {
      margin-bottom: 7px;
   }

   div.linkbox_right {
      margin-top: 5px;
      padding-left: 28px;
      padding-top: 19px;
      background-color: #F0F0F0;
   }

   div.box_bottom {
      background-color: #F0F0F0;
      padding: 20px;
   }

   .dokumentation_header {
      margin-bottom: 25px;
   }

   .dokumentation_description {
      max-width: 95%;
      margin-left: 9px;
   }

   .dokumentation_item {
      box-shadow: 1px 1px 7px rgba(0, 0, 4, 0.25);
   }

   .videoembed {
      width: 98%;
   }
}

.imgLeftNotResizeOnMobile {
   float: left;
   margin-top: 7px;
   margin-right: 19px;
   margin-bottom: 6px;
}

.imgRightNotResizeOnMobile {
   float: right;
   margin-top: 7px;
   margin-left: 19px;
   margin-bottom: 6px;
}