/* CSS Document */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}
@-ms-viewport {
                width: device-width;
                zoom: 1;
}
@-o-viewport {
                width: device-width;
                zoom: 1;
}
/@-viewport {
                width: device-width;
                zoom: 1;
}
/*alle Default-Margin und -padding-Werte werden aufgehoben*/
*           {   margin: 0px;
                padding: 0px;
}
/*Sonderschrift für die Premium-Beef-Seite: extra.php, class:extra*/
@font-face {
              font-family: Gipsiero Kraxced;
              src: url(../fonts/Gipsiero Kraxced.otf) format(opentype);
}
@font-face {
              font-family: Gipsiero;
              src: url(../fonts/Gipsiero.otf) format(opentype);
}
   
/* ----------------------------------------------------------------------------- * 
 *                          Basis-Layout                          *
 * ----------------------------------------------------------------------------- */
body {
	              font-family: Verdana;
                /*Basis-Schriftgröße 10px*/
	              font-size: 62.5%;
	              color: #004a79;
                
                /*automatische Silbentrennung*/
                lang: de;
                -moz-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
                word-wrap: break-word; 
}

h1 {
	              font-weight: bold;
	              font-size: 1.8em;
                margin-top: 0.5em;
	              margin-left: 1%;
                margin-right: 1%;
                line-height: 1.2em;
}
h2 {
	              font-size: 1.6em;
                margin-top: 0.5em; 
	              margin-left: 1%;
                margin-right: 1%;
                line-height: 1.2em;
}

h3 {
	              font-size: 1.4em;
                margin-top: 0.5em;
	              margin-left: 1%;
                margin-right: 1%;
}

hr {
                border-color: #004a79;
                margin: 1em  1% 0 1%;
}


.b    {
                font-weight: bold;
}
.clear  {
                clear: both;
                height: 0;
        }
/*verhindert Spaltenumbruch innerhalb eines Absatzes*/
.block  {
                display: inline-block;
} 
/*Link für Informationen, auf die in der Smartphone-Version auf eine andere Seite verlinkt wird*/
/*und die in der Desktop-Version auf der angezeigten Seite stehen, Bsp: Firmenstruktur auf Unternehmensseite*/
a.ext  {
                  display: block;
                  font-size: 1.5em;
                  font-weight: bold;
}
/*auf dem Smartphone hat der Header kein Hintergrundbild*/
header {
                width: 100%;
	              text-align: center;
}
/*Slogan*/
header p {
                display: block;
                font-style: normal;
	              font-variant: normal;
	              font-weight: bold;
	              font-size: 1.2em;
	              margin-top: 0.5em;
 }
 /*Logo*/
header img  {
                display: block;
                margin: 0 auto;
                width: 10%;
}

/* ----------------------------------------------------------------------------- * 
 *                          Styles für Multi-Toggle-Nav                          *
 * ----------------------------------------------------------------------------- */

/* Menü-Link im Header zum Ein-und Ausblenden des Menüs */
/*über Java-Script am Ende jeder Seite eingebunden*/
a.toggle-nav {
  display: inline-block;
  position: absolute;
  right: 2%;
  top: 0em;
  cursor: pointer;
  padding: 0.357em;
  
}

a.toggle-nav img {
    width: 100%;
}

 
/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
/* Positionierung der Navigation "auf" dem Hauptinhalt, damit das Untermenu nicht verdeckt wird. */
#menu1 {
    overflow: inherit; 
    position: relative;  
    z-index: 12;
    width: 100%;
}  
.main { 
    z-index: 20; 
}
#menu1 ul {
  position: relative; 
  margin: 0;
  padding: 0; 
  width: 100%;
  display: block;
  list-style: none;
}

/* Layout und Positionierung der 2. Menüebene */
#menu1 ul ul {
    position: absolute; 
    z-index: 30; 
    display: none;
    
}
#menu1 ul .openmenu ul {
    position: relative;
    display: block; 
    
}
#menu1 ul li {
  position: relative; 
  width: 100%;
  height: 3em;
  text-align: center;
  border-bottom: 0.1em solid #004a79;
}
#menu1 ul li ul li {
    float: none;
    margin: 0;
    
}
#menu1 ul > li > a  {
    padding: 0.8em;
    display: block;
    color: #004A79;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
}

#menu1 ul li ul li a {
    display: block;
    background-color: #336699;
    color: #FFF;
    border-top: 0.1em solid #FFF;
}

#menu1 ul li:hover {
    background-color: #CCC;
    color: #004A79;
}
/*menu1 wird nur verborgen, wenn  Javascript aktiviert ist*/
.js-on #menu1 {
    display: none;
}
#menu1 ul li:hover ul {
    display: block;
}  



/*----------------------------------------------------------------------------------*/

 /*Menu mit Buttons*/
 /*unter Viewport <625px wird Buttonmenu in drei Spalten, zweizeilig angezeigt*/
#menu2  {
                display: block;
                width: 100%;
                margin-top: 2em;
                z-index: 10;
}
#menu2 .column {
                text-align: center;
                -moz-column-count: 3;
                -moz-column-gap: 0;
                -moz-column-width: 33%; 
                -webkit-column-count: 3;
                -webkit-column-gap: 0;
                -webkit-column-width: 33%;
                column-count: 3;
                column-gap: 0;
                column-width: 33%;
}
#menu2 p      {
                margin-bottom: 0.8em;
}      
#menu2 .button       {
	              -webkit-box-shadow: 2px 2px 5px 0px #666666;
	              box-shadow: 2px 2px 5px 0px #666666;
	              border-radius: 4px;
                border: 0.1em solid #fff;
  }
