/* CSS Reset und Basiskonfigurationen aus dem hochgeladenen CSS */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Farbvariablen: Hexcode anpassen um Farbe global zu ändern var(--XXX); */
:root {
    --color-main: #36465A; 
    --color-main2: #8090a5;
    --color-main3: #e6e8ea;
    --color-header: #333;
	--color-StateGreen:		#eafaf1;
	--color-StateNeutral:	#f2f3f4;
	--color-StateUnknown:	#fef9e7;
    --container-color: #e0ddd9;
    --text-main: #000000dd;
    --text-caption: white;
    --bg-caption: #333333a0;
    --tab-header: white;
    --text-optional: #999999;
}


body {
	font-family:		Arial, sans-serif;
	background-color:	#f4f4f9;
	margin:				0;
	padding:			0;
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
	align-items:		center;
	height:				100vh;
}


button img {
	height:		2em;
	width:		2em;
}


a {
	text-decoration:	none;
}

h1, h2, h3, h4 {
    text-align: center;
    letter-spacing: 3px;
    color: var(--text-main);
    font-weight: bold;
    margin-bottom: 0.5em;
    padding: 0em 0em 0.7em 0em;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

h1 {
	margin-top:		1.0em;
}

h2 {
	margin:			1em 1em 0em 1em;
}

input {
	border:		1px solid darkgrey;
	padding:	0.2em;
	font-size:	1.0em;
}

input[type="submit"] {
	padding:	0.2em 0.7em;
	margin:		0.2em 0.7em;
}

p {
	margin-bottom:	2em;
}

/* horizontale Button-Group */
.HButtons {
	margin:		0.5em 0;
	width:		60%;
	text-align:	left;
}
		.HButtons button {
			border:			1px solid darkgrey;
			border-radius:	3px;
			margin-right:	1.5em;
			padding:		0.2em 0.7em;
		}


        @media (max-width: 768px) {
			.responsive-table {
				width: 100%;
				margin: 0;
			}
			
            .responsive-table th, .responsive-table td {
                padding: 8px 10px;
            }
        }
        
        @media (max-width: 480px) {
			.responsive-table {
				width: 100%;
				margin: 0;
			}
			
            .responsive-table th, .responsive-table td {
                padding: 6px 8px;
                font-size: 0.8em;
            }
        }
		

/* StateColors */
.StateGreen		{ background-color:	var(--color-StateGreen);	}
.StateNeutral	{ background-color:	var(--color-StateNeutral);	}
.StateUnknown	{ background-color:	var(--color-StateUnknown);	}


.MainMenu {
	display:		flex;
	flex-direction:	column;
	align-items:	center;
}
		.MainMenu button {
			display:		block;
			width:			16em;
			padding:		0.5em 1em;
			border:			1px solid black;
			border-radius:	4px;
			margin-bottom:	1em;
		}

.ContentHeader {
	display:			flex;
	padding:			0;
	width:				98%;
	max-width:			400px;
}
		.ContentHeader button {
			background-color:	white;
			border:				1px solid gray;
			border-radius:		4px;
			margin:				0.0em 0.5em 0.0em 0.5em;
			padding:			0.1em 0.4em;
		}
		.ContentHeader h1 {
			padding:			0.8em 0 0.8em 2em;
			margin:				0;
		}
		

.SectionHeader {
	border-top:	1px solid black;
	margin-top:	0.3em;
	padding:	0.3em 0 0 0;
	font-size:	1.2em;
	width:		98%;
	max-width:	400px;
	text-align:	center;
}


.ButtonSection {
	display:			flex;
	width:				98%;
	max-width:			400px;
}

		.ButtonSection button {
			border:			1px solid black;
			border-radius:	3px;
			margin:			0 0.5em 0 0.5em;
			padding:		0.1em 0.2em 0.1em 0.2em;
		}

.ContentSection {
	display:			flex;
	justify-content:	center;
	background:			#fff;
	padding:			0.4em;
	border-radius:		10px;
	box-shadow:			0 4px 6px rgba(0, 0, 0, 0.1);
	width:				98%;
	max-width:			400px;
}


/* FormContainer */
.FormContainer {
	background:		#fff;
	padding:		20px;
	border-radius:	10px;
	box-shadow:		0 4px 6px rgba(0, 0, 0, 0.1);
	width:			90%;
	max-width:		400px;
}

        .FormContainer button {
            width:				100%;
            padding:			10px;
            font-size:			1rem;
            color:				#fff;
            background-color:	#007BFF;
            border:				none;
            border-radius:		5px;
            cursor:				pointer;
        }

        .FormContainer button:hover {
            background-color:	#0056b3;
        }

        .FormContainer h1 {
            text-align:		center;
            margin-bottom:	20px;
            font-size:		1.5rem;
        }
		
        .FormContainer .Group {
            margin-bottom:	15px;
        }

        .FormContainer .Group label {
            display:		block;
            margin-bottom:	5px;
            font-size:		0.9rem;
            color:			#333;
        }

        .FormContainer .Group input {
            width:			100%;
            padding:		10px;
            font-size:		1rem;
            border:			1px solid #ccc;
            border-radius:	px;
            box-sizing:		border-box;
        }

        .FormContainer .Group input:focus {
            outline:		none;
            border-color:	#007BFF;
        }


        .ResponsiveTable {
            width:				100%;
            border-collapse:	collapse;
            margin:				0;
        }
        
        .ResponsiveTable th, .ResponsiveTable td {
            padding: 12px 15px;
            border: 1px solid var(--color-main);
            text-align: left;
        }
        
			.ResponsiveTable th.right, .ResponsiveTable td.right {
				text-align:	right;
			}

        .ResponsiveTable th {
            background-color: var(--color-main);
            color: var(--tab-header);
        }

/* Responsive adjustments */
@media (min-width: 768px) {
    .container {
        width: 80%;
    }
}