/*
	beige: #FEFAE0;
	beige Buttons: #FCF5EE;
	left: #93987c;
	right: #6E725A;
	footer: #2C2D24;
	btn-active: #DDA15E;
	*/
	    
	@font-face {
		font-family: 'TheMixC5';
		src:  url('../fonts/TheMixC5-5_Plain.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	
	@font-face {
		font-family: 'TheSansC5';
		src:  url('../fonts/TheSansC5-5_Plain.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	
	@media print {
		@page { margin: 0; }
		body { margin: 1.6cm; }
	}
	
	
	
	
	
	

	
	body{
		font-family:"TheSansC5";
		font-family:"TheMixC5";
		
		position:relative;
		top:0px;
		left:0;
		
		color:#FEFAE0;
		background-color: #2C2D24;
		
		letter-spacing: 0.5px;
	}
	
	.col-frame{
		background-color: rgba(86,61,124,.15);
		/*border: 1px solid rgba(86,61,124,.2);*/

		background-color: lightgrey;
		/*border: 1px solid darkslategray;*/
		text-align: center;
	}
	
	.row {
		--bs-gutter-x: 0;
		--bs-gutter-y: 0;
	}
	.part-btn{
		padding: 0;
		border: none;
		background: none; 
		background-color: #21221B;
		font-size:12px !important;

	}

	.part-img{
		width:90px;
		border-radius:5px;
	}


	.logos{
		height:50px;
		background-color: #2C2D24;
		color: #aaa;
	}
	
	.logo{
		height:30px;
		margin:10px;
	}
	
	.logo-bottom{
		height:30px;
		margin:10px;
	}
	
	.footer{
		position:relative;
		height:80px;
		line-height:80px;
		background-color: #2C2D24;
		/*color: #FEFAE0;*/
		color: #aaa;
	}


	.flex-container {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.flex-container > button {
		background-color: #FCF5EE;
		width: 90px;
		margin: 5px;
		text-align: center;
		font-size: 30px;
		border-radius:5px;
	}
	
	.flex-container > div {
		background-color: #f1f1f1;
		width: 90px;
		margin: 5px;
		text-align: center;
		line-height: 90px;
		font-size: 30px;
		border-radius:5px;
	}
	.btn{
		border:none;
		border-radius:0px;
		
	}
	.btn-group{
		flexWrap: "wrap";
		
	}
	.btn-dark{
		/*background-color: #37392D;*/
		background-color: #444;
		color: #FEFAE0;
		
		--bs-btn-active-bg:#DAA76F;
	}
	
	.btnactive{
		background-color: #DDA15E;
		color:#FEFAE0;
	}
	.btn-hilite{
		outline:6px solid #DDA15E;
		outline-offset: -5px;
	}
		
	.btn:hover {
		background-color: #DDA15E;
		color:#FEFAE0;
	}
	
	

	
	.leftBG{
		background-color: #93987c;
	}
	.rightBG{
		background-color: #6E725A;
	}
	
	.flex-element{
		display: flex;
		justify-content: center;
	}
	
	.fullsize-btn{
		max-width: 80%;
		margin:10px;
	}
	
	.top-right{
		position:absolute;
		top:15px;
		right:15px;
	}
	
	.card{
		color:#333;
		background-color: #93987c;
		
		--bs-card-border-radius:0;
		--bs-card-border-color:none;
	}
	
	.audio-icon{
		width: 16px;
		margin-left: 15px;
	}
	
	.btn-icon{
		width: 40px;
		margin-left: 15px;
	}
	

	#output{
		color:black;
	}
	
	a{
		text-decoration:none;
		color:#aaa;
	}
	a:hover{
		color:#DDA15E;
	}
	
	#home-btn{
		position:absolute;
		left:10px;
		top:24px;
		background:none;
		border:none;
		color:#444;	
	}
	
	#audio-control-btn{
		position:absolute;
		left:70px;
		top:24px;
		background:none;
		border:none;
		color:#444;	
	}
	
	#output{
		position:absolute;
		left:20px;
		top:44px;
		color:#444;
		
	}
	
	#fertig-btn{
		position:absolute;
		right:20px;
		top:20px;
		background:none;
		border:none;
		color:#444;
		
	}
	
	#back-btn{
		position:absolute;
		right:20px;
		top:20px;
		display:none;
		background:none;
		border:none;
		color:#444;
	}
	
	#audio-btn{
		background:none;
		border:none;
		color:#444;
	}
	
	#audio-reward-btn{
		background:none;
		border:none;
		color:#444;
	}
	#audio-instruction-btn{
		background:none;
		border:none;
		color:#444;
	}
	
	#audio-instruction{
		display:none;
		text-align:center;
	}
	
	#free-btn{
		/*
		color:#FEFAE0;
		text-decoration: underline;
		*/
	}
	
	#finish{
		margin-top:20px;
		margin-bottom:50px;
		padding:20px;
	}
	
	#hint{
		display:none;
	}
	#hint_info{
		font-family: 'TheSansC5';
		color:#FEFAE0;
	}
	#reward_info{
		font-family: 'TheSansC5';
		color:#FEFAE0;
	}
	#headline_stage{
		position: absolute;
		top: 20px;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		color: #444;
	}
	

	
	.spinner-border{
		top:90%;
		position:relative;
	}
	
	.offcanvas{
		--bs-offcanvas-bg: #6E725A;
		--bs-offcanvas-border-width: none;
		
		--bs-offcanvas-height: 40vh;
		padding-left:40px;
		padding-right:40px;
		text-align:center;
	}
	
	.accordion{
		--bs-accordion-bg: #93987c;
		--bs-accordion-border-radius: 0;
		--bs-accordion-inner-border-radius: 0;
		--bs-accordion-btn-focus-border-color: #444;
		
		--bs-accordion-active-color: #444;
		--bs-accordion-active-bg: #DDA15E;
		
		--bs-accordion-border-color: none;
		--bs-accordion-border-width: none;
		
		--bs-accordion-btn-focus-box-shadow: none;
	}
	
	.container-fluid{
		padding-left:0;
		padding-right:0;
		padding:0;
		margin:0;
		overflow: hidden;
	}
	
	#startbtn{
		display:none;
		position:absolute;
		top:220px;
		left:calc(50% - 70px);
		text-align: center;
		filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
		
		color: #DDA15E; 
		background-color:#333;
		
		outline: 4px solid #DDA15E;
			
		--bs-btn-padding-y: .25rem; 
		--bs-btn-padding-x: 2.5rem; 
		--bs-btn-font-size: 1.75rem; 
	}
	
	#prestartbtn{
		
		position:absolute;
		top:220px;
		left:calc(50% - 70px);
		text-align: center;
		filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
		
		color: #DDA15E; 
		background-color:#333;
		
		outline: 4px solid #DDA15E;
			
		--bs-btn-padding-y: .25rem; 
		--bs-btn-padding-x: 2.5rem; 
		--bs-btn-font-size: 1.75rem; 
	}
	
	#teaser{
		position:relative;
		top:0px;
		
	}
	
	#home-headlines{
		padding:30px;
		background-color: #6E725A;

	}
	
	#home-manual{
		padding:30px;
		background-color: #6E725A;
		font-family: 'TheSansC5';
	}
	
	
	#app{
		display:none;
	}
	
	button {
		background-color: transparent;
		background-repeat: no-repeat;
		border: none;
		cursor: pointer;
		overflow: hidden;
		outline: none;
	}
	
	#canvas{
		position:relative;
		top:0;
		margin:0;
		padding:0;
		margin-bottom: -6px;
	}
	
	.modal {
		--bs-modal-width: 510px;
	}
	
	.modal-content{
		background-color:#6E725A;
		padding:30px;
		border:none;
	}
	.modal-title{
		
	}
	.modal-header{
		border-bottom:0px solid #333;
	}

	
	#stage{
	    /*aspect-ratio: auto 1600 / 1600;*/
	}
	
	#shareLink{
		width:100%;
		max-width:530px;
		height:60px;
	}
	textarea:focus{
		outline: 1px solid #DDA15E;
	}
	::-moz-selection { 
		background-color: #DDA15E;
	}
	::selection {
		background-color: #DDA15E;  
	}
	h4{
		font-size: 1.4rem;
	}
	
	h5{
		color: #333;
		font-size: 1.4rem;
		font-weight: 400;
	}
	
	h3{
		margin-top:20px;
		margin-bottom:0px;
	}
	
	@media (min-width: 1200px) {

		.part-img {
			width: 120px;
		}
		
		.flex-container > button {
			width: 120px;
		}
	}
	
	.btn:focus {
		box-shadow: none;
	}
	
	.btn-close:focus {
		box-shadow: none;
	}
	
	.btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	.btn-close:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	.planet-schule-logo:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	.swr-logo:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	.footer-link:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	.part-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#home-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#fertig-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#back-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#audio-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#audio-reward-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#startbtn:focus-visible {
		outline: 8px dashed goldenrod;
	}
	
	#free-btn:focus-visible {
		outline: 8px dashed goldenrod;
	}