#menu2  img   {
                margin: 0 auto;
                height: auto; 
                width: 75%;
                
  }
/*----------------------------------------------------------------------------------*/
/*Sidebar*/
aside {
	           width: 100%;
	           display: block;
	           margin-top: 1.5em;
}
/*wenn Sidebar auf kleinen Bildschirmen nicht angezeigt werden soll*/
aside.hidefirst  {
             display: none;
}

aside p  {
              margin: 1.953125% 1% 0  1%;
              font-size: 1.2em;
              line-height: 1.5em;
}
/*Bildunterschriften bei Personenfotos*/
aside p.centr {
                   margin-left: 0.48828125000000%;
                   line-height: 1.2em;
}

aside img  {
                width: 25%;
                margin: 0.97656250000000% 0 0 1%; 
}
aside  a img{
	               text-decoration: none;
                 margin: 0.8em 1%;
	               -webkit-box-shadow: 2px 2px 5px #666666;
	               box-shadow: 2px 2px 5px #666666;
	               width: 75%;
}
/*Bilder, die als Bild bereits Schatten haben, z.B. Facebook-Button*/
aside  a img.shad{
	               text-decoration: none;
                 margin: 0.8em auto;
                  -webkit-box-shadow: none;
	               box-shadow: none;
	               width: 75%;
               
}
/*Anzeige der Logos der verbundenen Firmen*/

aside p.centr img { 
                  width: 66.6%;
}
aside p a  {
                color: #004a79;
                font-size: 1.2em;
                font-weight: bold;
                
}

aside a:visited  {
                color: #004a79;
                 
}
/*um gepunkteten Rahmen um Linkbutton zu verhindern*/
aside a:focus {
                outline: none;
}
aside ul  {
                
}
aside ul li {   
                float: left;
                display: block;
                width: 25%;
                margin: 0 2em 0 -1em;
                text-decoration: none;
}
aside ul li img  {
                width: 100%;
}
/*für die Sidebar der Premium-Beef-Seite*/
aside.extra   {   
                  text-align: center;               
                  background-image: url(../Bilder/holzwand2.jpg);
                  color: #fac47f;
                  height: 100%;
}
aside.extra img {
                  margin-top: 0;
} 
/*----------------------------------------------------------------------------------*/
/*section*/
#content {
	          width: 100%;
	          margin: 1.5em auto 0 auto; 
	          display: block;
            z-index: 100;
}
/*im Basis-Layout 1-spaltig*/
#content .column  {
            margin-top: 1.5%;
            -moz-column-count: 1;
            -webkit-column-count: 1;
            column-count: 1;
}                
#content p { 
              margin: 1.5%  1%;
              font-size: 1.4em; 
              line-height: 1.5em;
}
/*Personenfotos und Anzeige von Bildern auf eigener Seite, auch bei Buchanzeigen*/
#content p.pers {
              margin: 2% 1%;
              text-align: center;
}
#content p.pers img {
              width: 75%;
}
/*Link zur Literaturseite*/
#content p.big  {
              margin-top: 1em;
              margin-bottom: 1em;
              font-size: 1.8em;
}
/*längere Aufzählungspassagen in den Beiträgen*/
#content p.aufz {
              margin-left: 3.5%;
}
#content h1.aktion  {
              text-align: center;
              font-size: 3em;
              color: #c6a554;
}
#content .bild  { 
                margin-top: 1%;
                width: 100%; 
}

#content a  {
              color: #004a79;
}
#content a:visited  {
              color: #004a79; 
}      
#content .button       {
	              -webkit-box-shadow: 2px 2px 5px 0px #666666;
	              box-shadow: 2px 2px 5px 0px #666666;
	              border-radius: 4px;
                width: 100%;
                border: 0.1em solid #fff;
                margin: 0 1%;
  }
/*mehrere Buttons nebeneinander, z.B. Anmelden Shop  */
#content .button_list       {
                float: left;
	              -webkit-box-shadow: 2px 2px 5px 0px #666666;
	              box-shadow: 2px 2px 5px 0px #666666;
	              border-radius: 4px;
                width: 40%;
                border: 0.1em solid #fff;
                margin: 0 5%;
}
#content img.logo {
                  float: left;  
                  /*margin-top: -1%;*/
                  margin-right: 4%;
                  margin-bottom: 2%;
                  width: 25%;
                  -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                box-shadow: 2px 2px 5px 0px #666666;
	                border-radius: 4px;
                  border: 0.1em solid #ffffff;
 }
 /*Für Texte, in denen in der Tablet- bzw. Desktop-Version die Abbildungen von Text umflossen werden  - hier Abbildung zentriert in der entsprechenden Größe*/
#content img.re {
                width: 35%;
                margin: 1% 1.5% 1% 1.5%; 
              }
#content img.re70 {

                width: 70%;
                margin: 1% 1.5% 1% 0; 
              }
#content img.re15 {

                width: 15%;
                margin: 2% 5% 1% 5%; 
              }
#content img.li {

                width: 25%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li15 {

                width: 15%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li70 {

                width: 70%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li100 {

                width: 100%;
                margin:  1% 2.5% 1% 0;
              }
/*animiertes Bild */
#content img.anim {
                  width: 100%;
                  border: 0.1em solid #004a79;
}
/*Bildunterschrift z.B. Foot-Image Wein der Woche, Copyright, z.B. wenn Winzer Foto von seiner Website für uns freigegeben hat*/
#content p.copyright  {
                text-align: left;
                margin-left: 0;
                font-size: 1em;
}

