﻿html {
  scroll-behavior: smooth;
}

#colorbox, #cboxOverlay, #cboxWrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
}
#cboxOverlay {
	position:fixed;
	width:100%;
	height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
	clear:left;
}
#cboxContent {
	position:relative;
	overflow:visible;
}
#cboxLoadedContent {
	overflow:hidden;
}
#cboxLoadedContent iframe {
	display:block;
	width:100%;
	height:100%;
	border:0;
}
#cboxTitle {
	margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
	cursor:pointer;
}
#cboxOverlay {
	background:#000000;
}
#colorBox {
}
#cboxContent {
	background:#ffffff;
}
#cboxLoadedContent {
	background:#ffffff;
	padding:8px;
	margin-bottom:30px;
}
#cboxLoadingGraphic {
	background:url('grafiken/ajax.gif') center center no-repeat;
}
#cboxLoadingOverlay {
	background:#ffffff;
}
#cboxTitle {
	position:absolute;
	bottom:3px;
	left:0;
	text-align:center;
	width:100%;
	color:#000000;
}
#cboxCurrent {
	position:absolute;
	bottom:3px;
	left:200px;
	color:#000000;
}
#cboxSlideshow {
	position:absolute;
	bottom:3px;
	right:42px;
	color:#000000;
}
#cboxPrevious {
	position:absolute;
	bottom:3px;
	left:10px;
	color:#000000;
}
#cboxNext {
	position:absolute;
	bottom:3px;
	left:63px;
	color:#000000;
}
#cboxClose {
	position:absolute;
	bottom:3px;
	right:20px;
	display:block;
	color:#000000;
}

hr
{
  color: #dddddd;            /* IE 6 */
  background-color: #dddddd; /* Mozilla 1.4 */
  border: #dddddd;           /* Opera 7.11 */
  height: 1px;               /* in Opera für die Anzeige nötig, in Mozilla für die einheitliche Höhe */
}

img#stern4_1 { display:inline; }
img#stern4_2 { display:inline; }
img#stern4_3 { display:inline; }
img#stern4_4 { display:inline; }
img#stern4_5 { display:inline; }

#bestellung_senden_formular {
	border:solid 1px #BCB600;
	background-color:#FFFDBA;
	padding:8px;
}

.galerieansicht {
  border:1px solid #eeeeee;
  height:560px;
}

fieldset {
  padding:8px;
}

fieldset label legend {
  width:auto;
  text-align:left;
}

.logobg {
  background-color:#fff;
}

@media screen and (min-width:769px) {
    .logobg {
      background-color:#fff;
      background-image:url('../abbildungen/sadk_top_back_01a.jpg');
    }
}

@media screen and (max-width:768px) {
    .logobg {
      background-color:#fff;
      background-image:none;
    }
}

#oben {

}

#toplogo.s-12 {
  text-align:center;
}

.sektion_oben {
  padding-top:8px;
  padding-bottom:8px;
  
  border-top: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  
  background-color:#E8E6D5;
}

.sektion_mitte {
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  padding:8px;
}

.sektion_unten {
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 20px;
}

.gross
{
  font-size: 1.4rem;
  font-weight:bold;
}
.gross a:link, a:visited, a:hover, a:active
{
  text-decoration:none !important;
}

#zeile2container2 {
	text-align:right;	
    background-color: #fafafa;
}

@media screen and (min-width:900px) {
  #topinfo1 {
    display:block;
    visibility:visibile;
  }

  #topinfo2 {
    font-size:85%;
    color:#fff;
    text-align:right;
    display:block;
    visibility:visibile;
  }
  #zeile2container1 {
    display:block;
    visibility:visibile;
  }  
  
  #zeile2container2 {
	  text-align:right;
  } 
}

@media screen and (max-width:899px) {
  #topinfo1 {
    display:block;
    visibility:visibile;
  }

  #topinfo2 {
    font-size:85%;
    color:#fff;
    text-align:right;
    display:none;
    visibility:hidden;
  }
  #zeile2container1 {
    display:block;
    visibility:visibile;
  }

  #zeile2container2 {
	  text-align:right;
  } 
}

