html {
    scroll-padding-top: 90px; /* damit die internen Links funktionieren */
}

body {
	margin:0px;
	font-family: 'Calibri', sans-serif;	
    cursor: default;	
	color:var(--color-text);
}

main{
		width:auto;
		margin:56px 0px 0px 0px;
		padding: 20px 30%;
		z-index:1;
		position:relative;
		background-color:white;
		box-shadow: none;
	}
	
#backgroundimg{
	display:none;
}

#start_img{
	width:100%;
}

#start_img_subtitle{
	text-align:right;		
}

h1{	
	font-size: 40px;
	color:var(--color-title);	
	width:100%;
}

h2{
	color:var(--color-title);
	position:relative;
	font-size: 30px;
	margin-top:2em;
}

.sidebarsticky{
	position:fixed;
	top: 164px;
    left: 72%;
	line-height: 2;
	color:var(--color-text);
	padding-left: 15px;
}

#contentstitle{
	font-size:24px;
	font-weight:800;
}
	
.contentsul{
	list-style: none;    
	padding:0px;
    margin: 0;
	margin-top:11px;
}

#subtitle{
	color:var(--color-text);
	font-size: 24px;
	margin-top:20px;
}

hr{	
    height: 1px; /* Dicke der Linie */
    background-color: var(--color-text); /* Farbe der Linie */	
	border:0;
}

.orientiontitle{
	align-items:center;
	color:var(--color-title-negative);
	background-color:var(--color-secondary);
	border-radius:5px;
	padding:10px 20px;
	margin-right:20px;
}

.orientiontitle_wrapper{	
	position:absolute;
	width:200px;
	display:flex;
	justify-content:right;
	left:-200px;
	top:-10px;
}

.orientiontitle_long{
	right:auto;
	position:relative;
	display: flex; /* Flexbox für die Linie */
    align-items: center; /* Überschrift und Linie vertikal zentrieren */
	margin-left:-25%;
}

p, .normallist, .pointstable, #resulttitle{
	line-height: 1.6;
	font-size:20px;
}

.smalltext{
	line-height: 1.2;
	font-size:14px;	
}

h3{
	margin-block-end: -0.5em;
}

/* Allgemeines Styling für die Tabelle */
.standard-table {
    width: 100%;
	max-width:100%;
    border-collapse: collapse; /* Verhindert Doppellinien */
    margin: 20px 0; /* Abstand oben und unten */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten für modernen Effekt */
    border-radius: 10px; /* Abgerundete Ecken */
	position:relative;
	table-layout: fixed;
}

/* Keine Linie für die letzte Zeile */
.standard-table tr:last-child td {
    border-bottom: none; /* Entfernt die untere Linie der letzten Zeile */
}

.sellerimg{
	width:60px;
	margin:-10px auto 5px auto;
}

.table_productimg{
	max-width:90%;
	margin:auto;
	max-height:200px;
}

.standard-table a{
	all: unset;
}

.productimg{
	max-width:300px;
	float:right;
	right:0px;
	padding:30px 0px 30px 30px;
	max-height: 350px;
}

/* Keine Linie für die letzte Zeile */
.standard-table tr:nth-last-child(2) td {
    border-bottom: none; /* Entfernt die untere Linie der letzten Zeile */
}

.topleftcorner{
	border-radius:10px 0px 0px 0px
}

.toprightcorner{
	border-radius:0px 10px 0px 0px
}

/* Styling der Tabellenüberschriften */
.standard-table th {
    background-color: var(--color-primary); /* Blaue Hintergrundfarbe */
    color: var(--color-title-negative); /* Weiße Schriftfarbe */
    text-align: center; /* Zentrierter Text */
    padding: 12px; /* Innenabstand */
    font-size: 20px; /* Schriftgröße */
    font-weight: bold; /* Fettdruck */
}

/* Styling für die Zellen im Tabellenkörper */
.standard-table td {
    padding: 12px; /* Innenabstand */
    text-align: center; /* Zentrierter Text */
    font-size: 18px; /* Schriftgröße */
    border-bottom: 1px solid #e0e0e0; /* Trennlinien zwischen den Zeilen */
}

/* Styling für die erste Spalte (links) */
.standard-table td:first-child {
    font-weight: bold; /* Die erste Spalte hervorheben */
}

.standard-table td:first-child, .standard-table th:first-child {
	width:120px;
	max-width:120px;
	padding-left:20px;
}

.symbol{
	margin: auto;
	height: 25px;
	width: 25px;
}

.plussymbol{	
	background: url(../svg/plussymbol.svg);
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
}

.minussymbol{	
	background: url(../svg/minussymbol.svg);
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
}