/*Kasten, in dem Nachrichtenanreißer aus der DB ausgelesen werden*/
#content div.nachr  {
                    display: block;
                    width:95%;
                    border: 0.1em solid;
                    margin: 0 1.46484375%;
                    padding: 2%;
                  }
#content div.nachr p             {
                    width: 98%;
                    line-height: 1.5em;
                  }
                                  
#content div.nachr img.li {
                float: left;
	              width: 30%;
                margin: 0.5 1.5% 1% 0;
}
#content div.nachr img.re {
                float: right;
	              width: 45%;
                margin: 0.5 1.5% 1% 0;
}
/*Darstellung Weinflasche beim Wein der Woche*/
#content div.nachr2 img.thumb {
                float: right;
                width: 25%;
                margin-top: 5%;
	              margin-right: 10%; 
}
/*anderes Bild als Weinflasche beim Wein der Woche, z.B., wenn ein Weingut dargestellt wird*/ 
#content div.nachr img.thumbdiff {
                float: right;
                width: 45%;
                margin-top: 2%;
	              margin-right: 5%; 
}                                                    

#content div.nachr img.logo {
                  float: right;
                  margin-top: -1%;
                  margin-right: 4%;
                  margin-bottom: 2%;
                  width: 30%;
                  -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                box-shadow: 2px 2px 5px 0px #666666;
	                border-radius: 4px;
                  border: 0.1em solid #ffffff;
 }
/*Weiterlesen-Link*/
#content div.nachr a.continue { 
                  font-size: 1.2em;
                  font-weight: bold;
                  
}
/*animiertes Bild - z.B. Cremona-Angebot der  Woche*/
#content div.nachr img.anim {
                  width: 100%;
                  border: 0.1em solid #004a79;
}
/*Nachrichtenanreißer mit eigenem Hintergrund*/
#content div.nachr1          {                   
                  background-image: url(../Bilder/holzwand2.jpg);
                  margin-left: 0.9%;
                  padding-top: 1%;
                  color: #fac47f;
                  
                  
}
#content div.nachr1 a        {
                  color: #fac47f;
                  font-size: 1.8em;
}
#content div.nachr1 a:visited {
                  color: #fac47f;
}
#content div.nachr1 a:hover    {
                  color: #fac47f;
}
#content div.nachr1 h1         {
                  font-size: 3em;
                  font-family: Georgia;
                  text-transform: uppercase;
}
#content div.nachr1 h2         {
                  font-size: 2em;
                  font-family: Georgia;
                  text-transform: uppercase;
}
#content div.nachr1 h3         {
                  font-size: 2em;
                  font-weight: normal;
                  text-transform: uppercase;
}
/*2. Nachrichtenanreißer mit eigenem Hintergrund*/
#content div.nachr2           {
                   background-image: url(../Bilder/Sternenhintergrund.jpg);
                   background-repeat: repeat;
                   
                  /*background-size: 100%;  */
                   border: 0.1em solid #004a79;
                   
}
/*für Angebotsvorschauen auf den Einzelseiten */
#content div.ang  {
                    width:95%;
                    text-align: left;
                    border: 0.1em solid;
                    margin: 0 1.46484375%;
                    z-index: 400;
                    
}
/*für verschiedene Angebote mit Hintergrundbild */
#content div.BG {
                    background-image: url(../Bilder/Angebote/Holzwand.jpg); 
                    background-repeat: no-repeat; 
                    background-size: 100%;
}
#content div.BG2 {
                    background-image: url(../Bilder/Angebote/swissgourmet.jpg);
                    background-repeat: no-repeat; 
                    background-size: 100%; 
}
#content div.BG3 {
                    background-image: url(../Bilder/WeihnBG1.png);
                    background-repeat: no-repeat; 
                    background-size: 100%;
                    /*background-position: left bottom;*/   
}
/*Formatierungen für Gestaltung von Angebotskästen*/
#content div.ang h1  {
                      text-align: right;
                      font-size: 2.8em;
                      font-weight: bold;
                      
} 
#content div.ang h2  {
                      font-size: 2.4em;
} 
#content div.ang p.ganz  {
                       width: 100%;
} 

#content div.ang p.right  {
                     
                    text-align:right;
                    margin-top: 3%;
                    margin-right: 2.58899676375405%;
                    font-size: 1.8em;
                    font-weight: bold;
}

#content div.ang p.right_kl  {
                    
                    text-align:right;
                    margin-right: 2.58899676375405%; 
                    font-size: 1.2em;
                    
                    
} 
#content div.ang img  {
                    width: 25%;
                    margin: 1.5% 1%;
                    border: 0.1em solid #004a79;

}
#content div.ang img.logo { 
                    margin: 2% 1%;
                    -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                   box-shadow: 2px 2px 5px 0px #666666;
	                   border-radius: 4px;
                     /*border-color in der Weihnachtszeit*/
                    border: 0.1em solid #c9b95a;
}
/*anpassbare Schriftfarben für besondere Angebote*/
#content div.ang.sonder {
                    font-family: Times New Roman;
                    font-style: italic;
                    color: #c6a554;
                    padding: 3%;
}
#content div.ang.sonder a{
                    
                    font-style: italic;
                    font-weight: bold;
                    font-size: 2.5em;
                    line-height: 1.5em;
                    color: #c6a554;
                    
}
#content div.ang.sonder a:visited{
                    font-style: italic;
                    color: #c6a554;
}
#content div.box  {
                    float: left;
                    width: 40%;
                    border: 0.2em solid #004a79;
                    margin: 1% 2% 1% 1%;
                    padding: 1%;
                    
}
#content div.box img  {
                    float: left;
                    width: 50%;
                    margin-right: 2%;
}

