
<style>

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=376ae24a-bedd-44a6-895e-7eabd0c926b4");
    @font-face{
        font-family:"UniversLTW01-57Condense 723821";
        src:url("../Fonts/aefefc4e-9cb8-4e8e-8599-dda705456734.eot?#iefix");
        src:url("../Fonts/aefefc4e-9cb8-4e8e-8599-dda705456734.eot?#iefix") format("eot"),url("../Fonts/87512e82-56b3-4356-97ab-9cd7b2957e37.woff2") format("woff2"),url("../Fonts/1eaf27c0-f4de-4273-9f4c-1b3236ad2f3c.woff") format("woff"),url("../Fonts/9b913baf-b1f0-47d2-8c76-42f59650058f.ttf") format("truetype"),url("../Fonts/0abcce12-2274-4ee7-b6d5-0066b5f5f670.svg#0abcce12-2274-4ee7-b6d5-0066b5f5f670") format("svg");
    }
    @font-face{
        font-family:"UniversLTW01-57Condense 723818";
        src:url("../Fonts/6fc47523-fa84-47de-b974-533db32eacd8.eot?#iefix");
        src:url("../Fonts/6fc47523-fa84-47de-b974-533db32eacd8.eot?#iefix") format("eot"),url("../Fonts/142786d1-4a72-4273-9130-a80a339bd4e0.woff2") format("woff2"),url("../Fonts/34e6ea2e-62b2-49c9-b5e6-128fddfd9f6c.woff") format("woff"),url("../Fonts/01a871ba-586f-4d5e-8924-d4ec3b44f723.ttf") format("truetype"),url("../Fonts/5ebb44ef-5450-4b20-9612-66b2a127178b.svg#5ebb44ef-5450-4b20-9612-66b2a127178b") format("svg");
    }
    @font-face{
        font-family:"UniversLTW01-67BoldCn";
        src:url("../Fonts/076b8d7a-91b5-4c89-86a1-546b980072c7.eot?#iefix");
        src:url("../Fonts/076b8d7a-91b5-4c89-86a1-546b980072c7.eot?#iefix") format("eot"),url("../Fonts/6fac29ee-4085-4f88-bea6-47a93dd7d682.woff2") format("woff2"),url("../Fonts/21decb60-b395-4de2-bd04-e38eb2a56d2f.woff") format("woff"),url("../Fonts/091058d4-36b2-43f6-80d3-16c88e098061.ttf") format("truetype"),url("../Fonts/827d22bc-e38b-4ccf-8a21-1f9aaa76e402.svg#827d22bc-e38b-4ccf-8a21-1f9aaa76e402") format("svg");
    }



/*********************** STANDARDS ***********************/
html {
  height: 100.5%;
}

body {
  font-family: 'Work Sans', sans-serif;
  /*font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;*/
  color: #111111;
  font-size: calc(10px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
  background-image:url('../../bilder/sfn/SFN-Hintergrund-02.jpg');
  background-position: 0 0;
  background-size: 100%;
  background-attachment: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Versuch, Seite zu zentrieren */
  display: flex;
  justify-content: center;
}

a:link {
   text-decoration: none;
   color: #003282;
}

a:visited {
   text-decoration: none;
   /*color: #003282; color: #007784;*/
  color: #009999;
}

h1, h2 {
  font-size:1em;
  margin: 0 0 0 0.3em;
  font-style: normal;
  font-weight: normal;
}

h2 {
  color: #003282;
  margin:0;
}

h3, h4 {
  font-size: 1.0em;
  font-weight: normal;
}

button {
   text-align: center;
}

p {
    padding: 6px;
}

fieldset {
  background: #ffffff;
}

input {
	font-size: 0.8em;
}

label {
	width: 10%;
}

select {
	font-size: 0.8em;

}
/*Element {
  display: none;
}*/

.Mitte-verdammig {
  display: flex;
  justify-content: center;
  align-items: center;
}

#wrapper {
    width: 80%;
    /*border: 2px solid yellow;*/
    margin: 0 auto;
    background: #DCE3F7;
    height: 100%;

}