@media screen and (max-width:768px) {
  #topinfo1 {
    display:none;
    visibility:hidden;
  }

  #topinfo2 {
    font-size:80%;
    color:#fff;
    text-align:right;
    display:none;
    visibility:hidden;
  }
  #zeile2container1 {
    display:none;
    visibility:hidden;
  } 
  
  #zeile2container2 {
	  text-align:center;
  } 
  

}

.kleinresponsiv {
  font-size:80%;
}

.artikelkategorie {
  font-weight: bold;
  margin:0.2em 0 0.2em 0;
  background-color:#F3F2E9;
  padding:4px;
  border-left: 5px solid #CAC9C2;
  border-bottom: 1px dotted #CAC9C2;
}

.artikelkategoriedetails {
  font-weight: normal;
  margin:0.2em 0 0.2em 0;    
  padding:4px;
  border-left: 5px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
#obenzeile2 {
	padding-top:0.25em !important;
	padding-bottom:0.25em !important;
	color:#888;
	background-color: #F0F0F0;
}

#zeile2container1 {
	font-size:90%;
	font-weight:bold;
	font-style:italic;
}

.top-nav {
	/* background-color:#006400; */
	background-color:#008000;
	border-bottom:8px solid #fff;
}

}

/* --------------------------------------------- */
/*  Neuer Warenkorb                              */
/* --------------------------------------------- */
hr.warenkorb-hr {
    margin: 20px 0px;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border:0px solid #cccccc;
    border-top: 2px dotted #cccccc;
    background-color:transparent;      
}

.warenkorb-container {
    
}

.buttonoben {
	margin: 6px;
	background: #800000 none repeat scroll 0 0;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 0.85em;
	padding: 0.825em 1em;
	text-align: center;
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
}

.buttonoben:hover {
	background: #A00000 none repeat scroll 0 0;
}

.artikel-container {
    margin-top:10px;
}

.artikel-bild {
    float:left;
    text-align:center;
    width:20%;          
}

.artikel-bezeichnung {
    float:left;
    width:25%;
}

.artikel-einzelpreis {
    float:left;
    text-align:center;
    width:15%;
}

.artikel-menge {
    float:left;
    text-align:center;
    width:15%;
}

.artikel-loeschen {
    float:left;
    text-align:center;
    width:10%;
}

.artikel-gesamtpreis {
    float:left;
    text-align:right;
    width:15%;
}

.artikel-absenden-bild {
    float:left;
    text-align:center;
    width:20%;          
}

.artikel-absenden-bezeichnung {
    float:left;
    width:40%;
}

.artikel-absenden-einzelpreis {
    float:left;
    text-align:center;
    width:15%;
}

.artikel-absenden-menge {
    float:left;
    text-align:center;
    width:10%;
}

.artikel-absenden-gesamtpreis {
    float:left;
    text-align:right;
    width:15%;
}

.artikel-bilddatei {
    max-height:150px;
}

.artikel-preis {
    font-size:140%;
    font-weight:normal;
}

.artikel-preis-fett {
    font-size:140%;
    font-weight:bold;
}

.warenkorb-endsumme {
    font-size:140%;
    font-weight:bold;
}

.warenkorb-container:before, .spalten-bezeichnung:before, .artikel-container:before, 
.warenkorb-container:after, .spalten-bezeichnung:after, .artikel-container:after,
.warenkorb-textzeile:after {
    content: '';
    display: table;
}

.warenkorb-container:after, .spalten-bezeichnung:after, .artikel-container:after, .warenkorb-textzeile:after {
    clear: both;
}

.warenkorb-container, .spalten-bezeichnung, .artikel-container {
    zoom: 1;
}

.spalten-bezeichnung {
    background-color:#eeeeee;
}

