/*** Farben ***/

:root {
	--text:#666666;
	--text-bold:#333333;
	--fragen-text:#333333;
	--fragen-text-bold:#222222;
	--error:#cc0000;
	--background:#ffffff;
	--kachel-background:#f3f3f3;
	--kachel-background-hover:#cccccc;
	--kachel-background-hover:#e9e9e9;
	--kachel-border:#a9a9a9;

	--selected: #ffdd00;
	--selected-hover: #f6d600;
	--dark: #666666;

	--button1: #ffdd00;
	--button2: #f6d600;
	--fortschritt1:#ffdd00;
	--fortschritt2:#cccccc;
	--fortschritt2:#e9e9e9;

	--tooltip : #a9a9a9;
	--tooltip : #0066cc;
	--tooltip : #cea300;
}

/*** HTML Seite allgemein ***/

body, page  {
	font-family:  "Arial",  "Helvetica", sans-serif;
	font-size:16px;
	line-height: 20px;
	color:var(--text);
	background-color:var(--background);
	text-align:left;
	margin:0px; padding:0px;
    overflow-y : scroll;
	width:auto;
	hyphens:auto;
}

b {color:var(--text-bold);}

.qscreen {
	border-collapse:separate;
	border-spacing:0px;
}

.numq, .singleq, .multiq, .openq, .singlegridq, .multigridq, .textq  {
	margin-bottom:0px;
}
* { box-sizing: border-box; }
.template_screen { min-width: 0.1px; }
body { hyphens: auto; }
a {overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;}
#template_formular{ float: none; }
#template_formular {width:100%}

img {max-width:100%}

/*** Q Text: Fragetext ***/
.qtext {
	color:var(--fragen-text);
	font-size:19px;
	line-height: 24px;
	margin: 0px 0px 0px 0px;
}
.qtitle {
	color:var(--fragen-text);
	font-size:19px;
	line-height: 24px;
	margin: 20px 0px 0px 0px;
	padding-bottom:10px;
}
.qtitle b, .qtext b {	color:var(--fragen-text-bold);}

.qtable {	margin: 20px 0px 0px 0px;}

.pum_help {
    font-size: 16px;
    line-height: 20px;
    color: var(--text);
}
.qerror,.qerror b {
	color:var(--error);
	font-weight:bold;
}

.template_help_bottom .qpreinterviewerhelptext, .qpostinterviewerhelptext  {padding-top:5px}

.kachel, .text_kachel {
	background-color: var(--kachel-background);
	border : 0.125rem solid var(--kachel-border);
	border-radius: 0.4rem;
  	padding: 0.5rem;
	width:auto;
	text-align:left;
}
.kachel:hover {
	background-color: var(--kachel-background-hover);
}
.kachel.selected {
	background-color: var(--selected);
}
.kachel.selected:hover {
	background-color: var(--selected-hover);
}

.text_kachel {
	background-color:var(--kachel-background-hover);
	border-radius: 0.01rem;
	border : 0.125rem solid var(--kachel-background);
}

/*** kleinere Schrift au dem Smartphone ***/
@media only screen and (max-width: 460px) {
	body, page  {
		font-size:14px;
		line-height: 17px;
	}
	.qtext,.qtitle {
		font-size:17px;
		line-height: 21px;
	}
	.multiq .ranked {
		align-self: center;
		width: 1.4rem;
	  	height: 1.4rem;
	}
}

/*** Inputs ***/
input {
 	border: 1px solid var(--dark);
	border-radius: 0px;
	line-height: normal;
}
input:focus {
 	border: 1px solid var(--text-bold);
	outline: none;
}

/*** singleq ***/
.singleq .labelcontainer, .singleq .columncontainer {
	gap: 0.2rem;
}

.singleq .labelcontainer {
    display: flex;
    flex-direction: row;
}

.singleq .columncontainer {
    flex-direction: column;
    display: flex;
    flex: 1 1 min-content;
    min-width: fit-content;
}

.singleq .label, .singleq .textlabel {
	width: auto;
	flex-grow: 1;
	flex-basis: unset;
	text-align: left;
/*	min-height: 2.5rem;	*/
}

.singleq .textlabel {
	padding-top: 0.8rem;
	padding-bottom: 0.45rem;
}

/*** dropdownq ***/
.dropdownq select:focus {
	outline: none;
}

.dropdownq .labelcontainer {
	padding-bottom: 1.2rem;
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
}

/* Für Smartphone Textfeld unter Dropdown */
@media only screen and (max-width: 460px) {
	.dropdownq .labelcontainer {
	    flex-direction: column;
	}
}

.dropdownq .dropdowncontainer {
    display: flex;
    flex-direction: row;
	gap: 1rem;
}

