/* Variable festlegen  */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: rgb(85,99,145);
  transition: color 0.5s ease 0s;
}

a img {
  border: none;
}

a .visited {
  color: rgb(85,99,145);
}

a .hover {
  color: rgb(85,99,145);
}

ul {
  padding-left: 15px;
}

sup {
  line-height: 0;
  font-size: 70%;
}

li {
  list-style-type: disc;
  padding: 0 0 0 0;
}

h1,
h2 {
  font-size: 150%;
  text-transform: uppercase;
  color: rgb(85,99,145);
  margin-top: 30px;
}

body {
  font: 100% Arial, Verdana, Helvetica, sans-serif;
  background: #ffffff;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #646567;
}

#container {
  width: 90%;
  max-width: 1440px;
  background: #FFFFFF;
  margin: 0 auto;
  text-align: left;
  border: 1px solid #c6c7c8;
}

#head {
  border: 0 solid #fff;
  width: 100%;
}

#head a.blepha_text img {
  width: 400px;
  height: auto;
  margin: 20px 30px 20px 36px;
  float: left;
}

#head a.logo_ps img {
  width: 250px;
  height: auto;
  margin: 20px 30px 20px 36px;
  float: right;
}

#navi_oben {
  width: 100%;
  border-top: 1px solid #c6c7c8;
  border-bottom: 1px solid #c6c7c8;
  color: #646567;
  line-height: 2;
  padding-left: 32px;
  clear: both;
}

#mainContent,
#mainContentSpalten {
  width: 100%;
  padding: 60px 30px 30px 32px;
  background-size: 100%;
  font-size: 90%;
  display: block;
  vertical-align: top;
}

#mainContent p.bodytext {
  line-height: 150%;
}

#mainContent ul {
  padding-left: 3px;
}

#mainContent ul li {
  margin: 0 0 7px 0;
  list-style-type: none;
  background: url(../Images/aufzaehlung_blepha.svg) no-repeat left 3px;
  background-size: 10px;
  padding-left: 15px;
  line-height: 1;
}

#mainContent .contenttable {
  border-collapse: collapse;

}

#mainContent .contenttable tr td {
  padding: 5px;
  vertical-align: top;
  line-height: 150%;
}

#mainContent .contenttable tr td ul {
  margin-top: 5px;
  margin-bottom: 0;
}

#mainContent .contenttable tr td ul li {
  margin: 0;
  margin-bottom: 5px;
}

#mainContent .contenttable tr td img {
  width: 100%;
  height: auto;
}

#mainContent .produkte .contenttable thead {
  color: #ffffff;
  background-color: rgb(85,99,145);
}

#mainContent .produkte .contenttable thead tr th {
  padding: 10px;
  border: 2px solid #ffffff !important;
}

#mainContent .produkte .contenttable tbody {
  background-color: rgba(85,99,145, 0.5);
}

#mainContent .produkte .contenttable tbody tr td {
  padding: 10px;
  border: 2px solid #ffffff;
}

#mainContent .produkte .contenttable tfoot {
  background-color: rgba(85,99,145, 0.2);
}

#mainContent .produkte .contenttable tfoot tr td {
  padding: 10px;
  border: 2px solid #ffffff;
}

#mainContent .produkte .contenttable tfoot tr td:first-child {
  width: 36%;
}

#mainContent span.detail {
  color: rgb(85,99,145);
}

#mainContent .rahmen_hinweis {
  width: 50%;
  margin-top: 40px;
  font-size: 80%;
}

#mainContent .rahmen_impressum {
  width: 30%;
  float: left;
}

#mainContent:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.zwei_spalten_links {
  float: left;
  max-width: 400px;
}

.zwei_spalten_rechts {
  float: right;
}

.clear {
  clear: both;
}

p {
  margin-bottom: 15px;
  line-height: 1.3;
}

p.bodytext img {
  margin-bottom: 5px;
}

#footer {
  width: 100%;
  border-top: 1px solid #c6c7c8;
  color: #646567;
  padding: 5px 32px 5px 5px;
}

#footer .to_top {
  padding: 0 10px 0 5px;
  float: left;
}

#footer .print {
  float: left;
  cursor: pointer;
  margin-left: 10px;
}

#footer .last_update {
  font-weight: normal;
  font-size: 78%;
  padding: 3px 25px;
  float: left;
}

/* Navigation oben formatieren */

ul.ul_navi_oben {
  padding: 0;
  margin: 0;
  width: auto;
  clear: both;
}

.navi_oben_wrap {
  text-transform: uppercase;
  font-size: 75%;
  font-weight: bold;
}

.navi_oben_wrap_active {
  text-transform: uppercase;
  font-size: 75%;
  color: rgb(85,99,145);
  font-weight: bold;
}

.navi_oben_wrap a {
  color: #646567;
}