header, .nav-oben, section {
  display: block;
}

header {
  position:fixed !important; /* verhindert das Scrollen */
  top: 0px;
  background: #DCE3F7;
  z-index: 1;
  font-size:1em;
}
/* ***********************************************************************************************************************/
/* 11.11.22: verschiedene Menues (stat/mobil) => untersch. Verhalten. Wird abhängig gemacht von der Bildschirmaufloesung */
/* ***********************************************************************************************************************/
@media screen and (min-width: 1361px) { /* wenn mindestens 661 pix, dann Navi nebeneinander - scrollt nicht mit ... (## STAT ##) ---- GELB ---- */
  #wrapper {width:80%;}

  header {height:150px; width: 80%;}

  #content {
  margin-top: clamp(30px, 11% + 150px, 340px);

  /* 29vh; hier statisch, bei kleinerer Aufloesung wird auch nach "mobil" unterschieden (20.01.23) */
  /* clamp(30px, 11% + 150px, 340px) */
  padding-top: 0.05vh;
  position:relative;
  width:100%;
  padding-left: 0vh;
  margin-bottom: 9vh;

  /* background-color: yellow; */
  }
}

@media screen and (max-width: 1360px) { /* ... ansonsten wenn mehr, dann Klappmenue welches mitscrollt ("position") (## MOB ##)*/
  #wrapper {width:100%;}

  header {height:100px; width: 100%;}

  #content {
  /*padding-top: 0.05vh;*/
  margin-top: clamp(30px, 11% + 150px, 340px);
  position:relative;
  width:100%;
  padding-left: 0vh;
  /* background-color: magenta; */
  }

}

/* ***************************************************************************************************************************/

.banner {
  /* width: clamp(220px, 40% + 200px, 1100px);*/  /* Ja, Mathe ist moeglich :-). Am 15.11.22 rausgeschmissen */
  margin: -0.5em 0 1em 1em;
  border: 2px solid black;
  z-index:999;
  width:85%;
  min-width:200px;

  max-width:687px;
  }

.ganzhellblau {
  background-color: #dce3f7;
  margin-top: -0.5em;
  width: 100%;
}

.rfq-button {
  position: absolute;
  top: -1.1em;
  /*right:15vh;*/
  right:10vh;
  width: 21%;
  min-width:120px;
  max-width: 22%;
}

#navigation {
    float: left;
    height: 4em;
    width: 100%;
    z-index: 100;
    /*background: #FFCC33;*/
}


/* deaktiviert, da keine linke Navi
#leftcolumn {    float: left;    width: 0.0%;    margin-left: -100%;}                                   */

.slider-ueberschrift {
  font-size: 1.75em;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
  padding-top: -0.8em;
  margin-bottom: -0.8em;
}




.bild_suche {
   height: 60px;
   width: auto;
   margin: 3px;
   float: right;
   border: 1px solid darkgray;
}

.meldung {
   color:white;
   font-size:1.0em;
   text-align: center;
   margin-top:1.5em;
   background-color:#003282;
   padding:0.3em;
   width:99%;
   float: left;
}

.eingabefeld {
  width:100%;
  //height: 30%;
  // height: 3.8vh;
  border-bottom: 1px solid #000000;
  background-color: #b2c2e9;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  align: center;
  border-top: 1px solid black;


}
 .box2  {
   float: left;
   width: 38%;
   text-align: right;
}

.crystal-over{
    position: relative;
    display: flex;
    margin: 0px;
    padding: 0px;
    width: 100%;
    font-size:1.0em;
}