.sonder {
                    font-style: italic;
                    color: #c6a554;
}

/*border-collapse: auch in kleinen  Viewports wird border angezeigt*/
#content table  {
                  margin: 1% 1%;
                  border-collapse: collapse;
}
/*Tabelle der Firmenstruktur wird nur in Desktop-Version angezeigt, sonst über Link von Unternehmensseite auf eigene Seite*/
#content table.desk  {
                  display: none;
                    
}
/*hier wird in der Smartphoneversion auf eine eigene Seite weitergeleitet. Der Inhalt ist in der Desktopversion auf der Seite selbst sichtbar*/
#content a.ext  {
                  display: block;

}
#content table.smart  {
                  display: block;
                  width: 100%;
}
#content table.smart tr {
                   border: dotted 1px;
}
#content tr {
                  border: dotted 1px;
}
#content td   {
                  width: 14.285714%; 
                  text-align: center;
}

/*Höhe der Zellen mit den Firmenteilen*/
.max  {
                  height: 5.4em;
                  display:table-cell;
                  vertical-align: middle;
}
/*Zeitpläne bei Seminaren*/
#content table.sem  {
                  margin: 1%;
}
#content table.sem tr {
                    border: hidden;
}
#content table.sem td {
                    width: auto;
                    text-align: left;
                    padding-left: 1%;
                    padding-right: 1%;
                    border: hidden;
}

#content ul          {
                      width: 100%;
                      /*float: left;
                      left: 50%; */
                      margin-top: 2.24609375000000%;
                      margin-left: 1%;
                      font-size: 1em;
                      /*font-weight: bold;  */
                      line-height: 1.5em;
                       
} 
/*nur für Buttons - width 23%, wenn 4 Buttons nebeneinander passen sollen*/
#content ul li     {
                    width: 25%;
                    float: left;
                    right: 50%; 
                    margin-right: 20%;
                    margin-bottom: 0.5em;
	                  list-style-type: none; 
                    
} 
                
#content ul li img   {
                      width: 100%;
                      -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                    box-shadow: 2px 2px 5px 0px #666666;
	                    border-radius: 4px;
                      border: 0.1em solid #ffffff;
                  }
#content ul.no-col {
                      
                      margin-left: 35%;
 }                    
                  
#content ul.no-col li {
                      float: none;
                      width: 85%;
                      text-align: left;
                      font-size: 1.2em;
                      line-height: 1.2em;
                      list-style-type: square;
}

.bild-klein      {
                  float: right;
                  margin: 5px 200px 0px 0px;
                  width: 15%; 
}
/*Aufzählungen auf der Bewerbungsseite*/
#content table ul.bew {
                  width: 100%;
                  
}
#content table ul.bew li {
                  
                  width: 85%;
                  
                  right: 50%; 
                  margin-right: 50%;
                  /*text-align: left; */
                  list-style-type: none;
                  font-size: 1.2em;
                  
}

#content ol.sem1  {
                  font-size: 1.2em;
                  line-height: 1.5em;
                  margin-left: 2%;
}
#content ul.sem2  {
                  font-size: 1.2em;
                  margin-top: 1%;
                  margin-bottom: 1%;

}
#content ul.sem2 li  {
                  width: 100%;
                  margin-top: 1.5%;
                  margin-left: 10%;
                  list-style-type: disc;
                  clear: both;

}

/*Literaturseite*/
#content h2.lit  {
                  font-style: italic;
                  line-height: 1.5em;
}
#content.extra  {
                  background-image: url(../Bilder/holzwand2.jpg);
                  margin-left: 0.9%;
                  padding-top: 1%;
                  color: #fac47f;
                  
}
#content.extra h1 {
                  font-size: 3em;
                  font-family: Georgia;
                  text-transform: uppercase;
}
#content.extra h2 {
                  font-size: 2.2em;
                  font-family: Georgia;
                  text-transform: uppercase;
}
#content.extra h3 {
                  font-size: 2.2em;
                  font-weight: normal;
                  text-transform: uppercase;
}
#content.extra a  {
                  color: #fac47f;
}
#content.extra a:visited  {
                  color: #fac47f;
}
#content.extra a:hover  {
                  color: #fac47f;
}
/*anstelle von Banner, wenn Video unter News*/
#content #movi   {
          width: 96%;
          margin: 1%;
}
#content #movi.responsive-video iframe  {
          position: absolute;
          margin: 1%;
          width: 100%;
          height: 100%;
}
.responsive-video {
          position: relative;
          padding-bottom: 44,27%; /* Default for 832x372 videos */
          padding-top: 0px;
          height: 0;
          overflow: hidden;
}

#content #movi p {
          text-align: right;
          margin-top: 0;
          margin-right: -1.5%;
          font-size: 1em;
          font-weight: bold;
}
#content #movi a {
          color: #004a79;
}
#content #movi a:visited {
          color: #004a79;
}
/*Überschrift Partner-Weingut*/
/*#content img.weingut_title {
          width: 95%;
          margin: 2% 1% 2% 1%;  */
          
          
}
/*----------------------------------------------------------------------------------*/
/*Banner auf der Startseite, wird auf Smartphone nicht angezeigt*/
#content #banner {
          display: none;  
}
/*anstelle von Banner*/
#movi video  {
          width: 96%;
          margin: 1%;
}