.dropdownq select, .dropdownq option {
	width: auto;
	flex-grow: 1;
	text-align: left;
/*	min-height: 2.5rem;	*/
}

.dropdownq .opencontainer {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.dropdownq .dropdownopen {
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
	min-width: 2rem;
}

.dropdownq .option, .dropdownq .option.selected, .dropdownq .option.selected::selection {
	background-color: white;
	border-color: darkgray;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 1.0rem;
}

.dropdownq .dropdowntitle {
	text-align: left;
	display: table;
}

.dropdownq .dropdowntitlecontent {
	display: table-cell;
	vertical-align: middle;
}

/*** multiq ***/
.multiq .labelcontainer {
    display: flex;
    flex-direction: row;
	gap: 0.2rem;
}

.multiq .columncontainer {
    flex-direction: column;
    display: flex;
    flex: 1 1 min-content;
    min-width: fit-content;
	gap: 0.2rem;
}

.multiq .ranked_not_ranked_splitter {
	flex-grow: 1;
}

.multiq .ranked {
	align-self: center;
	width: 1.7rem;
  	height: 1.7rem;
	margin-left: 0.3rem;
	display:flex;
	justify-content:center;
	align-items:center;
	font-weight: bold;
	color: var(--background);
	background-color: var(--text);
	border-style: solid;
	border-color: var(--text);
	border-radius: 9rem;
}

.multiq .label, .multiq .textlabel {
	width: auto;
	flex-grow: 1;
	text-align: left;
	/* min-height: 2.5rem; */
}

.multiq .textlabel {
	padding-top: 0.8rem;
	padding-bottom: 0.45rem;
}

.multiq .label {
	flex-basis: unset;
	display: grid;
	grid-auto-flow: column;
	justify-content: flex-start;
}

.multiq .labeltext {
	/* wegen vertikaler Ausrichtung der Rankingnummer */
	margin: 0.5rem;
	align-self: center;
}

.multiq .kachel {
	/* wegen vertikaler Ausrichtung der Rankingnummer */
	padding: 0rem;
}

.calendar {
    max-width: 40rem;
}

.calendar .columncontainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar .kachel{
    justify-content: center;
}

.calendar .textlabel{
    text-align: center;
}

.calendar .dummylabel {
    display: grid;
    opacity: 0.4;
}

.calendar .dummylabel:hover {
    background-color: var(--kachel-background);
}

/*** singlegridq ***/
.singlegridq {
	padding-bottom:1.2rem;
}
.singlegridq .item {
	padding-bottom:1.2rem;
}
.singlegridq .item_text {
	padding-bottom:.6em;
	text-align:center;
	color: #333333;
	font-size: 19px;
	line-height: 24px;
}
.singlegridq .label_box {
	display:flex;
	gap: .2rem;
	padding-bottom:10px;
}
.singlegridq .label{
	flex-grow:1;
	text-align:center;
	width:10px;
	padding: 0.2rem;
}
.singlegridq .label_text_box{
	display:grid;
	column-gap: .2rem;
}
.singlegridq .label_text{
	flex-grow:1;
	text-align:center;
}

.singlegridq .label_text:first-child { text-align:left; }
.singlegridq .label_text:last-child { text-align:right; }

.singlegridq .ka_box{
	width:100%;
	display:flex;
	justify-content:flex-end;
	gap: .2rem;
}
.singlegridq .label_ka{
	text-align:center;
	width:25%;
	flex-grow:0;
	margin-top:1rem;
}
.singlegridq .item_trenner {
	border: 1px solid var(--even-hover);
	margin-bottom:1rem;
}
.singlegridq .item:first-of-type .item_trenner{
	display:none;
}

.singlegridq .singlegridqopen {
	min-width: 40%;
	max-width: 80%;
	margin-left: 0.5em;
}

.singlegridq .label::selection { color: var(--dark); background: white; }
.singlegridq .label.selected::selection { color: var(--dark); background: var(--selected); }

.bipolar.singlegridq .links {text-align:left;}
.bipolar.singlegridq .rechts {text-align:right;}
.bipolar.singlegridq .item_text {
display:grid;
grid-template-columns:1fr 1fr;
}

.classic.singlegridq {
	display:flex;
	flex-direction: column;
	gap: .2rem;
	width:100%;
	max-width:400px;
}
.classic.singlegridq  .item {
	padding-bottom:0.001rem;
	display:grid;
	grid-template-columns: 3fr 2fr;
	gap: .3rem;
}
.classic.singlegridq  .item_text {
	border: 1px solid black;
	box-shadow: 1px 1px;
	text-align:left;
	padding-left:.2rem
}
.classic.singlegridq  .label_box {
	border: 0px solid var(--visualisierung);
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: .3rem;
	padding-bottom:0.001px;
}
.classic.singlegridq  .item_trenner {
	display:none;
}
.classic.singlegridq  .label{
	display:flex;
	justify-content:center;
	align-items:center;
	width: 100%;
}

/*** multigridq ***/
.multigridq .gridcontainer {
    display: flex;
    flex-direction: column;
}

.multigridq .itemcontainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/*
.multigridq .itemcontainer.nodisplay {
    display: none;
}
*/

.multigridq .itemtext {
	text-align: center;
	font-size: 1.125rem;
}

.multigridq .multigridqopen {
	min-width: 40%;
	max-width: 80%;
}

.multigridq .gridlabels {
    display: unset;
    flex-direction: row;
	justify-content: space-between;
}

.multigridq .groupcontainer {
    display: flex;
    flex-direction: column;
}

.multigridq .groupheader, .multigridq .groupfooter {
	text-align: center;
}

.multigridq .labelcontainer {
    display: flex;
    flex-direction: column;
	gap: 0.2rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--kachel-border);
}