.button{
    background-color: var(--color-primary);
    color: var(--color-title-negative);
	border-radius:8px;
	padding:8px 10px 8px;
	font-size:20px;
	width:80%;
	max-width:150px;
	height:25px;
	margin:auto;
}

.zumshopbutton::before{
	display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../svg/wagenwhite.svg);
	content: "";
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    background-size: 1.25rem;
    margin-right: 0.5rem;
	margin-bottom: -0.15rem;
}

.standardlink{
	color:var(--color-primary);	
	text-decoration: underline;
}
	
.contentslink{
	color:var(--color-text);	
	text-decoration: none;		
}
	
.tablelink{
	all:unset;		
}

.dropdownsymbol_questions{
	height: 25px;
	width: 25px;
	background: url(../svg/dropdownsymbol_textcolor.svg);
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	margin-top:-2px;
	transform: rotate(90deg);
	position:absolute;
	right:0px;
	top:0px;
}

.openquestion{	
	transform: rotate(0deg);
}

.answer{
	display:none;
	margin-bottom:0px;
}

.question_seperator{
	margin-top:1em;
}

.openanswer{
	display:block;
}

.questions{
	position:relative;
	margin-bottom:0px;
}

.sidetippcontainer{
	position:relative;
}

.sidetipp_wrapper{
	position:absolute;
	width:25%;
	display:flex;
	justify-content:right;
	left:-25%;
}

.sidetipp{
	color:var(--color-title-negative);
	background-color:var(--color-secondary);
	border-radius:5px;
	padding:10px 20px;
	font-size:16px;
	margin-right:20px;
}

.sidetipptitle{
	font-size:18px;
	margin-bottom:20px;	
}

.produktlink{
    display: inline-block;
}

.produktlink::after{
	display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../svg/wagen.svg);
	content: "";
    width: 1rem;
    height: 1rem;
    display: inline-block;
    background-size: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

#zumquizwrapper{
	background-color: white;
    border-radius: 8px;
    padding: 15px;
    width: 65%;
	margin:30px auto 25px;
    max-width: 800px;
    box-shadow: 0 0px 10px var(--color-title);
	text-align:center;
}

#toquiz-title{
	text-align: center;
	font-size: 30px;
	color:var(--color-title);
	font-weight:800;
	padding-bottom:20px;
}

#toquizbutton{
	max-width:30%;
	text-align:center;
}

#quiz-container {
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    width: 80%;
	margin:auto;
    max-width: 800px;
    box-shadow: 0 0px 10px var(--color-title);
	margin-top:45px;
}

#toquizlink{
	all:unset;
}

#quiz-title{
	text-align: center;
	font-size: 40px;
	color:var(--color-title);
	font-weight:800;
}

#start-page, #quiz-page, #result-page {
    text-align: center;
}

.hidden {
    display: none;
}

.answer-option {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    position: relative; /* Bezugspunkt für ::before */
    overflow: hidden; /* Verhindert, dass das ::before-Element über den Rand hinausgeht */
	z-index: 1;
}

.answer-option:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-secondary);
    opacity: 0.5;
    z-index: -1; /* Stellt sicher, dass es über dem Hintergrund liegt */
}

.answer-option:hover{
	background-color:transparent;
}

#start-button{
	font-size:30px;
	width: 80%;
    max-width: 200px;
    height: 40px;
}

#result-text{
	margin:0px auto 50px;
}

.h3-quiz{
	padding:20px 0px;
}

#quiz-title-result{
	margin:0px;
	margin-top:20px;
	padding:20px;
}

#result-page{
	border-radius: inherit;
}

#resulttitle {
	margin: 0px auto 30px;
}

/* Wrapper für Produkt-Grid */
#ergebnisproduktwrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 40px);
    padding: 20px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	border-radius:inherit;
}

/* Linke Seite des Grids */
#ep-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
	position:relative;
	padding-top: 10px;
}

#ep-left .tablelink{
	font-size:24px;
	font-weight:800;
	position:absolute;
	top:0px;
    text-align: center;
    width: 100%;
}

#ep-left .sellerimg{
	margin:10px auto;
}

.zumshoplink{
	text-decoration:none;
	position:absolute;
	bottom:0px;
	width: 100%;
}

#ep-left .zumshopbutton{
	margin:0px auto;
}

#ep-left div {
    margin: 5px 0;
}

/* Rechte Seite des Grids */
#ep-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.quizprice{	
	font-size:24px;
}

#restart-button{
	margin: 30px auto 5px;
    width: 80%;
    max-width: 140px;
	font-size:18px;
    height: 22px;
	padding: 6px 8px;
}


