@charset "utf-8";
/* CSS Document Günther Schinko - Standard */
  
  
    
 
   /*----------------------- BTN-Group -------------------------------- */
  .btn-group  {
      border: 1px solid green;
      padding: 5px 5px; /* Some padding */
      display: grid;							/* Buttons horizontal */
      grid-template-rows: 1fr;
      grid-template-columns: repeat(6, 1fr);
      gap: 1px 0px;
      width: 100%;
      height: 100%;
      /*grid-template-columns: repeat(4, 1fr);*/	/* 4 Buttons in einer Zeile der Gruppe möglich */
      /*grid-template-columns: repeat(4fr, 4fr); */
      gap: 5px;									/* Abstand zwischen den Buttons in der Gruppe */
      cursor: pointer; /* Pointer/hand icon */
      /*float: middle; */ /* Float the buttons side by side */
   }
       
   @media screen and (max-width: 768px) {
        .btn-group {
          grid-template-rows: 1fr;
      	  grid-template-columns: repeat(4, 1fr);
        }
   }
  
   @media screen and (max-width: 500px) {
        .btn-group {
          grid-template-rows: 1fr;
      	  grid-template-columns: repeat(3, 1fr);
        }
   }
   
  /* ----------------------------- BTN ------------------------------------- */  

  .btn  {
      /*border: 1px solid black;  */
      /*margin: 10px 24px; */ /* Some margin */
      cursor: pointer; /* Pointer/hand icon */
      /* border-radius: 12px; */ /* Rundung Buttons */
      /*float: middle; */ /* Float the buttons side by side */
   }
   
   /* ----------------------- BTN Style ----------------------------------- */
   
   /*------------------------ 3D Button ---------------------- */
   .my3d_btn {
	    color: #383838;				/* Farbe e5dc15 */
	    /* font-family: "Montserrat", sans-serif;  */
	    font-weight: 400;
	    text-transform: uppercase;
	    text-decoration: none;
	    margin: 1rem;
	    padding: 0.5rem;
	    border: 2px solid #EFEFEF;  /* Farbe  #e5dc15 */
	    border-radius: 0.5rem;
	    position: relative;
	    top: 0;
	    transition: all 300ms ease-in-out;
	    box-shadow: 0 0.6em #D0D0D0, 0 0.9em rgba(0, 0, 0, 0.4);  /* box shadow 0 0.6em #c2bb11, 0 0.9em rgba(0, 0, 0, 0.4  */
	}

  	.my3d_btn:hover {
	    background: #EFEFEF;		/* #e5dc15 */
	    color: #121212;				/*  #0e79b2 */
	    font-weight: 600;
	 }

  	.my3d_btn.b-1:hover {
	    top: 0.2em;
	    box-shadow: 0 0.4em #D0D0D0, 0 0.7em rgba(0, 0, 0, 0.4);   /*  0 0.4em #c2bb11, 0 0.7em rgba(0, 0, 0, 0.4) */
	 }

	 .my3d_btn.b-1:active {
	    top: 0.4em;
	    box-shadow: 0 0.2em #D0D0D0, 0 0.5em rgba(0, 0, 0, 0.4);	/* 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4) */
	  }

	 .my3d_btn.b-2:active {
	    top: 0.6em;
	    box-shadow: 0 0.2em rgba(0, 0, 0, 0.4);						/* 0 0.2em rgba(0, 0, 0, 0.4 */
	 }

	 .my3d_btn.b-3:hover {
	    top: -0.5em;
	    box-shadow: 0 0.6em #D0D0D0, 0 1.3em rgba(0, 0, 0, 0.4);	/* 0 0.6em #c2bb11, 0 1.3em rgba(0, 0, 0, 0.4) */
	 }

	 .my3d_btn.b-3:active {
	    top: 0.4em;
	    box-shadow: 0 0.2em #D0D0D0, 0 0.5em rgba(0, 0, 0, 0.4);
	 }

   /*----------------------Ende  3D Button ---------------------- */
  	
  
  /* ------------------------- scgu_nav ------------- */
  	 .btn-scgu_nav{
	    	/*font-size: 1.2em; */
	    	font-weight:400;
	    	/*background: #FFF; */
	      	color: #555; 
	      	background: #f9f9f9;
	      	color: #666666;
	      	/*border: 1px black solid; */
	    	border-radius: 12px; 
	    	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
	  }
	  .btn-scgu_nav:hover{
	      	background: #eee;
	      	font-weight: 700;
	  }
	  
		.btn_scgu-default {
			font-size: 1.1em; 
			color: #666666;
			font-weight: bolder;
			box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
			background-color: #f9f9f9;
		}
		.btn_scgu-default:hover {
			color: #666666;
			box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
			background-color: #eee;
		}
	
	
	.btn_scgu-default:active,
	.btn_scgu-default.active {
		color: #666666;
		box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
		background-color: #f9f9f9;
	}
	
	.scgu_btn-shadow {
         width: 95%;
         height: 100px;
         margin: auto; 
         background-color:olive;
         border-radius: 5px;
         box-shadow: 5px -5px 10px grey;
       /*  font-size: 25px; */
        font-size: clamp(1em, 2vw, 2em);
         color: white; 
         text-align: center;
    /* display: table-cell;   */
   /* vertical-align: middle; */
        cursor: pointer;
  }

  .scgu_btn-shadow:hover {
        background-color: green;
  }
  
	  /*.btn-primary{border: 1px solid; box-shadow: 2px 2px 1px silver;}
	  .btn-info{border: 1px solid; box-shadow: 2px 2px 1px silver;}
	  .btn-warning{border: 1px solid; box-shadow: 2px 2px 1px silver;}
	  .btn-success{border: 1px solid; box-shadow: 2px 2px 1px silver;}
	  .btn-danger{border: 1px solid; box-shadow: 2px 2px 1px silver;}
	  .btn-dark{border: 1px solid; box-shadow: 2px 2px 1px silver;} */
	  
	  .btn-secondary{color: #212529; background: #ADADAD;}
	  .btn-info{color: #fff; background: #17a2b8;}
	  .btn-warning{color: #212529; background: #EEDD82;}
	  .btn-light{color: #212529; background: #e9ecef;}
	  .btn-dark{color: #fff; background: #343a40;}
	  .btn-danger{color: #fff; background: #FF6A6A;}
	  
	  .btn-secondary:hover{color: #212529; background: #cccccc;}
	  .btn-info:hover{color: #fff; background: #138496;}
	  .btn-warning:hover{color: #212529; background: #CDBE70;}
	  .btn-light:hover{color: #212529; background: #d3d9df;}
	  .btn-dark:hover{color: #fff; background: #23272b;}
	  .btn-danger:hover{color: #fff; background: #EE6363;}
  
  /* ------------------------- Ende scgu_nav ------------- */
  
  /*---------------------- 3D Button ---------------------- */
  	
  .btn3d {
	position: relative;
	top: -6px;
	border: 0;
	transition: all 40ms linear;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 2px;
}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
	-moz-outline-style: none;
	outline: medium none;
}

.btn3d:active,
.btn3d.active {
	top: 2px;
}

.btn3d.btn-white {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #fff;
}

.btn3d.btn-white:active,
.btn3d.btn-white.active {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #fff;
}

.btn3d.btn-default {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #f9f9f9;
}

.btn3d.btn-default:active,
.btn3d.btn-default.active {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #f9f9f9;
}

.btn3d.btn-primary {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #4274D7;
}

.btn3d.btn-primary:active,
.btn3d.btn-primary.active {
	box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #4274D7;
}

.btn3d.btn-success {
	box-shadow: 0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #78d739;
}

.btn3d.btn-success:active,
.btn3d.btn-success.active {
	box-shadow: 0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #78d739;
}

.btn3d.btn-info {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #39B3D7;
}

.btn3d.btn-info:active,
.btn3d.btn-info.active {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #39B3D7;
}

.btn3d.btn-warning {
	box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #FEAF20;
}

.btn3d.btn-warning:active,
.btn3d.btn-warning.active {
	box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #FEAF20;
}

.btn3d.btn-danger {
	box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #D73814;
}

.btn3d.btn-danger:active,
.btn3d.btn-danger.active {
	box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #D73814;
}

.btn3d.btn-magick {
	color: #fff;
	box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #bb39d7;
}

.btn3d.btn-magick:active,
.btn3d.btn-magick.active {
	box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #bb39d7;
}
 
.btn3d.btn-success-osb {
	color: #fff;
	box-shadow: 0 0 0 1px #146336 inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #146336, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #198754;
}

.btn3d.btn-success-osb:active,
.btn3d.btn-success-osb.active {
	color: #fff;
	box-shadow: 0 0 0 1px #146336 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #198754;
}

.btn3d.btn-primary-osb {
	color: #fff;
	box-shadow: 0 0 0 1px #565b1f inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #565b1f, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #7e852e;
}

.btn3d.btn-primary-osb:active,
.btn3d.btn-primary-osb.active {
	color: #fff;
	box-shadow: 0 0 0 1px #565b1f inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #7e852e;
}


/*---------------------- Ende 3D Button ---------------------- */