.multigridq .labelrow, .multigridq .labeltextrow {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	gap: 0.2rem;
}

.multigridq .labelrow.labelrow2 {
    display: flex;
    flex-direction: row;
	justify-content: flex-end;
	gap: 0.2rem;
}

.multigridq .labeltextrow {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}

.multigridq .labeltext {
	max-width: 35%;
	text-align: center;
}

.multigridq .labeltext:first-child {
	text-align: left;
}

.multigridq .labeltext:last-child {
	text-align: right;
}

.multigridq .label, .multigridq .textlabel {
	width: auto;
	flex-grow: 1;
	flex-basis: 10rem;
	text-align: center;
/*	min-height: 2.5rem; */
	font-size: 1rem;
}

.multigridq .label.labelrow2 {
	flex-grow: unset;
	flex-basis: unset;
}

.multigridq .textlabel {
	padding-top: 0.8rem;
	padding-bottom: 0.45rem;
	color: var(--fragen-text);
	font-size: 1.125rem;
}

.multigridq .labelcode {
	padding-right: 0.25rem;
}

/*** multimatrixq ***/
.multimatrixq .gridcontainer {
    display: grid;
	grid-template-columns: fit-content(100%);
}

.multimatrixq .gridcontainer-transposed {
	grid-auto-flow: column;
}

.multimatrixq .leftcolumn {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/* width: 20rem; */
	text-align: left;
	/* font-size: 1.125rem; */
	/* padding-top: 0.4rem; */
	/* padding-bottom: 0.4rem; */
}

.multimatrixq .toprow {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	text-align: center;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	margin-bottom: 0.4rem;
}

.multimatrixq .multimatrixqopen {
	min-width: 40%;
	max-width: 80%;
}

.multimatrixq .labelcontainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/* gap: unset; */
	/* padding-bottom: unset; */
}

.multimatrixq .labeltext, .multimatrixq .textlabel, .multimatrixq .itemtext, .multimatrixq .textitem {
	background-color: var(--kachel-background-hover);
	padding: 0.4rem;
	margin: 0.1rem;
}

.multimatrixq .textlabel {
	min-width: 1rem;
}

.multimatrixq .label {
	margin-top: 0.6rem; /* absichtlich so getrennt */
	margin-bottom: 0.6rem; /* absichtlich so getrennt */
	margin-left: 0.6rem; /* absichtlich so getrennt */
	margin-right: 0.6rem; /* absichtlich so getrennt */
	width: 1.6rem;
	height: 1.6rem;
	/* flex-grow: unset; */
	/* flex-basis: unset; */
	/* min-height: unset; */
}

.multimatrixq .kachel {
	min-height:34px;
	min-width:34px;
	padding:0.4rem;
	margin:0.1rem;
}

.multimatrixq .groupseparator {
	width: 2rem;
	/* background-color: var(--kachel-background); */
}

.multimatrixq .rowborder {
	border-top-color: var(--kachel-border);
	border-top-style: solid;
	border-top-width: thin;
}

.multimatrixq .headerrow, .multimatrixq .footerrow {
	padding: 0.4rem;
	text-align: center;
}

.multimatrixq .headercolumn {
	text-align: left;
	width: 0px;
	padding: 0rem;
}

.multimatrixq .footercolumn {
	text-align: left;
	width: 0px;
	padding: 0rem;
	display: none;
}

/*** singlematrixq ***/
.singlematrixq .gridcontainer {
    display: grid;
	grid-template-columns: fit-content(100%);
}

.singlematrixq .gridcontainer-transposed {
	grid-auto-flow: column;
}