@media screen and (min-width: 769px) {
	.standardlink:hover, .contentslink:hover{
		color:var(--color-secondary);		
		cursor:pointer;		
	}
	
	.contentslink:hover, .tablelink:hover{
		text-decoration: underline;	
		cursor:pointer;			
	}
	
	.button:hover{
		background-color: var(--color-secondary);
		cursor:pointer;
	}
	
	.questions:hover{
		cursor:pointer;
	}
}

@media screen and (max-width: 1850px) {
	.button{
		width:80%;
	}	
}

@media screen and (max-width: 1600px) {
	main{
		padding: 20px 20%;
	}

	.sidebarsticky{		
		left: 81.5%;
	}
	
}

@media screen and (max-width: 1080px) {
	body{
		min-width:1080px;
	}	

	.sidebarsticky{		
		left: 880px;
	}

	#zumquizwrapper{	
		width:70%;
	}
}

@media screen and (max-width: 768px) {	
	html {
		scroll-padding-top: 60px; /* damit die internen Links funktionieren */
	}

	body{
		min-width:auto;
	}	
	
	main{
		min-width:auto;
		width:auto;
		margin:65px 0px 0px 0px;
		padding: 0px 30px;
		z-index:1;
		position:relative;
		background-color:white;
		box-shadow: none;
	}
	
	p, .normallist, .pointstable, #resulttitle{
		line-height: 1.4;
		font-size:18px;
	}
	
	h1{
		width:100%;
		margin-left:0px;
		font-size:24px;
	}
	
	h2{
		font-size:20px;
	}
	
	h3{
		font-size:20px;
	}
	
	#subtitle{
		font-size:20px;		
	}
	
	.sidebarsticky, .orientiontitle_wrapper{
		display:none;
	}
	
	.sidetipp{
		position: relative;
		border-radius: 5px;
		padding: 10px 20px;
		width: auto;
		left:auto;
	}
	
	.sidetipptitle{
		font-size:18px;
		margin-bottom:10px;	
	}
	
	.table-container {
		overflow-x: auto; 
		position: relative; 
		width:calc(100% + 60px);
		overflow-x: scroll;
		margin-left:-30px;
		scrollbar-width: none; /* Für Firefox: Scrollbar ausblenden */
	}

	.table-container::-webkit-scrollbar {
		display: none; /* Für Chrome, Safari und Edge: Scrollbar ausblenden */
	}
	
	.fixed-column {
		position: sticky;
		left: 0;
		background-color: #ffffff; /* Hintergrund der fixierten Spalte */
		z-index: 2; /* Sorgt dafür, dass die Spalte immer über den anderen Zellen liegt */
		white-space: nowrap;
	}
	
	.standard-table{
		table-layout:auto;
	}
	
	.standard-table th, .standard-table td{
		border-radius:0px;
		min-width:170px;
		max-width:170px;
	}
	
	.standard-table td{
		font-size:14px;
	}
	
	.standard-table th {
		font-size:16px;
	}
	
	.standard-table td:first-child, .standard-table th:first-child {
		min-width:80px;
		max-width:150px;
		width:100px;
	}
	
	.questions{		
		padding-right: 30px;
		font-size:18px;
	}
	
	.sidetipp_wrapper{
		position: static; 
		width: 100%;
		display: block;
		justify-content: left; 
	}
	
	.productimg{
		float:none;
		padding:0px;
		max-height: 300px;
		Margin: Auto;
		Display: Flex;
	}
	
	#zumquizwrapper{
		width: calc(100% - 30px);
	}

	#toquiz-title{
		font-size: 22px;
	}

	#toquizbutton{
		max-width:160px;
	}
	
	#quiz-title{
		font-size:22px;		
	}
	
	#start-button{
		font-size:24px;
		width: 80%;
		max-width: 200px;
		height: 30px;
	}
	
	
	#quiz-container {
		width: calc(100% + 10px);
		margin-left:-30px;
		border-radius:0px;
	}
	
	.answer-option {
		font-size:16px;
	}
	
	#ergebnisproduktwrapper {
		grid-template-areas:
			"right"
			"left";
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		border-radius: 8px;
	}

	#ep-left {
		grid-area: left;
		display: flex;
		flex-direction: column;
		justify-content: start;
		text-align: center;
		position:relative;
		padding-top: 10px;
	}

	#ep-right {
		grid-area: right;
	}
	
	#ep-left .tablelink {		
		font-size:20px;
		position:relative;
		margin-bottom:10px;
	}
	
	.quizprice {	
		font-size:20px;		
	}
	
	#ep-left .sellerimg {
		margin:0px auto;
	}
	
	#quiz-title-result {
		margin-top:10px;
	}
	
	.h3-quiz{
		font-size:18px;
	}	
	
	.zumshoplink {
		position:relative;
		margin-top:20px;
	}
	
	#resulttitle{
		font-size: 16px;
	}
}