.ejw-girocode {
	box-sizing: border-box;
	max-width: 760px;
	margin: 1.5em auto;
	padding: 1.5em;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: #fff;
	color: #222;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
	line-height: 1.5;
}
.ejw-girocode *, .ejw-girocode *::before, .ejw-girocode *::after { box-sizing: border-box; }

.ejw-girocode__title { margin: 0 0 1em; }

.ejw-girocode__warning {
	margin: 0 0 1em;
	padding: .6em .9em;
	border-left: 4px solid #c62828;
	background: #fdecea;
	color: #7f1d1d;
	font-size: .9em;
}

.ejw-girocode__body {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em 2em;
	align-items: flex-start;
}

.ejw-girocode__details { flex: 1 1 280px; margin: 0; }
.ejw-girocode__details dt {
	margin: 0;
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #666;
}
.ejw-girocode__details dd { margin: 0 0 .9em; word-break: break-word; }

.ejw-girocode__iban { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.ejw-girocode__iban-value { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05em; }
.ejw-girocode__copy {
	min-height: 40px;
	padding: .35em .9em;
	border: 1px solid #888;
	border-radius: 6px;
	background: #f5f5f5;
	color: #222;
	font: inherit;
	font-size: .9em;
	line-height: 1.2;
	cursor: pointer;
}
.ejw-girocode__copy:hover, .ejw-girocode__copy:focus-visible { background: #e8e8e8; }

.ejw-girocode__qr-wrap { flex: 0 1 260px; margin: 0 auto; text-align: center; }

.ejw-girocode__amount { display: block; margin-bottom: 1em; text-align: left; }
.ejw-girocode__amount-label { display: block; font-weight: 600; margin-bottom: .25em; }
.ejw-girocode__amount-field { display: flex; align-items: center; gap: .4em; }
.ejw-girocode input.ejw-girocode__zweck-input { width: 100%; }
.ejw-girocode input.ejw-girocode__amount-input,
.ejw-girocode input.ejw-girocode__zweck-input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: .4em .6em;
	border: 1px solid #888;
	border-radius: 6px;
	background: #fff;
	color: #222;
	font: inherit;
	font-size: 1.1em;
}
.ejw-girocode input.ejw-girocode__amount-input.is-invalid { border-color: #c62828; outline-color: #c62828; }
.ejw-girocode__hint { display: block; margin-top: .25em; font-size: .8em; color: #666; }

.ejw-girocode__qr { width: 100%; max-width: 240px; margin: 0 auto; }
.ejw-girocode__qr svg { display: block; width: 100%; height: auto; }
.ejw-girocode__caption { margin: .4em 0 0; font-size: .85em; color: #555; }

@media (max-width: 480px) {
	.ejw-girocode { padding: 1em; border-radius: 0; border-left: 0; border-right: 0; }
	.ejw-girocode__qr-wrap { flex-basis: 100%; }
}