.singlematrixq .leftcolumn {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/* width: 20rem; */
	text-align: left;
	/* font-size: 1.125rem; */
	/* padding-top: 0.4rem; */
	/* padding-bottom: 0.4rem; */
}

.singlematrixq .toprow {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	text-align: center;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	margin-bottom: 0.4rem;
}

.singlematrixq .singlematrixqopen {
	min-width: 40%;
	max-width: 80%;
}

.singlematrixq .labelcontainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/* gap: unset; */
	/* padding-bottom: unset; */
}

.singlematrixq .labeltext, .singlematrixq .textlabel, .singlematrixq .itemtext, .singlematrixq .textitem {
	background-color: var(--kachel-background-hover);
	padding: 0.4rem;
	margin: 0.1rem;
}

.singlematrixq .textlabel {
	min-width: 1rem;
}

.singlematrixq .label {
	margin-top: 0.6rem; /* absichtlich so getrennt */
	margin-bottom: 0.6rem; /* absichtlich so getrennt */
	margin-left: 0.6rem; /* absichtlich so getrennt */
	margin-right: 0.6rem; /* absichtlich so getrennt */
	width: 1.6rem;
	height: 1.6rem;
	/* flex-grow: unset; */
	/* flex-basis: unset; */
	/* min-height: unset; */
}

.singlematrixq .kachel {
	min-height:34px;
	min-width:34px;
	padding:0.4rem;
	margin:0.1rem;
}

.singlematrixq .groupseparator {
	width: 2rem;
	/* background-color: var(--kachel-background); */
}

.singlematrixq .rowborder {
	border-top-color: var(--kachel-border);
	border-top-style: solid;
	border-top-width: thin;
}

.singlematrixq .headerrow, .multimatrixq .footerrow {
	padding: 0.4rem;
	text-align: center;
}

.singlematrixq .headercolumn {
	text-align: left;
	width: 0px;
	padding: 0rem;
}

.singlematrixq .footercolumn {
	text-align: left;
	width: 0px;
	padding: 0rem;
	display: none;
}

/*
.gridcontainer-transposed .groupseparator {
	width: unset;
	height: 2rem;
}

.gridcontainer-transposed .headeranchor, .gridcontainer-transposed .groupheader {
	text-align: left;
	width: 0px;
	padding: 0rem;
}
*/

/*** numq ***/
.numq {
	width:100%; max-width:700px
}
.numq .label, .numq .sum, .numq .label_ka {
	display:grid;
	grid-template-columns: minmax(auto, 4fr) minmax(auto, auto) minmax(auto, auto);
}
.numq .textlabel {
	padding-top: 0.8rem;
	padding-bottom: 0.45rem;
}

.numq .kachel, .numq .text_kachel {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
}

.numq .textlabel.rechts {
	display:flex;
	flex-direction: row-reverse;
}
.numq .textlabel.rechts .label_text1 {text-align:right;}
.numq .label_ka {
	width:50%;
	float:right;
	text-align:right;
}
.numq .label_box, .numq .sum_box {
/*	border: 1px solid var(--visualisierung); */
	padding:.2rem
}


.numq .kachel.selected.disabled {
	background-color:var(--kachel-background);
	border: 1px solid var(--kachel-border);
}
.numq .collapsible .text_label.selected {
	background-color:var(--selected);
	border: 1px solid #000000;
	color:#000000;
}
.numq .sum.wrong {
	color:var(--error);
}

.numq .numinput.wrong {
	border: 1px solid var(--error);
}
.numq .numinput.selected {
	border: 1px solid var(--selected);
}

.numq .numinput.wrong:disabled {
	border: 1px solid var(--dark);
}
.numq .numinput.selected:disabled {
	border: 1px solid var(--dark);
}

.numq .sum.disabled .sum_box.selected{
	background-color:#ffffff;
	border: 1px solid #ffffff;
}
.numq .sum.disabled .sum_box.wrong   {
	color:var(--text);
}

.numq .label_text1,.numq .label_text3,.numq .sum_text1,.numq .sum_text3 {text-align:left;}
.numq .label_text2,.numq .sum_text2 {text-align:right;}

.numq .sum.hide {	display:none; }
.numq .numinput {
	width:50px;
	text-align:right
}
.numq .numopen {
	max-width:200px;
	width:100%;
}

.numq .teilsumme.selected {
	color: var(--selected);
}
 .numq .teilsumme.wrong {
	color:var(--error);
}

.numq.small_numq .label  {
  grid-template-columns: minmax(0.1rem, 0.1rem) minmax(auto, auto) minmax(auto, 1fr);
}
.numq.small_numq2 .label  {
  grid-template-columns: minmax(auto, auto) minmax(auto, 1fr) minmax(0.1rem, 0.1rem);
}
.numq.small_numq2 .label_text2  {
  text-align:left;
}