#movi p {
          margin: 1%;
          font-size: 1.8em;
          font-weight: bold;
}
#movi a {
          color: #004a79;
}
#movi a:visited {
          color: #004a79;
}

/*Nachrichtenanreißer auf der Startseite*/
#news {
	          width: 100%;
            margin: 2.24609375000000% auto 0 auto;
	          display: block;
                      
}
#news h1.extra  {
            font-family: Georgia;
            font-size: 2.5em;
            color: #31492a;

}


#news p {
	         margin-left: 1%;
           font-size: 1.4em;
           line-height: 1.5em;
           
}
#news img {
	           width: 100%;
             margin: 1em auto;
             /*border: 0.1em solid #004a79;  */
}
#news video {
	           width: 100%;
             
             margin: 1em auto;
}

#news img.logo  { 
                  
                  width: 40%;
                  -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                box-shadow: 2px 2px 5px 0px #666666;
	                border-radius: 4px;
                  'border: 0.1em solid #ffffff;
                  float: left;
}
#news ul          {
                      width: 100%;
                      float: left;
                      margin-top: 2.24609375000000%;
                      margin-left: -5%; 
} 
/*width 23%, damit 4 Buttons nebeneinander passen*/
#news ul li     {
                    width: 23%;
                    float: left;
                    margin-right: 2%;
	                  list-style-type: none; 
                    
} 
                
#news ul li img   {
                      width: 75%;
                      -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                    box-shadow: 2px 2px 5px 0px #666666;
	                    border-radius: 4px;
                      border: 0.1em solid #ffffff;
                  }


#news img.bild  { float: left;
                  width: 300px;
                  margin: 10px 0px 0px 5px;
}

#news p.aktion  { float: right;
                  width: 61%;
                  margin-right: 5px;
                  font-size: 1em;
                   
}
/*bei größeren Monitoren  größere Schrift und fett*/
#news table td   {
                  padding: 1%;
                  font-size: 1em;
                  vertical-align: bottom;
}
/*wenn die Banner oder Marktberichts-Buttons ausserhalb der news-section aufgeführt werden*/
#logo {
	          width: 100%;
            margin: 2.24609375000000% auto 0 auto;
	          display: block;
                      
}

#logo ul          {
                      width: 100%;
                      float: left;
                      margin-top: 2.24609375000000%;
                      margin-left: 1%; 
} 
/*width 23%, damit 4 Buttons nebeneinander passen*/
#logo ul li     {
                    width: 30%;
                    float: left;
                    margin-right: 2%;
	                  list-style-type: none; 
                    
} 
                
#logo ul li img   {
                      width: 100%;
                      -webkit-box-shadow: 2px 2px 5px 0px #666666;
	                    box-shadow: 2px 2px 5px 0px #666666;
	                    border-radius: 4px;
                      border: 0.1em solid #ffffff;
                  }




#nachr          {
                  background-color: #d4e1f1;
                  margin: 0 0.9%;
                  
}

.nachr1          {                   
                  background-image: url(../Bilder/holzwand2.jpg);
                  margin-left: 0.9%;
                  padding-top: 1%;
                  color: #fac47f;
                  
                  
}
.nachr1 a        {
                  color: #fac47f;
                  font-size: 2em;
}
.nachr1 a:visited {
                  color: #fac47f;
}
.nachr1 a:hover    {
                  color: #fac47f;
}
.nachr1 a.continue   {
                  color: #fac47f;
                  font-size: 2.5em;
}
.nachr1 a.continue:hover   {
                  color: #fac47f;
                  font-size: 2.5em;
}
.nachr1 a.continue:visited   {
                  color: #fac47f;
                  font-size: 2.5em;
}
.nachr1 h1         {
                  font-size: 3em;
                  font-family: Georgia;
                  text-transform: uppercase;
}
.nachr1 h2         {
                  font-size: 2em;
                  font-family: Georgia;
                  text-transform: uppercase;
}
.nachr1 h3         {
                  font-size: 2em;
                  font-weight: normal;
                  text-transform: uppercase;
}


/*Überschrift Partner-Weingut auf weingut.php*/
#content img.weingut_title {
          width: 40%;
          margin: 2% 1% 2% 1%;
          }
/*----------------------------------------------------------------------------------*/
/*für content über die gesamte Seitenbreite ohne Sidebar: z.B. Angebotsseite,  Tabelle für Kontaktseite*/
#contentganz  {
       width: 100%;
       font-size: 1.4em;
       line-height: 1.5em;
}
#contentganz .col  {
              margin: 1.5% 1% 2% 1%;
              -moz-column-count: 1;
              -webkit-column-count: 1;
              column-count: 1;
} 
#contentganz p  {
              margin: 1.5% 1% 0 1%;
} 
#contentganz ol   {
            width: 95%;
            margin-left: 2em;
            padding: 0 1%;
            font-size: 0.9em;
            line-height: 1.5em;
}               
#contentganz .col ol   {
            width: 95%;
            margin-left: 2em;
            padding: 0 1%;
            font-size: 0.9em;
            line-height: 1.5em;
} 
#contentganz .col ol li  {
          margin-bottom: 2%;
} 
#contentganz ul.no-col {
                      
                      margin-left: 10%;
 }                    
                  
