@CHARSET "ISO-8859-1";

/* 
 * Legt einen responsiven Stil für den Vokabeltrainer fest. Dieser Stil ist aber nicht notwendig und kann in anderen Anwendungen geändert werden.
 */



@media (max-width:1249px) {
	
	/* Das Gerät ist schmäler als 1250px. */
	
	.wort-liste-eintrag > :nth-of-type( 1 ),
	.wort-liste-eintrag > :nth-of-type( 2 ),
	.wort-liste-eintrag > :nth-of-type( 3 ),
	.wort-liste-eintrag > :nth-of-type( 4 ) {
		width:			calc( ( 100% - 150px ) / 4 );
	}

	#wort-liste div.button-wrapper {
		width:			100px;
		padding:		5px;
		height:			60px;
	}
	
	.wort-liste-eintrag div.button-wrapper > div {
		padding-top:	1px !important;		
		display:		block !important;
		width:			100% !important;
	}
	
	.maske-buttons .button:hover {
		padding-bottom:	10px;
		border-bottom:	0;		
	}
	
	.maske {
		top:			5%;
	}
	
	.button {
		padding:		10px 5px;
	}
	
	#suchfeld {
		padding:		10px 5px;
	}
	
}

@media (max-width:999px) {
	
	/* Das Gerät ist schmäler als 1000px. */
	
	.maske {
		width:			calc( 95% - 10px );
		left:			2.5%;
		height:			90vh;
		max-height:		90vh;
		min-height:		90vh;
	}
	
	#start .maske-inhalt,
	#frage .maske-inhalt {
		min-height:		calc( 100% - 125px );
		max-height:		calc( 100% - 125px );
	}
	
	#neues-wort .maske-inhalt,
	#wort-bearbeiten .maske-inhalt {
		min-height:		calc( 100% - 85px );
		max-height:		calc( 100% - 85px );
	}
	
	#loesung .maske-inhalt {
		min-height:		calc( 100% - 170px );
		max-height:		calc( 100% - 170px );
	}
	
	.maske-kopf {
		font-size:		110%;
	}
	
	.maske-buttons {
		display:		flex;
		justify-content:center;
		flex-wrap:		wrap;
	}
	
	.maske-buttons .button {
		flex:			1.5;
		display:		block;
		min-width:		calc( 50% - 20px );
	}
	
	.maske-buttons #suchfeld {
		flex:			2;
		display:		block;
		max-width:		calc( 100% - 20px );
		margin:			5px;
	}
	
	.wort-eingabe {
		height:			100px;
		max-height:		100px;
		min-height:		100px;
		width:			calc( 100% - 5px );
		max-width:		calc( 100% - 5px );
		min-width:		calc( 100% - 5px );
	}
	
	div.wort {
		width:			calc( 100% - 10px );
	}
	
}

@media (max-width:549px) {
	
	/* Das Gerät ist schmäler als 550px. */
	
	#wort-liste .wort-liste-eintrag {
		background:		initial;
		border-bottom:	1px solid #8899AA;
	}
	
	#wort-liste .wort-liste-eintrag > div,
	#wort-liste .wort-liste-eintrag > .button-wrapper {
		display:		block;
		width:			100%;
	}
	
	#wort-liste .wort-liste-eintrag > .button-wrapper {
		height:			30px;
	}
	
	#wort-liste .wort-liste-eintrag > div:nth-of-type( 2n ) {
		background:		#DDDDDD;
	}
	
	#wort-liste .wort-liste-eintrag .button-wrapper > div {
		display:		inline-block !important;
		width:			calc( 50% - 10px ) !important;
		text-align:		center;
	}
	
	#wort-liste .wort-liste-eintrag .button-wrapper div .button {
		width:			calc( 100% - 5px ) !important;
		display:		inline-block !important;
	}
	
	#wort-liste .wort-liste-eintrag > div:not( :last-of-type ):empty {
		display:		none;
	}
	
	.button, #suchfeld {
		font-size:		80%;
	}
	
	.maske {
		top:			3%;
	}
	
}

@media (max-width:349px) {
	
	/* Das Gerät ist schmaler als 350px. */
	
	.button > span {
		width:			100%; 
		height:			100%; 
		display:		table; 
	}

	.button > span > span {
		display:		table-cell; 
		vertical-align:	middle; 
		text-align:		center; 
	}
	
	#start .maske-inhalt {
		min-height:		calc( 100% - 135px );
		max-height:		calc( 100% - 135px );
	}
	
	#frage .maske-inhalt {
		min-height:		calc( 100% - 150px );
		max-height:		calc( 100% - 150px );
	}
	
	#neues-wort .maske-inhalt,
	#wort-bearbeiten .maske-inhalt {
		min-height:		calc( 100% - 95px );
		max-height:		calc( 100% - 95px );
	}
	
	#loesung .maske-inhalt {
		min-height:		calc( 100% - 200px );
		max-height:		calc( 100% - 200px );
	}

}