/*Im Smartphone Einheit ausblenden*/
@media only screen and (max-width: 500px) {
	.numq .unit_hide {display:none}
}

.numq input:disabled {
	background-color:#eeeeee;
	color:#cccccc;
}
.numq .sum.disabled {	color:#cccccc; }

.numq .collapse {display:none;}

/*** sliderq ***/
.sliderq .slidergroup {
    display: flex;
    flex-direction: column;
	padding-bottom: 1.2rem;
	gap: 5rem;
}

.sliderq .slidercontainer {
    display: flex;
    flex-direction: column;
	gap: 0.6rem;
}

.sliderq .labelcontainer {
    display: flex;
    flex-direction: row;
	justify-content: center;
	align-items: center;
}

.sliderq .labeltext {
	width: auto;
	text-align: center;
	padding-top: 0.8rem;
	padding-bottom: 0.45rem;
	color: var(--fragen-text);
	font-size: 1.125rem;
}

.sliderq .showvalue {
	/* color in voriger Version nicht definiert */
	color: var(--background);
	font-weight: bold;
	/* background-color: var(--selected); */
	background-color: var(--text);
	border-style: solid;
	/* border-color: var(--selected); */
	border-color: var(--text);
	border-radius: 9rem;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-left: 0.5rem;
	height: 2rem;
	min-width: 2rem;
	text-align: center;
}

.sliderq .sum {
	display: unset;
}

.sliderq .headercontainer {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

.sliderq .header {
	text-align: center;
}

.sliderq .footercontainer {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

.sliderq .footer {
	text-align: center;
}

.sliderq .header:first-of-type {
	text-align: left;
}

.sliderq .header:last-of-type {
	text-align: right;
}

.sliderq .slider {
	appearance: none;
	-webkit-appearance: none;  /* Override default CSS styles */

    display: flex;
    flex-direction: column;
	background: var(--kachel-border);
	height: 0.8rem;
	border-radius: 0.75rem;
	border-color: var(--kachel-border);
	margin-left: 0;
	margin-right: 0;

	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	transition: opacity 0.2s;
	-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
}

.sliderq .slider:hover {
	opacity: 1;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.sliderq .slider::-moz-range-thumb {
	appearance: none;
	cursor: ew-resize;

	height: 1.5rem;
	width: 1.5rem;
	border-style: solid;
	border-radius: 9rem;
	border-color: var(--selected);
	border-width: 0.25rem;
	background-color: var(--selected);
}

.sliderq .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	cursor: ew-resize;

	height: 2rem;
	width: 2rem;
	margin-top: -0.6rem;
	border-style: solid;
	border-radius: 9rem;
	border-color: var(--selected);
	border-width: 0.25rem;
	background-color: var(--selected);
}

.sliderq .slider.notmoved::-moz-range-thumb {
	border-style: dotted;
	border-color: var(--kachel-border);
	background-color: white;
}

.sliderq .slider.notmoved::-webkit-slider-thumb {
	border-style: dotted;
	border-color: var(--kachel-border);
	background-color: white;
}

.sliderq .slider.noanswer::-moz-range-thumb {
	opacity: 0;
}

.sliderq .slider.noanswer::-webkit-slider-thumb {
	opacity: 0;
}

.sliderq .noanswercontainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

.sliderq .label {
	width: unset;
	flex-grow: unset;
	flex-basis: unset;
	text-align: unset;
}

#clock_circle1 { fill: #ffdd00;}
#clock_circle2 { fill: #f2f2f2;}
#clock_circle3 { fill: #ffffff;}
#clock_circle4 { fill: #cccccc;}

.clock_hour {stroke:#000000; stroke-width:8}
#clock_y1 {fill:#ffdd00}
#clock_y2 {fill:#fff07f}
#clock_minute {stroke-width: 3px; stroke: #666666;}
#clock_hour	 {stroke-width: 6px; stroke: #cc0000;}
#clock { width:100px; height:100px;}

/*** numgridq ***/
	.numgridq {
		display:grid;
		gap:.1rem;
		width:100%;
		max-width:980px;
	}

	.numgridq div.qColumn {
		display:grid;
		gap:.2rem;
	}

	.numgridq .text_spalte.text_label {text-align:left}

	.numgridq .label, .numgridq .sum, .numgridq .label_ka {
		display:grid;
		grid-template-columns: minmax(auto, 4fr) minmax(auto, auto) minmax(auto, auto);
		margin:.1rem;
	}
	.numgridq .text_label {
		margin:.1rem;
		text-align:right;
		padding:.4rem
	}

	.numgridq .text_label.rechts {
		display:flex;
		flex-direction: row-reverse;
	}
	.numgridq .label_ka {
		text-align:right;
	}
	.numgridq .label_box, .numgridq .sum_box {
		border: 1px solid var(--visualisierung);
		padding:.2rem
	}

	.numgridq .sum_box.selected {
		background-color:var(--selected);
		border: 1px solid var(--selected);
	}
	.numgridq .collapsible .text_label.selected {
		background-color:var(--selected);
		border: 1px solid #000000;
		color:#000000;
	}
	.numgridq .wrong .sum_box {
		color:red;
	}

	.numgridq .sum.disabled .sum_box.selected{
		background-color:#ffffff;
		border: 1px solid #ffffff;
	}
	.numgridq .sum.disabled x.wrong .sum_bo   {
		color:var(--text);
	}


	.numgridq .label_text1,.numgridq .label_text3,.numgridq .sum_text1,.numgridq .sum_text3 {text-align:left;}
	.numgridq .label_text2,.numgridq .sum_text2 {text-align:right;}

	.numgridq .sum.hide {	display:none; }
	.numgridq .numinput {
		width:50px;
		text-align:right
	}
	.numgridq .numopen {
		max-width:200px;
		width:100%;
	}
	.numgridq .numinput.wrong {
		border: 1px solid var(--error);
	}
	.numgridq .numinput.selected {
		border: 1px solid var(--selected);
	}

	.numgridq .numinput.wrong:disabled {
		border: 1px solid var(--dark);
	}
	.numgridq .numinput.selected:disabled {
		border: 1px solid var(--dark);
	}

	.numgridq .label_box  {align-self: center;}

/*Im Smartphone Einheit ausblenden*/
	@media only screen and (max-width: 600px) {
		.numgridq .unit_hide {display:none}
		.numgridq .label_box  {text-align:center;}
	}

	.numgridq input:disabled {
		background-color:#eeeeee;
		color:#cccccc;
	}
	.numgridq .sum.disabled {	color:#cccccc; }

	.numgridq .collapse {display:none;}


/*** openq ***/

.openq {
	padding-bottom:1.2rem;
	display:grid; gap:.2rem .2rem
}

.openq .openbox {
	width:95%;
	height:66px;
	resize: none;
}
.openq .openbox:disabled {
	background-color:#eeeeee;
	color:#cccccc;
}

.openinput {display:none;}

.openq .open_label_text {
	padding-top:0.2rem;
}


/*** MaxDiff ***/
	.maxdiffq {
		width:100%;
		max-width:700px;
	}
	.maxdiffq .maxdiffq_label {
		display:flex;
	}

	.maxdiffq .maxdiffq_label_box {
		padding:.4rem;
		margin:.1rem;

	}
	.maxdiffq .maxdiffq_label_3 { width:5%; min-width:30px;}
	.maxdiffq .maxdiffq_label_1 { width:5%; min-width:30px;}
	.maxdiffq .maxdiffq_label_text {
		text-align:center;
		width:100%;
	}
	.maxdiffq .maxdiffq_head {
		width: 100%;
		display: grid;
		gap: .2rem .2rem;
		grid-template-columns: 3fr 1fr 3fr;
	}
	.maxdiffq .maxdiffq_head_3 {
		min-width: 100px;
		text-align: center;
		background-color: var(--background);
		border: 1px solid var(--background);
		text-align:left;
	}

	.maxdiffq .maxdiffq_head_3 b {
		color: #99cc66;
	}
	.maxdiffq .maxdiffq_head_1 {
		min-width: 100px;
		text-align: center;
		background-color: var(--background);
		border: 1px solid var(--background);
		text-align:right;
	}
	.maxdiffq .maxdiffq_head_1 b {
		color: #cc0000;
	}
	.maxdiffq .selected  { background-color:var(--selected); }

/*** symbolq ***/
	.symbolq {width:100%; max-width:700px;}
	.symbolq .label_block {
		display:grid;
		grid-template-columns: auto;
	}
	.symbolq .label, .symbolq .label_ka, .symbolq .label_zka {
		display:grid;
		grid-template-columns: minmax(auto, 4fr) minmax(auto, auto) minmax(auto, auto);
	}
	.symbolq .textlabel {
		padding-top: 0.8rem;
		padding-bottom: 0.45rem;
	}
	.symbolq .kachel, .symbolq .text_kachel {
		margin:0.2rem;
	}
	.symbolq .textlabel.rechts {
		display:flex;
		flex-direction: row-reverse;
	}
	.symbolq .textlabel.rechts .label_text1 {text-align:right;}
	.symbolq .label_ka{
		width:50%;
		justify-self:right;
		text-align:right;
	}
	.symbolq .label_zka{
		width:50%;
		justify-self:right;
		text-align:right;
		margin-bottom:10px;
	}
	.symbolq .label_box {
		align-content: center;
	}

	.symbolq .label_text1,.symbolq .label_text3 {text-align:left;}
	.symbolq .label_text2 {
		text-align:right;
		padding-top:5px;
	}
	.symbolq .fade{
/*		opacity:30%; */
		opacity:0.3;
	}
	/*Im Smartphone Einheit ausblenden*/
	@media only screen and (max-width: 500px) {
		.symbolq .unit_hide {display:none}
	}
	.symbolq .symbol {
		font-size: 2.5em;
		text-align: center;
		color: var(--kachel-border);
	}
	.symbolq .symbol.selected {
		color: var(--selected);
	}

/*** folderq ***/
	.folderq .folder_box   {height:auto; position: relative; border: 1px solid black;}
	.folderq .folder_left  {width:33%; height:100%;position:absolute;top: 0; left: 0; z-index:11;}
	.folderq .folder_right {width:33%; height:100%;position:absolute;top: 0; right: 0;z-index:12;}
	.folderq .folder_text  {position:absolute;bottom: 0; right: 0;z-index:10; padding:0.5rem;}
	.folderq .folder_left:hover  {background-color:var(--dark);opacity:.1;filter: alpha(opacity=10);}
	.folderq .folder_right:hover {background-color:var(--dark);opacity:.1;filter: alpha(opacity=10);}

/*** conjoint ***/
	.conjoint {
		display:grid;
		grid-template-columns: 1fr;
	}
	.conjoint_row {
		display:grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

	}
	.conjoint_cell {
		background-color:#fff;
		margin:0.2rem;
	}
	.conjoint_kw.numq {
  		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		max-width: 1000px
	}
	.conjoint_kw.numq .label,.conjoint_kw.numq .kachel  {
		display: grid;
		grid-template-columns: 1fr ;
	}
	.conjoint_kw.numq .label_text2, .conjoint_kw.numq .sum_text2 {
	  text-align: left;
	}

	.conjoint_dc.singleq {
  		display: grid;
		grid-template-columns: 1fr 4fr;
		max-width: 1000px;
	}
<	.conjoint_dc.singleq .qtitle {
		margin: 0.2rem;
		align-self: center;
	}
	.conjoint_dc.singleq .labelcontainer {
		padding-bottom: unset;
	}
	.conjoint_dc.singleq .columncontainer {
  		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}
	.conjoint_dc.singleq .label, .conjoint_dc .singleq .kachel  {
		margin: 0.2rem;
		text-align: center;
	}

	.conjoint_pv.singleq {
 		display: grid;
		grid-template-columns: 1fr 2fr;
		max-width: 1000px;
		padding-bottom: unset;
	}
	.conjoint_pv.singleq .qtitle {
		margin: 0.2rem;
	}
	.conjoint_pv.singleq .labelcontainer {
		padding-bottom: unset;
	}
	.conjoint_pv.singleq .columncontainer {
 		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	.conjoint_pv.singleq .label, .conjoint_pv.singleq .kachel  {
		margin: 0.2rem;
		text-align: center;
	}

/******Tooltip *******/
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}
.tooltipicon, .tooltiptext {
    color: var(--tooltip);
 }
.tooltipicon {
    margin-left:2px;
}
.tooltipcontent {
    display: none;
    background-color: var(--kachel-background);
    border: 2px solid var(--kachel-border);
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    white-space: normal;
}

.tooltip.active .tooltipcontent {
    display: block;
    width: 250px;
}

.tooltip_sign, .tooltip_trigger {color:var(--tooltip);}
.tooltip_trigger {font-size:25px}

/*********Preview*********/
.preview_preview {
	display:flex;
	gap:5px;
	flex-wrap:wrap;
}
.preview_tabelle{
	display:grid;
	grid-template-columns:1fr 3fr;
}
.preview_tabelle ul {
padding: 0px 1em;
margin: 0px;
}
.preview_zelle {
	border:1px solid black;
	padding:5px;
	background:#eeeeee;
}
.preview_attribut {
}
.preview_beschreibung {
}

.preview_preview .preview_tabelle {
width:200px;
height:100px;
overflow: clip;
font-size:5px;
line-height: 7px;
border: 1px solid black;
}

.preview_preview .preview_bild img{
width:200px;
height:100px;
border: 1px solid black;
}

#preview_show  {
display:inline;
}
#preview_show img {
width:100%;
}

#preview_show .preview_name{
display:none;
}

@media only screen and (max-width: 500px) {
	.preview_preview .preview_tabelle {
	width:100px;
	height:50px;
	font-size:3px;
	line-height: 5px;
	}
	.preview_preview .preview_bild img{
	width:100px;
	height:50px;
	}
}

/******** MultiMarker ********/
	.multimarkerq .nodisplay {
		display: none;
	}

	.multimarkerq {
		max-width:1000px;
		width:100%;
	}

	.multimarkerq canvas {
		width:100%;
		border: 1px solid black;
	}

	.multimarkerq .label_box {
		display:flex;
		flex-wrap:wrap;
	}

	.multimarkerq .big_box {
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}

	.multimarkerq .knopf {
		width:80px;
		padding:5px;
		margin:5px;
		text-align:center;
		color:#000000;
	}

	.multimarkerq .label.aktiv   {
	opacity:.15;
	filter: alpha(opacity=15);
	}

/************************************/
/********      Buttons     ********/
/************************************/

#template_buttons_table {
	padding-top:40px;
	text-align:center;
	clear:both;
    padding-bottom:40px;
}

#backbutton, #continuebutton, #cancelbutton {
	font-size:16px;
	color:var(--fragen-text);
	background: var(--button1);
	border: 0px;
	text-align:center;
	height: 3rem;
	padding-left:2.5rem;
	padding-right:2.5rem;
	border-radius:0.9rem;
}
#backbutton:hover, #continuebutton:hover, #cancelbutton:hover {
	background: var(--button2);
}