.navi_oben_wrap a:hover {
  color: rgb(85,99,145);
}

li.navi_oben_wrap {
  display: inline-block;
  padding-right: 9px;
  margin-bottom: 0;
  list-style-type: none;
}

li.navi_oben_wrap_active {
  display: inline;
  padding-right: 9px;
}

.csc-textpic-intext-right-nowrap {
  width: 100%;
}

.csc-textpic-intext-right-nowrap .csc-textpic-text {
  width: 50%;
  margin: 0;
  float: left;
}

.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
  width: 45%;
}

.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap figure {
  width: 100%;
  padding: 0 10% 10% 10%;
}

.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap figure img {
  width: 100%;
  height: auto;
}

/* Navigation unten formatieren */

ul.navi_unten {
  float: left;
  padding: 0;
  margin: 0;
  width: 75%;
}

li.navi_unten_wrap a {
    white-space: nowrap;
}

ul.navi_unten li {
  font-size: 78%;
  font-weight: bold;
  margin: 0 5% 0 5%;
  display: inline;
}

ul.navi_unten li a {
  color: #646567;
  padding: 0;
  margin: 0;
  transition: color 0.5s ease 0s;
}

ul.navi_unten li a:hover {
  color: rgb(85,99,145);
}

ul.navi_unten li.active {
  color: rgb(85,99,145);
}

/* Extension ts_lastupdate */

.tx-tslastupdate-pi1 {
  padding-right: 35px;
  margin-top: 8px;
  font-weight: bold;
  font-size: 78%;
  float: left;
}

/* Tabelle Downloads */

.table_downloads_header_vorschau {
  width: 94px;
  background-color: #646567;
  color: #fff;
  padding: 1px 5px;
}

.table_downloads_vorschau {
  width: 94px;
  color: #fff;
  padding: 1px 5px;
}

.table_downloads_header_dateiname {
  width: 200px;
  background-color: #646567;
  color: #fff;
  padding: 1px 5px;
}

.table_downloads_dateiname {
  width: 200px;
  padding: 1px 5px;
}

.table_downloads_header_info {
  width: 80px;
  background-color: #646567;
  color: #fff;
  padding: 1px 5px;
}

.table_downloads_info {
  width: 80px;
  padding: 1px 5px;
}

/* Bild für Spamprotect */

img.nix {
  display: inline;
}

table .contenttable td {
  vertical-align: bottom;
}

.csc-default {
  clear: both;
}

.csc-default figure img {
  width: 100%;
  height: auto;
}

/*  Grid auf der Startseite */

.startseite_3er {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.startseite_3er .csc-default {
  width: 32%;
  height: auto;
  background-color: rgba(85,99,145, 0.2);
  position: relative;
  margin-bottom: 20px;
}

.startseite_3er .csc-default .csc-textpic .csc-textpic-imagewrap {
  position: relative;
  z-index: 1;
}

.startseite_3er .csc-default .csc-textpic .csc-textpic-imagewrap figure img {
  width: 100%;
  height: auto;
}

.startseite_3er .csc-default .csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
  margin-bottom: 0;
}

.startseite_3er .csc-default .csc-textpic-text {
  position: absolute;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
}

.startseite_3er .csc-default .csc-textpic-text h2 {
  display: table;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  width: 100%;
  height: 100%;
  background-color: rgba(85,99,145, 0.2);
  transition: 0.5s ease 0s;
  padding: 20px;
}

.startseite_3er .csc-default .csc-textpic-text h2 a {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  color: #ffffff;
}

.startseite_3er .csc-default .csc-textpic-text h2:hover {
  background-color: rgba(85,99,145, 0.9);
}

.startseite_3er .csc-default:hover .csc-textpic:before {
  background-color: rgba(85,99,145, 0.9);
}

.startseite_3er .csc-default:last-child {
  padding: 20px 20px 5px 20px;
}

.startseite_3er .csc-default:last-child .csc-header h1 {
  text-transform: none;
  font-weight: normal;
}

.frame-bloecke3text {
  background-color: rgba(85,99,145, 0.2);
  padding: 10px;
}

.frame-bloecke3,
.ce-textpic {
  position: relative;
}

.frame-bloecke3 .ce-gallery {
  position: relative;
  z-index: 1;
}

