/* Define the Grid Layout */
@media only screen and (min-width: 280px) {
	.wrapper {
		font-size: smaller;
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		grid-template-areas:
			"logo"
			"login"
			"title"
			"content"
			"actions"
			"footer"
			"debug";
	}

	.logo img {
		max-width: 128px;
	}
}

@media only screen and (min-width: 800px) {
	.wrapper {
		font-size: inherit;
		display: grid;
		grid-template-columns: 3fr 1fr;
		gap: 8px;
		grid-template-areas:
			"logo login"
			"title actions"
			"content actions"
			"footer footer"
			"debug debug"
	}

	.logo img {
		max-width: 100%;
	}
}

@media only print {
	.button {
		display: none;
	}

	.language__code {
		display: none;
	}

	.actions {
		display: none;
	}

	.footer {
		display: none;
	}

	table { page-break-after:auto }
	tr    { page-break-inside:avoid; page-break-after:auto }
	td    { page-break-inside:avoid; page-break-after:auto }
	thead { display:table-header-group }
	tfoot { display:table-footer-group }

}

/* Grid placement of blocks */
.logo {
	grid-area: logo;
	margin: 8px;
}

.login {
	grid-area: login;
	margin: 8px;
}

.content {
	grid-area: content;
	margin: 8px;
}

.actions {
	grid-area: actions;
	margin: 8px;
}

.footer {
	grid-area: footer;
	margin: 8px;
}

.debug {
	grid-area: debug;
	margin: 8px;
}

/* HTML element styling */
label {
	display: block;
	margin: 4px;
	margin-top: 4px;
}

body {
	font-family: TheinhardtMedium, Helvetica, Arial, Sans;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}

h1, h2, h3 {
	text-transform: uppercase;
	font-family: TheinhardtBold;
}

a {
	font-weight: bold;
	text-decoration: underline;
	color: #3155a4;
}

input[type=submit] {
	border: 0;
	font-weight: bold;
	font-size: inherit;
	color: white;
	background-color: black;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 8px;
}

input[type=submit]:hover {
	background-color: grey;
}

input[type=text], input[type=password], input[type=email], input[type=date] {
	background-color: #919191;
	color: white;
	font-size: larger;
	margin: 8px;
	margin-top: 4px;
	filter: drop-shadow(4px 4px 4px #808080);
}

input[type=submit] {
	filter: drop-shadow(4px 4px 4px #000000);
}

select {
	background-color: #919191;
	color: white;
	font-size: larger;
	margin: 8px;
	margin-top: 4px;
	filter: drop-shadow(4px 4px 4px #808080);
}

table, th, tr, td {
	border: 0px;
	border-collapse: collapse;
	padding: 4px;
}

th {
	text-align: left;
}
/* Block, element, and modifier styling */
.actions a {
	text-decoration: none;
}

.content__tagline {
	font-size: larger;
	font-weight: bold;
	text-transform: uppercase;
	color: #e41513;
}

.content__passes :is(a, td) {
	color: white;
}

.content__passes table {
	border-spacing: 12px;
	border-collapse: separate;
	border-left-color: #3fa535;
}

.content__passes td {
	padding: 12px;
	background-color: #3fa535;
}

.content__validity {
	color: #3fa535;
}

.title {
	margin: 8px;
	grid-area: title;
	text-transform: uppercase;
	color: #e41513;
}

.footer a {
	text-decoration: none;
}

.footer__faq a {
	color:#e41513;
}

.footer__dataprotection a {
	color: black;
}

.footer__conditions_of_use a {
	color: black;
}

.footer__imprint a {
	color: black;
}
.footer__contact a {
	color: #3fa535;
}

.debug :is(table, td) {
	border: solid 1px;
}

.button {
	color: white;
	background-color: black;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	filter: drop-shadow(4px 4px 4px #000000);
}

.button:hover {
	background-color: #919191;
}

.fivedigits {
	width: 5em;
}

.language__code {
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	color: black;
}

.th--right-align, .td--right-align {
	text-align: right;
}

.h2--email {
	text-transform: none;
	font-family: TheinhardtMedium;
}