/***************Fehlermeldungen*********************/
.template_qerror {
	color:#cc0000;
	background-color:var(--background);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
/*	max-width: 970px; */
	text-align:center;

	border: 1px solid red;
	z-index:1;
}

/*** farbliche Hervorhebungen ***/
em[d_red],em[d_red] b {
	color:#cc0000;
	font-style: normal;
}
em[d_blue],em[d_blue] b {
	color:#0066cc;
	font-style: normal;
}
em[d_green],em[d_green] b {
	color:#99cc66;
	font-style: normal;
}


/*** template ***/

.template_screen {
	max-width: 980px;
	min-width: 0.1px;
	width: auto;
	margin: 0px auto;
	padding: 0px 5px;
}
.template_head {
	width: 100%;
	height:68px;
	border-bottom:1px solid var(--background);
	float: none;
	margin-top:3px;
	margin-bottom:0px;
}
.template_link {
	height:0px;
	display:inline-block;
}

.template_logo_div1 {
	float: left;
	width: 30%;
	text-align:left;
}
.template_logo_img1 {
	width:144px;
	height:59px;
 	border:0;
 	padding-top:5px;
}

.template_fortschritt_l {
	border: 0;
	height:5px;
	background: var(--fortschritt1);
	max-width:100%;
}

.template_fortschritt_r {
	border: 0;
	height:5px;
	background: var(--fortschritt2);
	float: none;
	width:100%;
	margin-bottom:20px;
}

