* {
	margin: 0;
	padding: 0;
}

body {
	--maxContentWidth: 900px;
	background-color: white;
	color: black;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 16px;

	p {
		color: unset;
	}
}

.dmbFeedback-header {
	padding: .5rem;
	display: grid;
	grid-template-columns: 2fr 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	place-items: center;
	max-width: var(--maxContentWidth);
	margin: 0 auto;

	a,
	a:hover {
		color: #014284;
		text-decoration: none;

		@media (width > 500px) {
			font-size: 1.25rem;
		}
	}

	i {
		margin: 0 .2rem 0 0;
		display: inline-block;
		vertical-align: middle;
		width: 1.75em;
		height: 1.75em;
		border: 1px solid #014284;
		border-radius: 50%;

		&::before {
			position: relative;
			top: .4em;
			left: .4em;
		}
	}

	.logo {
		grid-area: 1 / 1 / 2 / 3;
		justify-self: start;
		width: 80%;
		max-width: 350px;

		@media (width > 750px) {
			width: 100%;
			max-width: 260px;
		}
	}

	.phone {
		grid-area: 2 / 1 / 3 / 2;
	}

	.mail {
		grid-area: 2 / 2 / 3 / 3;
	}

	.badge {
		grid-area: 1 / 3 / 3 / 4;
		width: 18vw;
		max-width: 100px;
	}

	@media (width > 500px) {
		padding: 1rem;
	}

	@media (width > 750px) {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}
}

.dmbFeedback-hero {
	text-align: center;
	background-color: #014284;
	color: #fff;
	padding: 0 1rem 2rem 1rem;
	line-height: 1.5;
	font-weight: 300;

	header {
		height: 8rem;
		margin: 0 -1rem 0 -1rem;
		background: url("/wp-content/themes/vorlage_theme/assets/img/danke.jpg") center no-repeat;
		background-size: 170%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;

		img {
			width: 40%;
			max-width: 350px;
			padding: .5rem;
			position: relative;
			bottom: -1.5rem;
			background-color: white;
		}

		@media (width > 500px) {
			height: 10rem;
			background-size: cover;
			margin: 0 -2rem 0 -2rem;
		}

		@media (width > 1000px) {
			height: 20rem;
		}
	}

	a,
	a:visited {
		text-decoration: underline;
		color: #fff;
	}

	h1 {
		font-size: 2rem;
		font-weight: 600;
		margin: 2rem 0 1rem 0;

		@media (width > 500px) {
			margin: 3rem 0 1rem 0;
		}

		@media (width > 1000px) {
			margin: 5rem 0 1rem 0;
			font-size: 2.75rem;
		}
	}

	.dmbFeedback-nav {
		margin: 1.5rem 0 0 0;

		a,
		a:visited {
			text-decoration: underline;
			color: #fff;
		}

		a.bt {
			transition: all .25s;
		}

		a.bt,
		a.bt:visited {
			display: inline-block;
			margin: .5rem 0 0 0;
			padding: .5rem 1.25rem;
			text-decoration: none;
			background-color: #09c;
			border-radius: 2px;
		}

		a.bt:hover,
		a.bt:focus {
			background-color: #0069d9;
		}

		@media (width > 1000px) {
			margin: 3.5rem 0 0 0;
		}
	}

	p {
		max-width: var(--maxContentWidth);
		margin: 0 auto;
	}

	@media (width > 500px) {
		padding: 0 2rem 3rem 2rem;
	}
}

.dmb-ServiceContainer {
	padding: 3rem 1rem 1rem 1rem;
	color: #000;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.5;
	text-align: left;

	@media (width > 1000px) {
		padding: 2.5rem 1.5rem;
	}

	header {
		padding: 0 .75rem;
		font-size: 1rem;
		font-weight: 600;
	}

	form {
		flex-direction: column;

		hr {
			height: 0;
			margin: .75rem 0;
			border: none;
			border-top: 1px solid lightgrey;
		}

		fieldset {
			border: none;
			padding: 0;
		}

		legend {
			font-size: 1rem;
			font-weight: 300;
			padding: 0 0 0 .75rem;
		}

		label {
			font-size: 1rem;
			font-weight: 300;
			padding: 0 0 0 .75rem;
			margin-bottom: 10px;
		}

		.newstars {
			padding: .5rem;
			display: flex;
			flex-direction: row;
			gap: 0.5rem;

			.star {
				position: relative;

				input {
					position: absolute;
					opacity: 0;
					top: 3.5rem;
					right: 2rem;
					width: 0;
					height: 0;
				}

				label {
					display: block;
					width: 48px;
					height: 48px;
					cursor: pointer;
					background-color: grey;
					mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 5 L79 95 L2 40 L98 40 L21 95 Z'/></svg>");
					mask-size: 48px;
				}
			}

			&:has(input:checked) .star label {
				background-color: gold;
			}

			.star:has(input:checked)~.star label {
				background-color: grey;
			}

			.star input:focus-visible+label {
				background-color: goldenrod;
			}
		}

		.nameAndKommentar {
			display: flex;
			flex-direction: column;
		}

		input,
		textarea {
			background-color: #f7f7f7;
			font-family: sans-serif;
			font-size: 1rem;
			padding: 12px;
			border: 1px solid #c4c4c4;
			border-radius: 0;

			&::placeholder {
				font-style: italic;
			}
		}

		input:focus,
		textarea:focus {
			border: 1px solid #000;
			background-color: #fff;
			outline: none;
		}

		.submit {
			width: 100%;
			text-align: center;

		}
	}

	button {
		margin: 1rem auto;
		padding: .75rem 5rem;
		width: unset;
		font-size: 1rem;
		align-content: center;
		background-color: #09c;
		border: none;
		border-radius: 2px;

		&:hover,
		&:focus {
			border: none;
			background-color: #0069d9;
			color: #fff;
			border-radius: 2px;
		}
	}
}

.dmbInputContainer {
	.inputError {
		padding-left: .75rem;
	}
}

.dmbContainerSuccess {
	text-align: center;
	color: grey;
	padding: 2rem 0 2rem 0;
	margin: 0;
}

#dlgError {
	font-size: 1.25rem;
}