.ueberschrift-weiss-blau {
    color:#fff;
    position: relative;
    max-width: 97.8%;
    margin: 0.5%;
    padding: 0.5%;
    width:98.37%;
    float:left;
    border: 1px solid #000000!important;
    background-image: url("../../bilder/sfn/SFN-Hintergrund-03.jpg");
    background-size: 100%;
    background-color: #003282;
    font-size: 1.4em;
    text-shadow: 2px 2px 2px black;
}

.chemical-name{
    color:#fff;
    position: relative;
    margin: 0 0 0 0.2em;
    padding: 5px 0 3px 10px;
    font-size: 1.21em;
    background-color: #003282;
    width:calc(50% - 10px);
  /* width:(50% - 0em); */
    float:left;
    border-bottom: 1px solid #fff;
    flex:1;
}

.chemical-name a {
  color:#fff;
  text-decoration:none;
  position: relative;
  display: block;
  width: 100%;
}

.chemical-formula {
  color:#003282;
  flex:1;
  position: relative;
  margin: 0;
  padding: 5px 0 3px 10px;
  font-size: 1.21em;
  background-color: #b2c2e9;
  width:calc(49.5% - 19px);
  /* width:(50% - 0em); */



  float:left;
  border-bottom: 1px solid #fff;
}

.chemical-formula a {
  color:#003282;
}

.chemical-formula a:visited {
  color:#007784;
}

.chemical-formula a:active {
  color:#3BBEDF;
}

.images{
  height: auto;
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 3px;
  background-color: #e6ebfa;
  /*background-image: url("../bilder/sfn/SFN-Hintergrund-03.jpg");*/
  background-size: 100%;
  width:calc(100% - 6px);
  /* border-bottom: 3px solid #fff; */

}

.bild-produkt {
     display:block;
     min-height: 80px;
     max-height: 240px;

     /*height: clamp(400px, 50%, 800px);
     height: minmax (100px, 260px);*/

     /*width: auto;*/

     margin: 3px;
     float: right;
     border: 2px solid darkgray;
}

.bild {
  margin: 5px 5px 0 0;
  border: 1px solid darkgray;
}


.specification{
       /*display:block;
       position:relative;*/
       padding: 5px 5px 5px 5px;
       margin: 0;
       width:calc(50% - 20px);
       float:left;
       color:#003282;
       font-size: 1.25em;
       min-height:18px;
       font-style: bold;
      }

.ueb1 {
  font-size: 140%;
}

.ueb2 {
  padding-left: -1.0em;
}

.piezoe {
  padding-left: 0.5em;
}

/* wird in kristall_daten benoetigt */
.three{
  width: calc(33% - 5px);
  padding-right:5px;
  float:left;
}

/* Normale Zeilen: ganz hellblau */
.ChipChap {
  background-color: #dce3f7;
}

/* Jede zweite Zeile: hellblau */
.ChipChap:nth-child(2n) {
  background-color: #CDD7F4;
}

.zellabstand {padding-left: 0.5em;}

/* neu ab 07.11.22 (i_top und i_bottom) */
.rahmen {
  border: 4px ridge #b2c2e9;
  padding: 1.5vh;
  margin: 1.0vh;
}

.BnebenB {
  float: left;
  margin-right: 0.5em;
}

.langeweile {
  margin-left: 1.0em;
}

/* -------------- Buttongedoens ------------ */

