@charset "UTF-8";
.borderbox-basis {max-width:70vw;}

.vapko-grid-container-top {
	border:0em red solid;
	box-sizing: border-box;
	display: grid; 
	grid-template-rows: min-content min-content; 
	grid-template-columns:fit-content 1fr fit-content;
}

/*               grid-area:1 / 3 / span 2 / 3                                           */
/* The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.   */
.vapko-grid-container-top-button-left  {grid-area:1 / 1 / 1 / 1;border:0em green solid;text-align:left;}
.vapko-grid-container-top-title      {grid-area:1 / 2 / 1 / 2;text-align:center;font-weight:bold;border:0em blue solid;}
.vapko-grid-container-top-subtitle   {grid-area:2 / 2 / 2 / 2;text-align:center;border:0em white solid;}
.vapko-grid-container-top-button-right {grid-area:1 / 3 / 1 / 3;border:0em yellow solid;text-align:right;}


.vapko-container {
	box-sizing: border-box;
	background-color: lightgray;
	display:grid;
	grid-template-columns:min-content 1fr;
	grid-auto-rows:auto;
	row-gap:.5em;
	border:0.1em black solid;
	box-shadow: var(--box-shadow);	
}
.vapko-container div {padding:.2em;}

.vapko-container div:nth-child(4n+1) {background-color:white;}
.vapko-container div:nth-child(4n+2) {background-color:white;}
.pilz-imgage img {width:20em;box-shadow: var(--box-shadow);}
 
.next-button {
	border:none;
	width: auto;
	cursor:pointer;
	background-color:transparent;
	white-space:nowrap;
} 
.next-button > img {height:1em!important;background-color:transparent!important;box-shadow:none!important;}

.vapko-container-multiple-choice {
	box-sizing: border-box;
	background-color: lightgray;
	display:grid;
	grid-template-columns:min-content 1fr;
	grid-auto-rows:auto;
	row-gap:.5em;
	column-gap:.2em;
}		
.vapko-container-multiple-choice input[type=radio] {margin-left:0em;}

.message-and-button-box {
	box-sizing: border-box;
	background-color: lightgray;
	display:grid;
	grid-template-columns:min-content auto;
	grid-template-rows: min-content;
	grid-template-areas: "button01 msg01";
}   
.message-and-button-box-msg01 {grid-area:msg01;text-align:left;font-weight:bold;color:red;display:none;margin:auto .5em auto .5em;}
.message-and-button-box-button01 {grid-area:button01;}  
/*-------------------------------------------------------------------------------------------*/ 
/* Grosse Aufloesung                                                                         */
/*-------------------------------------------------------------------------------------------*/ 
@media (min-resolution: 200dpi) {}
/*-------------------------------------------------------------------------------------------*/ 
/* Handy Querformat                                                                          */
/*-------------------------------------------------------------------------------------------*/ 
@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation:landscape) {}
/*-------------------------------------------------------------------------------------------*/ 
/* Handy Hochformat                                                                          */
/*-------------------------------------------------------------------------------------------*/ 
@media only screen and (min-width: 150px) and (max-width: 1024px) and (orientation:portrait) {
	.borderbox-basis {max-width:calc(100% - .5em);}
	.borderbox-basis div img {width:calc(100% - .5em);height:auto;}
}