.template_qtext {
	position:relative;
	width:100%;
	text-align:left;
}

#template_qscreen {padding-top:.5em;}

#template_questions {margin-top:0px;}
#template_formular  {float: left;}
.summe_zahl   {text-align:center; font-weight:bold;}
.summe_posttext {font-weight:bold;}

a:link 		{color: var(--fragen-text);}
a:visited 	{color: var(--fragen-text);}
a:hover 	{color: #000000;}
a:active 	{color: #cc0000;}

.ptable {margin-top:10px}
.ptable td { border:1px solid #cccccc; padding:5px}
.ptable.numqtable  td { border:0px solid #cccccc; padding:5px}


.invisible {visibility: hidden;}
.hide, .datacontainer {display:none;}
.hide.label {display:none;}
/*** Bilder Preview ***/
.preview_small {
	width:200px;
	max-width:18%;
	border: 1px solid black
}
.preview_big {
    opacity: 1;
    max-width: 100%;
    max-height: 100%;
	border: 1px solid black;
	flex-grow:0;
}

#preview_overlay {
    background-color: #eee;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 10000;
    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;
}

#preview_overlay.hide {display:none}


/*** Uhr ***/
#clock_circle1 { fill: #ffdd00;}
#clock_circle2 { fill: #f2f2f2;}
#clock_circle3 { fill: #ffffff;}
#clock_circle4 { fill: #cccccc;}

.clock_hour {stroke:#000000; stroke-width:8}
#clock_y1 {fill:#ffdd00}
#clock_y2 {fill:#fff07f}
#clock_minute {stroke-width: 3px; stroke: #666666;}
#clock_hour	 {stroke-width: 6px; stroke: #cc0000;}
#clock { width:100px; height:100px;}