.frame-bloecke3 .ce-bodytext {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.frame-bloecke3 .ce-bodytext h2 {
  display: table;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
  width: 100%;
  height: 100%;
  background-color: rgba(85,99,145, 0.2);
  transition: 0.5s ease 0s;
  margin-top: 0;
}

.frame-bloecke3 .ce-bodytext h2 a {
  display: table-cell;
  vertical-align: middle;
  color: rgb(255,255,255);
  font-weight: bold;
  background-color: rgba(85,99,145,0);
  transition: background-color 0.5s ease 0s;
  text-shadow: 2px 2px 4px rgb(85,99,145);
}

.frame-bloecke3 .ce-bodytext h2 a:hover {
  background-color: rgba(85,99,145,0.8);
}

.frame-bloecke3text .ce-textpic .ce-bodytext ul li {
  background: url(../Images/aufzaehlung_blepha.svg) no-repeat left 6px;
  list-style-type: none;
  background-size: 10px;
  padding-left: 15px;
  line-height: 1.5;
}

.frame-bloecke3text .ce-textpic .ce-bodytext ul {
  padding-left: 0;
}

.frame-bloecke3 .ce-gallery,
.frame-bloecke3 .ce-gallery .ce-outer,
.frame-bloecke3 .ce-gallery .ce-inner,
.frame-bloecke3 .ce-gallery .ce-row,
.frame-bloecke3 .ce-gallery .ce-column,
.frame-bloecke3 .ce-gallery img {
  height: 100%;
}

.frame-bloecke3 .ce-gallery img {
  object-fit: cover;
}


.ce-intext.ce-right .ce-gallery .ce-row .grid-x {
  justify-content: flex-end;
}

.ce-intext .ce-gallery {
  margin-bottom: 20px;
}

.c-important {
  font-size: 80%;
}

.c-important h2 {
  margin-top: 5px;
}

.c-important p {
  line-height: 1.5;
}

.contenttable,
.contenttable-product {
  font-size: 100%;
}

.contenttable-product td {
  border: 2px solid #ffffff;
}

.contenttable-product thead {
  color: #ffffff;
}

.contenttable-product thead th {
  font-weight: normal;
}

.contenttable-product tfoot td {
  font-weight: normal;
  color: #646567;
}

.contrast-btn {
    cursor: pointer
}

/**************** Media queries  START ******************/

@media (min-width: 64em) and (max-width: 90em) {
  #container {
    margin: 0;
    width: 100%;
    max-width: 100%;
    border: none;
  }
}

@media (min-width: 40em) {
  h1 {
    margin-top: 0px;
  }

  .ce-intext .ce-gallery {
    margin-bottom: 0px;
  }
}

@media (min-width: 48em) and (max-width: 64em) {
  #container {
    margin: 0;
    width: 100%;
    max-width: 100%;
    border: none;
  }

  .startseite_3er .csc-default:last-child div ul li {
    font-size: 90%;
  }

  #mainContent {
    font-size: 90%;
  }

  #mainContent .rahmen_hinweis {
    width: 75%;
  }

  #mainContent .rahmen_impressum {
    width: 100%;
    float: none;
  }

}

@media (min-width: 20em) and (max-width: 48em) {
  #container {
    margin: 0;
    width: 100%;
    max-width: 100%;
    border: none;
  }

  #head a.blepha_text img {
    width: 300px;
    margin: 20px 30px 20px 10px;
  }

  #head a.logo_ps img {
    width: 180px;
    margin: 20px 10px 20px 36px;
  }

  .startseite_3er .csc-default {
    width: 100%;
  }

  #mainContent {
    padding: 40px 10px 20px 10px;
  }

  #navi_oben {
    padding-left: 10px;
  }

  #footer {
    padding: 5px 32px 5px 10px;
  }

  #footer .print {
    margin-left: 0;
  }

  ul.navi_unten {
    padding: 10px 0;
    float: none;
    clear: both;
  }

  ul.navi_unten li {
    margin: 0 10% 0 0;
  }

  #mainContent {
    font-size: 90%;
  }

  #mainContent .rahmen_hinweis {
    width: 75%;
  }

  #mainContent .rahmen_impressum {
    width: 100%;
    float: none;
  }

  .csc-textpic-intext-right-nowrap .csc-textpic-text {
    width: 100%;
  }

  .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
    float: none;
    width: 100%;
  }

  .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap figure {
    padding: 0;
  }

}

@media screen and (max-width: 768px) {
    ul.navi_unten li {
    display: block;
    }
}

/**************** Drucklayout START ******************/

@media print {
  h1,
  h2 {
    font-size: 110%;
    color: rgb(85,99,145);
  }

  #container {
    border: none;
  }

  #navi_oben {
    border-bottom: none;
  }

  ul.ul_navi_oben {
    display: none;
  }

  .csc-textpic-intext-right-nowrap .csc-textpic-text {
    float: none;
    width: 100%;
  }

  .csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
    float: none;
    width: 100%;
  }

  #mainContent {
    background: none;
    padding: 30px 0 30px 0;
  }

  #mainContent ul li:before {
    content: "-";
  }

  #mainContent p.bodytext {
    font-size: 80%;
  }

  #head img {
    margin-left: 0;
  }

  #footer {
    display: none;
  }
}