#contentganz ul.no-col li {
                      float: none;
                      width: 85%;
                      height: 1.3em;
                      text-align: left;
                      font-size: 1em;
                      font-weight: normal;
                      list-style-type: square;
}
#contentganz img  {
        width: 100%;
} 
#contentganz .anzeige  {
              margin: 1.5% 1% 0 1%;
              padding: 0 1em 0 1em;
              border: 0.1em solid #004a79;
              font-weight: bold;
}
/*auf der Kontaktseite wird unterhalb Desktop-Version die Tabelle ausgeblendet, stattdessen werden die einzelnen Kontaktabschnitte in p-Tags eingebunden*/
#contentganz table  {
              display: none;
}
#contentganz p.kont {
              margin: 2% 0 -1% 5%;
              font-size: 1.2em; 
              line-height: 1.5em;
}
/*Thumbnails der Angebotsprospekte*/
#contentganz .angvorschau {
	            /*float: left;  */
              width: 80%;
              height: auto;  
              margin: 1% 1% 1% 1%;
              -webkit-box-shadow: 2px 2px 5px #666666;
	            box-shadow: 2px 2px 5px #666666;
}
#contentganz .link       {
	              -webkit-box-shadow: 2px 2px 5px 0px #666666;
	              box-shadow: 2px 2px 5px 0px #666666;
	              border-radius: 4px;
                width: 15%;
                border: 0.1em solid #fff;
                margin: 0 1%;
  }



/*----------------------------------------------------------------------------------*/
footer {
                height: 7em; 
	              width: 100%;
                margin-top: 1em;
	              background-image: url(../Bilder/menubalken.png);
	              background-repeat: repeat;
                text-align: center;
	              color: #fff;
}
/*Liste wird durch float: left  und left (ul) und right (li): 50% zentriert*/
footer .menu_foot  ul  {
	              width: 100%; 
                float: left;
                left: 50%;
                padding: 1em;
}

footer .menu_foot  ul  li {
                  width: 19%;
	                float: left;
                  right: 50%;
	                list-style-type: none;
	                margin-left: 5%;
                  font-size: 1.2em;
                  font-weight: bold; 
}
footer .menu_foot ul li a {
	               color: #fff;
	               text-align: center;
	               display: block;
}
footer p {
	               text-align: center;
	               clear: both;
                  font-size: 0.9em;
                  line-height: 1.5em;
}
/*e-mail-link */
footer a {
                  color: #fff;
}
/*----------------------------------------------------------------------------------*/
/*Formular*/
.formular {
                  width: 90%;
                  margin-left: 1%;
                  font-size: 1.2em;
}
.zeile1   {
                  clear: both;
                  margin: 0 2%;
                  padding: 1% 2%;
                  font-size: 1.2em;
}
.label    {
                  float: left;
                  width: 25%;
                  text-align: left;
                  padding: 1%;
                  font-weight: bold;
}
.feld     {
                  float: right;
                  text-align: left;
                  width: 70%;
}
input     {
                  background-color: #99CCFF;
                  
}
input.x1  {
                  width: 75%;
}
.schaltflaeche  {
                  
                  width: 25%;
                  margin: 1% 5%;
}
.formbutton         {
                  float: right;
                  height: 3em;
                  font-weight: bold;
                  
}


 /* ----------------------------------------------------------------------------- *
 *  ab 625px Monitorbreite
 *  Header mit BG-Image
 *  Menu2 kleinere Buttons, einzeilig  
 * ----------------------------------------------------------------------------- */  
@media only screen and (min-width: 39em) {
#nix  {
}

header {                 
                background-repeat: no-repeat;
                /*um bei kleineren Bildschirmen das Verschieben des Hintergrundbildes gegenüber dem Logo zu verhindern*/
                background-size: 100%;
}
header p {
                font-size: 1.8em;
}
/*damit der Text unter dem Logo bei kleineren Bildschirmen nicht aus dem BG-img herausfällt - Originalgrößenverhältnis von Logo und Header-BG*/
header img  {
                margin: 0 auto;
                width: 7.19512%;
}
header.vlg {
                background-image: url(../Bilder/header_bg2.jpg);
}
/*cgro*/
header.cgro {
	             background-image: url(../Bilder/header_bg1.jpg);
}
/*Fleischwaren*/
header.flw {
		          background-image: url(../Bilder/header_bg3.jpg);
}
/*Cremona*/
header.crem{
		          background-image: url(../Bilder/header_bg4.jpg);
}
/*Piemonte*/
header.piem {
              background-image: url(../Bilder/header_bg5.jpg);
}
/*Button-Menu*/
/*ab Viewport >625px wird Buttonmenu einzeilig mit blauem Menubalken angezeigt*/
#menu2  {
                display: block;
                width: 100%;
                overflow: hidden;
                background-image: url(../Bilder/menubalken.png);
	              background-repeat: repeat-x;
                background-position: 0% 0%;
                -webkit-background-size: 100% 60%;
                -moz-background-size: 100% 60%;
                background-size: 100% 60%;
                z-index: 5;
}
#menu2 .column {
                width: 90%;
                margin: 1.5% auto 0 auto;
                -moz-column-count: 6;
                -moz-column-gap: 0;
                -moz-column-width: 12%; 
                -webkit-column-count: 6;
                -webkit-column-gap: 0;
                -webkit-column-width: 12%;
                column-count: 6;
                column-gap: 0;
                column-width: 12%;
}
#menu2  img  {
                width: 90%;  
                
}
aside {
	           display: block;
             width: 16%;
	           float: right;
}
aside.hidefirst  {
             display: block;
}


/*Bildunterschriften bei Personenfotos*/
aside p.centr {
                   margin: 0.48828125000000% 0 0  0.48828125000000%;
                   text-align: center;
}