.buttonClass {
padding: 0.2em 0.5em 0.2em 0.5em;
margin-bottom: 0.5em;
  font-size:1.2em;
  /* auskommentiert, weil fue die Lattice-Buttons viel zu breit (21.07.2022):	min-width:40%;
  height:1.7em;*/
  border-width:1px;
  color:#ffffff;
  border-color:#337fed;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #97c4fe;
  text-shadow:inset 0px 1px 0px #1570cd;
  background:linear-gradient(#003282, #1e62d0);

}

.buttonClass:link {
	//padding: 0.2em 0.5em 0.2em 0.5em;
  //background: linear-gradient(#1e62d0, #3d94f6);
  color:#ffffff;
}

.buttonClass:hover {
	//padding: 0.2em 0.5em 0.2em 0.5em;
  background: linear-gradient(#1E47ED, #3DB2F2);
  color:#ffff00;
}

.buttonClass:visited {
  color:#ffffff;
}

.buttonClass-active  {
padding: 0.2em 0.5em 0.2em 0.5em;
margin-bottom: 0.5em;
  font-size:1.2em;
  /* auskommentiert, weil fue die Lattice-Buttons viel zu breit (21.07.2022):	min-width:40%;
  height:1.7em;*/
  border-width:1px;
  color:#ffff00;
  border-color:#337fed;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #97c4fe;
  text-shadow:inset 0px 1px 0px #1570cd;
  background:linear-gradient(#003282, #1e62d0);
}

.buttonNav {
  position: fixed;
  text-align: right;
  right: 1.5vh;
  width: 6,5%;
  font-size: 0.95em;
  padding: 0.5em 0.8em 0.5em 0.5em;
  z-index: 909;
}

.buttonNavBack {
 color: #ffffff;
 top: 11vh;
}

.buttonNavTop {
 color: #ffffff;
 bottom: 3vh;
}

.abstand {
	margin-left:10%;
	margin-bottom:10px;

}

/* Formularzeugs */
.formtitel {
	width: 13.5em;
	float: left;
}

.inputklein {
	width: 5%;
}

.inputgross {
	width: 20%;
}


.invisible {visibility: hidden;}
.error {color: #FF0000;}


.star {
	font-size: 1.1em;
	color:#940303;
	padding: 0;
	margin: 0;

}

.starfield {
  border: 1px solid #940303;
  background-color: #dddddd;
}

.formNumberField {
  display: none;
}

.text-kleiner {
  font-size: 0.75em;
}

/* ****************************** ChipChap ohne Tabellenelemente (Galerien) **************** */
.tabulaCC {
   display: table;
   width:100%;
   border-spacing: 0;
}
.tabulaCC-row {
  display: table-row;
  background-color: none;
 }

.tabulaCC-row:nth-child(2n) {
 background-color: #CDD7F4;
 }

.tabula-row {
   background-color: none;
 }

.tabulaCC-cell {
  display: table-cell;
  vertical-align: middle;
  padding: 1.0em 1.5em 1.0em 1.0em;
 }

.tabulaCC-cell-stock {
 display: table-cell;
 vertical-align: middle;
 padding: 0.2em 0.5em 0.2em 0.2em;
 border: 1px solid black;
}

.gallery-crys {
  width:18.5%;
  /*min-height:30vh;*/
  background-color: #b2c2e9;
  border: 1px solid grey;
  margin:0.5em;
  padding:0.5em;
  list-style-type: none;
  float: left;

}

.crystalRequestInfoButton {
      text-align: right;
      background: #E6EBFA;
      margin: 0.1em;
      padding: 0.1em;
      padding-top: 0.6em;
}

.crystalExtras {
      text-align: right;
      background: #E6EBFA;
      margin: 2.1em;
      padding: 0.1em;
      padding-top: 0.6em;
}

.error {
  color: red;
}

/* ###################### anlaesslich 20 Jahre Jubi ########################### */
.jubel {
	height:4.5vh;
	font-size: 1.70em;
	font-weight: bold;
	color: white;
	text-align: center;
	text-shadow: 2px 2px 2px black, 2px -2px 2px black, -2px 2px 2px black, -2px -2px 2px black;

	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
  radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);

	padding: 0.3em 0 0.3em 0;
	margin: -.9em 0.23em 0.1em 0.23em;
	border: 4px ridge gold;
}
.jubelbild1 {
	width: 10%;
	height: auto;
	float: left;
	margin: -1.1em -1em -.9em 0;

}
.jubelbild2 {
	width: 9%;
	height: auto;
	margin-top: -1.3em;
	float: right;
	z-index: 0;
}


</style>
