* {
	box-sizing: border-box;
}

html {
	font: 100%/1.4 --system-ui, Helvetica, Arial, sans-serif;
}

body {
	padding: 0.5em;
}

#container {
	display: flex;
	flex-direction: column;
}

#container > * {
	outline: 0px solid red;
}

#container #info p {
	display: flex;
}

#container #info p label {
	flex: 0 0 10em;
}

#container #info p label[for="iban"]::after {
	content: "";
	display: inline-block;
	background: transparent;
	width: 0.5em;
	height: 0.5em;
	margin-inline-start: 0.5ch;
	vertical-align: 0.15em;
	border-radius: 100%;
}

#container #info p label[for="iban"][data-valid="false"]::after {
	background: #ff4816;
}

#container #info p label[for="iban"][data-valid="true"]::after {
	background: #349cde;
}

#container #info p input[type="text"],
#container #info p input[type="number"],
#container #info p textarea {
	flex: 1 1 0;
	font-size: 1rem;
	padding: 0.2em;
	border: 1px solid #ddd;
}

#container #info p span {
	display: flex;
	width: 100%;
}

#container #info p span select {
	flex-basis: 6ch;
	margin-right: 1em;
	font-size: 1rem;
	padding: 0.2em;
}

#codes a[download] {
	display: inline-block;
	margin-top: 1rem;
	color: currentColor;
	text-decoration: none;
	padding: 0.2em 0.5em 0.2em;
	border: 1px solid #ddd;
	cursor: pointer;
}

#codes a[download]:is(:hover,:focus) {
	background-color: #f4f4f4;
}

.code {
	width: 10em;
	height: 10em;
}

:is(#giro, #bezahl) textarea {
	display: block;
	font-size: 1rem;
	width: 100%;
	margin-block-start: 1rem;
	border: 0;
	min-height: 14rem;
	min-height: 14lh;
	field-sizing: content;
	resize: vertical;
	word-wrap: break-word;
	word-break: break-all;
}

.note {
	background: #fbeeca;
	border-radius: 0.25em;
	padding: 0.4em 0.6em;
	font-size: 0.85rem;
}

@media only screen and (min-width: 55em) {
	body {
		padding: 2em;
	}

	#container {
		flex-direction: row;
	}

	#container > * {
		width: 50%;
	}

	#container #codes {
		padding-left: 1em;
		display: flex;
		gap: 1rem;
		justify-content: space-around;
	}

	#container #codes > div {
		width: 50%;
	}
}