aside img  {
                width: 100%;
                margin: 0.97656250000000% 0 0 0; 
}

aside a img {
                width: 100%;
}
/*Buchtitel auf Literatur-Startseite*/
aside a img.thumb {
                width: 50%;
}
aside p.centr img { 
                        width: 66.6%;
}
aside a  {
                color: #004a79;
                
}

aside a:visited  {
                color: #004a79;
                 
}
/*um gepunkteten Rahmen um Linkbutton zu verhindern*/
aside a:focus {
                          outline: none;
}
/*----------------------------------------------------------------------------------*/
/*section*/
#content {
	           width: 82%;
	           float: left;
	           display: block;
             z-index: 100;
             font-size: 1.2em;
}

/*ab Tablet-Größe 2-spaltig*/
#content .column  {
              -moz-column-count: 2;
              -moz-column-gap: 2.5em;
              
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-column-count: 2;
              -webkit-column-gap: 2.5em;
              
              column-count: 2;
              column-gap: 2.5em;
              
}

#content td   {
                  border: dotted 1px; 
                  text-align: center;
                  font-size: 1.2em;
                  
}
/*Für Abbildungen, die von Text umflossen werden - unterschiedliche Größe der Abbildung*/
#content img.re {
                float: right;
                width: 35%;
                margin: 2% 1.5% 1% 2%; 
              }
#content img.re70 {
                float: right;
                width: 70%;
                margin: 0 1.5% 2% 0;
                padding-left: 2%; 
              }
#content img.re50 {
                float: right;
                width: 50%;
                margin: 0 1.5% 1% 0; 
              }
#content img.re15 {
                float: right;
                width: 15%;
                margin: 1% 15% 1% 5%; 
              }
#content img.li {
                float: left;
                width: 35%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li15 {
                float: left;
                width: 15%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li70 {
                float: left;
                width: 70%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li100 {
                
                width: 100%;
                margin:  1% 2.5% 1% 0;
              }
#content img.li_orig {
                float: left;
                
                margin:  1% 2.5% 1% 0;
              }
/*Wein der Woche in der Liste*/
#content img.thumbnail   {
                float: right;
	              margin-right: 15%;
}
#content.extra  {
                width: 83%;
                
}                                 

/*Höhe der Zellen mit den Firmenteilen*/
.max  {
        height: 5.4em;
        display:table-cell;
        vertical-align: middle;
}
                

/*Banner auf der Startseite*/
#content #banner {
	               display: block;
                 height: 16em;
                 width: 98%;
                 margin:  1.5% 1.5% 2.5% 1.5%;
                 -webkit-box-shadow: 2px 2px 5px #666666;
	               box-shadow: 2px 2px 5px #666666;
                 padding-top: 3% ;
                 background-image: url(../Bilder/Weihnachten_Banner.png);
                 background-repeat: no-repeat;
}
#content #banner img {
                  width: 100%;
}


#content #banner h1  {
                  margin: 0% 5% 25% 30%;
                  /*color: #e65d00; */ 
                  font-size: 2.5em;
                  /*line-height: 1.5em;*/
                  text-align: center;
                }
#content #banner p {
                margin: 0 auto;
                font-size: 1.6em;
                line-height: 1.35em;
                font-weight: bold;
                font-style: italic;
                text-align: center;
}
#content #banner a       {
                color: black;
}
#content #banner a:visited {
                color: black;  
}
/*anstelle von Banner
#movi video  {
          width: 82%;
          float: left;
} */ 
/*für Bannergrafik, die über die ganze content-Spalte geht*/
.angbanner {
                  width: 98%;
                  -webkit-box-shadow: 2px 2px 5px #666666;
	                box-shadow: 2px 2px 5px #666666;
                  margin-top: 1.5%;
                  margin-left: 1%;
                  margin-right: 1%;
}
/*Nachrichtenanreißer auf der Startseite*/
#news {
	               float: left;
	               width: 82%;
                 margin: 2.24609375000000% auto 0 auto;
	               display: block;
                 font-size: 1.2em;
                  
                /*background-image: url(../Bilder/Holzwand.jpg);
                  background-repeat: no-repeat;
                  background-position: 0% 0%;
                  -webkit-background-size: 100%;
                  -moz-background-size: 100%;
                  background-size: 100%;*/
}

#news p {
	         width: 100%;
	         margin: 1.5% 3% 0 1%;
           
}
/*Bild Anreißer*/
#news img {
	           
	           width: 100%;
             margin-top: 1%;
	           margin-right: 0%;
             /*border: 0.1em solid #004a79; */
}
#news img.ganz {
	           
	           width: 99%;
             margin-left: 1%;
}
#news video {
	           float: right;
	           width: 45%;
             margin-top: 4%;
	           margin-right: 2%;
}


#news img.logo  { float: left;
                  margin: 1% 3% 0 1%;
                  width: 20%;
                  
                  
}
#news h1.bild   {
                 text-align: left;
                 margin-left: -10%;
                
                 
}
/*wenn Marktberichte oder Saarlandbuttons fehlen: z.B. Gabelmotive unten auf Startseite*/
#news img.ft {
           clear: both;
           width: 100%;
}
#news img.bild  { float: left;
                  width: 300px;
                  margin: 10px 0px 0px 5px;
}
#news table td   {
                  font-size: 1.5em;
                  font-weight: bold;
}
#logo {
	               float: left;
	               width: 82%;
                  margin: 2.24609375000000% auto 0 auto;
	               display: block;
}