.spalten-bezeichnung label {
    text-align:center;
    padding-bottom: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.warenkorb-textzeile {
  margin-top:10px;
}

.warenkorb-textzeile-links-l {
    width:80%;
    float:left;
    padding-left:10px;
    padding-right:10px;
}

.warenkorb-textzeile-links-r {
    width:80%;
    float:left;
    text-align:right;
}

.warenkorb-textzeile-links-m {
    width:80%;
    float:left;
    text-align:center;
}

.warenkorb-textzeile-rechts-l {
    width:20%;
    float:left;
}

.warenkorb-textzeile-rechts-r {
    width:20%;
    float:left;
    text-align:right;
}

.warenkorb-textzeile-rechts-m {
    width:20%;
    float:left;
    text-align:center;
}

.artikel-menge-aktualisieren-bild, .artikel-loeschen-bild {
width:18px;
vertical-align:middle;
}

@media screen and (max-width: 769px) {
  .warenkorb-container {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }

  .artikel-bild {
    float: right;
    width: auto;
  }
  .artikel-bild img {
    margin: 0 0 10px 10px;
  }

  .artikel-bezeichnung {
    float: none;
    margin-bottom: 10px;
    width: auto;
  }

  .artikel-einzelpreis {
    clear: both;
    width: 120px;
  }

  .artikel-menge {
    width: 120px;
  }
  
  .artikel-menge input {
    margin-left: 20px;
  }
      
  .artikel-loeschen {
    width: 60px;
  }

  .artikel-gesamtpreis {
    float: right;
    width: auto;
  }

  .artikel-absenden-bild {
    float: right;
    width: auto;
  }
  .artikel-absenden-bild img {
    margin: 0 0 10px 10px;
  }

  .artikel-absenden-bezeichnung {
    float: none;
    margin-bottom: 10px;
    width: auto;
  }

  .artikel-absenden-einzelpreis {
    clear: both;
    width: 120px;
  }

  .artikel-absenden-menge {
    width: 120px;
  }
  .artikel-absenden-menge input {
    margin-left: 20px;
  }
      
  .artikel-absenden-gesamtpreis {
    float: right;
    width: auto;
  }
  
  .warenkorb-textzeile-links-l {
      width:70%;
      float:left;
      padding-left:10px;
      padding-right:10px;
  }
  
  .warenkorb-textzeile-links-r {
      width:70%;
      float:left;
      text-align:right;
  }
  
  .warenkorb-textzeile-links-m {
      width:70%;
      float:left;
      text-align:center;
  }
  
  .warenkorb-textzeile-rechts-l {
      width:30%;
      float:left;
  }
  
  .warenkorb-textzeile-rechts-r {
      width:30%;
      float:left;
      text-align:right;
  }
  
  .warenkorb-textzeile-rechts-m {
      width:30%;
      float:left;
      text-align:center;
  }
          
}

@media screen and (max-width: 480px) {
    .artikel-einzelpreis-hinweis {
        font-size:80%;
    }
	
	.artikel-preis {
		font-size:100%;
		font-weight:normal;
	}

	.artikel-preis-fett {
		font-size:100%;
		font-weight:bold;
	}
	
	.artikel-bilddatei {
		max-height:100px;
	}
	
  .warenkorb-textzeile-links-l {
      width:50%;
      float:left;
      padding-left:10px;
      padding-right:10px;
  }
  
  .warenkorb-textzeile-links-r {
      width:50%;
      float:left;
      text-align:right;
  }
  
  .warenkorb-textzeile-links-m {
      width:50%;
      float:left;
      text-align:center;
  }
  
  .warenkorb-textzeile-rechts-l {
      width:50%;
      float:left;
  }
  
  .warenkorb-textzeile-rechts-r {
      width:50%;
      float:left;
      text-align:right;
  }
  
  .warenkorb-textzeile-rechts-m {
      width:50%;
      float:left;
      text-align:center;
  }
                
}

form > a > img:after {
 content: ' ';
 width: 100%;
 height: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 top: 0;
 z-index: 500;
 background-size: 200% 200%;
 background: linear-gradient(315deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 54%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 100%);
 animation: produktbildanimation 2s ease-in-out infinite;
}

@keyframes produktbildanimation {
 0% {
  background-position: 200%
 }
 100% {
  background-position: 0%
 }
}


div.normalansicht > a > img:after {
 background: linear-gradient(300deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 54%, rgba(255,255,255,0) 100%);
 background-size: 200% 200%;
 animation: gradient 3s ease-in-out infinite;
 content: ' ';
 width: 100%;
 height: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 top: 0;
 z-index: 500
}
@keyframes gradient {
 0% {
  background-position: 200%
 }
 100% {
  background-position: 0%
 }
}
