* {
	box-sizing: border-box;
	font-family: "Verdana", Segoe, Helvetica, Arial, sans-serif;
}
:root { 
	--acc: #003154;
	--alt: #B4936F;
	--grey: #eee;
}
body {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 16px;
	padding: 0 20px;
}
/* GENERAL */
h1, h2, h3, h4, h5, p, ol, ul {
	margin: 0;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1rem;
}
.side-note {
	font-size: .8rem
}
ul > li:not(:last-child), ol > li:not(:last-child) {
	margin-bottom: 10px;
}
.underline {
	text-decoration: underline;
}
.justify-space-between {
	justify-content: space-between;
}
.align-space-between {
	align-items: space-between;
}
.w-100 {
	width: 100%;
}
/* FORM */
#formular {
	max-width: 1000px;
	margin: 0 auto
}
/* FORM LAYOUT */
.customRow {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 20px;
	margin: 50px 0;
}
.customRow .customColumn, 
.customRow .customColumn-1-2, 
.customRow .customColumn-1-3, 
.customRow .customColumn-2-3, 
.customRow .customColumn-1-4, 
.customRow .customColumn-3-4 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.customRow .customColumn :last-child, 
.customRow .customColumn-1-2 :last-child, 
.customRow .customColumn-1-3 :last-child, 
.customRow .customColumn-2-3 :last-child, 
.customRow .customColumn-1-4 :last-child, 
.customRow .customColumn-3-4 :last-child {
	margin-bottom: 0;
}
.customRow.align-center .customColumn, 
.customRow.align-center .customColumn-1-2, 
.customRow.align-center .customColumn-1-3, 
.customRow.align-center .customColumn-2-3, 
.customRow.align-center .customColumn-1-4, 
.customRow.align-center .customColumn-3-4 {
	display: flex;
	flex-direction: column;
    justify-content: center;
}
.customRow .customRow {
	margin: 0 !important;
}
.customRow .customColumn {
	flex: 1 0 100%;
	max-width: 100%
}
.customRow .customColumn {
	flex: 1 0 100%;
	max-width: 100%
}
.customRow .customColumn-1-2 {
	flex: 1 0 calc((100% - 20px) / 2);
	max-width: calc((100% - 20px) / 2);
}
.customRow .customColumn-1-3 {
	flex: 1 0 calc((100% - 40px) / 3);
	max-width: calc((100% - 40px) / 3);
}
.customRow .customColumn-2-3 {
	flex: 1 0 calc((100% - 40px) / 3 * 2);
	max-width: calc((100% - 40px) / 3 * 2);
}
.customRow .customColumn-1-4 {
	flex: 1 0 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
}
.customRow .customColumn-3-4 {
	flex: 1 0 calc((100% - 20px) / 4 * 3);
	max-width: calc((100% - 20px) / 4 * 3);
}
.customRow:has(> .customColumn-3-4) > .customColumn-1-4 {
	flex: 1 0 calc((100% - 20px) / 4);
	max-width: calc((100% - 20px) / 4);
}
.customRow span {
	width: 100%;
}
.customRow>span.kc_captcha,
.customRow>span.kc_captcha span {
	width: initial;
}
#formular input, #formular textarea, #formular select {
	width: 100%;
	font-size: 16px;
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	background: #fff;
	line-height: 1;
}
#formular select {
	cursor: pointer;
}
#formular input:disabled, #formular textarea:disabled, #formular select:disabled {
	background: #fafafa;
}
#formular input[type*=radio],
#formular input[type=checkbox],
#formular input[type=submit] {
	width: fit-content;
	display: inline
}
#formular input[type*="radio"], form input[type*="checkbox"] {
	padding: 0 !important;
	margin: 0 !important;
}
/* FORM FILE UPLOAD */
#formular .file-zone {
	border: #ddd 2px dashed;
    padding: 25px;
}
#formular .file-zone p {
	margin-top: 0;
}
#formular .file-zone #file-list {
	margin-bottom: 0;
	margin-top: 10px;
}
#formular .file-zone #file-list:empty {
	margin: 0;
	padding: 0;
}
/* FORM FILE UPLOAD BUTTON */
#formular input[type="file"] {
  display: none;
}
#formular .custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  margin-top: 10px;
}
/* FORM LABELS */
#formular label {
	display: block;
}
#formular label:last-child {
	margin-bottom: 0px;
}
#formular .input-label {
	display: inline-flex;
    align-items: center;
    gap: 5px;
	margin-right: 5px;
}
.form_message_box {
	font-size: 1.25em;
	color: green;
	display: flex;
    flex-direction: column;
    gap: 20px;
}
/* FORM TABLE */
#formular table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
#formular table tbody tr th:first-child {
	text-align: left;
}
#formular table td, #formular table th {
	padding: 5px;
	border: 1px solid #eee;
}
#formular table th {
	padding: 5px 20px;
}

input:invalid {
  border: solid 1px red !important;
}
@media(max-width: 767px) {
  #formular table {
    border: 0;
  }
  #formular table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #formular table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  #formular table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  #formular table td::before {
    content: attr(data-label);
    float: left;
  }
  #formular table td:first-child {
    font-weight: bold;
  }
  #formular table td:last-child {
    border-bottom: 0;
  }
}
/* FORM SUBMIT */
button, input[type=submit] {
	border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
	font-size: 18px;
	width: fit-content;
	font-weight: bold;
}
.submit-button {
	font-weight: bold;
	font-size: 22px !important;
	display: inline-block;
}
/* SIGNATURE */
#formular canvas {
	position: relative;
	margin: 0;
	padding: 0;
	width: 340px;
	height: 110px;
	touch-action: none;
	border: 1px solid;
	border-color: #ccc;
}
#formular input[id*=sig-dataUrl] {
	display: none;
}
@media print {
	#unterschrift {
		width: 240px !important;
		height: 77px !important;
		position: absolute;
		bottom: 0
	}
}
img[src=""] {
	visibility: hidden
}
.unterschrift-hinweis::after {
	content: " Ihrer Maus.)";
}
@media(max-width: 767px) {
	.unterschrift-hinweis::after {
		content: " Ihrem Finger.)";
	}
}
/* MEDIA QUERIES */
@media(max-width:767px) {
	.customRow .customColumn,
	.customRow .customColumn-1-2,
	.customRow .customColumn-1-3,
	.customRow .customColumn-2-3,
	.customRow .customColumn-1-4,
	.customRow .customColumn-3-4	{
		flex: 1 0 100% !important;
		max-width: 100% !important;
	}
}

@media(max-width:576px) {
	iframe {
		width: 100%;
	}
}