#logo img.bild  { float: left;
                  width: 35%;
                  margin: 10px 0px 0px 5px;
}

/*------------------------------------------------------------------------------*/

/*ab Tablet-Größe 2-spaltig*/
#contentganz .col  {
              -moz-column-count: 2;
              -moz-column-gap: 2.5em;
              
              -webkit-column-count: 2;
              -webkit-column-gap: 2.5em;
              
              column-count: 2;
              column-gap: 2.5em;
              
}                
#contentganz  .left  {
      float: left;
      width: 45%;
      padding: 0 1%;
}
#contentganz  .right  {
      float: right;
      width: 45%;
      padding: 0 1%;
    
}
#contentganz .bottom  {
        clear: both;
        width: 100%;
}

#contentganz  h4  {
              font-size: 1.4em;
                     
}

                     

/*Thumbnails der Angebotsprospekte*/
/*hier muss das margin-left umd -bottom je nach anzahl der Angebotsvorschauen angepasst werden*/                        
#contentganz .angvorschau {
	             width: 11.7187%;
               margin: 0.97656% 5% 1.5% 5%;
              -webkit-box-shadow: 2px 2px 5px #666666;
	             box-shadow: 2px 2px 5px #666666;
}
/*Galeriethumbnails*/
#contentganz ul {
              list-style-type: none;
}
#contentganz ul li  {
              width: 18%;
              /*Höhe muss angegeben werden, da die Bilder unterschiedlich hoch sind*/
              height: 9.5em;
              float: left;
              margin:1%;
}


/*-----------------------------------------------*/


footer p {
	           
             font-size: 1.2em;
}
}

/* ----------------------------------------------------------------------------- *
 *  größere Monitore
 *  Header mit BG-Image (vorhergehender Breakpoint)
 *  Menu2 Button in Normalgröße mit Hovereffekt 
 * ----------------------------------------------------------------------------- */ 
@media only screen and (min-width: 60em) {
#nix  {
}
hr      {
                margin-top: 1.5em;
}
a.ext  {
                  display: none;

} 
#wrapper {
                display: block;
	              max-width: 1024px;
	              margin: 0 auto;
	              padding-left: 0px;
	              min-height: 100%;
}
 /* Menü-Link verstecken in großen Viewports */
a.toggle-nav {
        display: none;
    }
/*Unternehmensmenu*/
.js-on #menu1 {
                display: block;
                height: 3em; 
                margin-top: 2em;
                margin-bottom: 1.5em;
}
/*um das Menu zu zentrieren, werden ul und li auf position: relative, ul 55% (?) nach links und li 50% nach rechts gesetzt*/
#menu1 > ul {
                width: 100%;
                float: left;
                left: 52%;
}
#menu1 > ul > li {
	              width: 16%;
                float: left;
                right: 50%;
                text-align: center;
                border-right: 0.1em solid #004a79;
                /*der untere Rand des  Layouts für kleiners Viewports wird aufgehoben */
                border-bottom: none;
}
/*senkrechter Strich nicht neben dem letzten Menupunkt  */
#menu1 ul li:last-child  {
                border: hidden;   
}
#menu1 ul li a {
                /*width und height: 100%, damit der Link das gesamte li-Element ausfüllt*/
                width: 100%;
                height: 100%;
                padding-top: 0.5em;
                font-size: 1.2em;
                font-weight: bold;
}
/*Hover-Aufklappmenu*/
/*auf dieser Ebene wird nur noch der Hover-Effekt eingebaut (Einblenden des Untermenus schon im Basislayout) und die Schrift im Untermenu wieder vergrößert*/

#menu1 ul li a:hover {
                background-color: #ccc;
                color: #004a79;
}

#menu1 ul li ul {
	              display: none;
                position: absolute;   
}

#menu1 > ul > li > ul > li{
                height: 4em;
                /*der untere Rand des  Layouts für kleiners Viewports wird aufgehoben */ 
                border-bottom: none; 
                /*margin-top: 0.1em; */
}

#menu1 > ul > li > ul > li > a  {
	              display: block;
                width: 100%;
                height: 100%;
                padding-top: 0.7em;
                font-size: 1.2em;
                
}




/*Buttonmenu*/
#menu2 .column {
                width: 95%;
}
/*background-image, damit beim Hover-Effekt der gesamte Button blau hinterlegt ist*/
#menu2 p  {
                width: 95%;
                background-image: url(../Bilder/ButtonBG.png);
}

#menu2 a:hover  {  
                opacity: 0.8;
      }
/*background-image, um zu verhindern, dass bei Hover nur der Menubalken hellblau durchscheint*/
#menu2  img  {
                 width: 100%;
                 background-image: url(../Bilder/ButtonBG.png);
}
/*die tabelle mit der Firmenstruktur wird nur in der Desktopversion auf der Unternehmensseite angezeigt, dafür hier der Link zum Weiterleiten dahin nicht*/
#content table.desk  {
                       display: block;
                    
} 
#content a.ext  {
                  display: none;

} 

/*erst in der Desktop-Version wird die Tabelle (z.B. Kontakte) angezeigt.*/
#contentganz table  {                       
                    display: block;
                    width: 80%;
                    margin: 0 auto;
                    }
#contentganz td {
                    width: 25%;
                    vertical-align: top;
                    text-align: left;
                    /*empty-cells: hide;*/
}
/*dafür die Absätze, in denen vorher die Kontaktdaten aufgelistet werden, nicht mehr */
#contentganz p.kont {
                    display: none;
}                
}


/* ----------------------------------------------------------------------------- */