/*
	Erweiterung für die Unterseiten von picmedia.de
	(Kontakt, Bestätigung, Datenschutz, Impressum)
	Basierend auf: Parallelism by HTML5 UP (html5up.net | CCA 3.0)
*/

/* Seitenbereich */

	#page {
		width: 100%;
		padding: 4em 2em;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.panel {
		background-color: #000000;
		background-image: url("images/overlay.png");
		box-shadow: 0 0 0 10px #FFFFFF;
		padding: 3em 3.5em;
		width: 100%;
		max-width: 62em;
	}

		.panel .brand {
			text-align: center;
			margin: 0 0 2.5em 0;
		}

			.panel .brand img {
				max-width: 14em;
				width: 80%;
				height: auto;
			}

/* Typografie */

	.panel h1 {
		font-size: 2em;
		color: #fff;
		letter-spacing: -0.05em;
		line-height: 1.25em;
		margin: 0 0 1em 0;
	}

	.panel h2 {
		font-size: 1.2em;
		color: #fff;
		margin: 1.75em 0 0.5em 0;
	}

	.panel p {
		margin: 0 0 1em 0;
	}

	.panel ul.text {
		list-style: disc;
		margin: 0 0 1em 1.5em;
	}

		.panel ul.text li,
		.panel ol.text li {
			margin: 0.25em 0;
		}

	.panel ol.text {
		list-style: decimal;
		margin: 0 0 1em 1.5em;
	}

	.panel hr {
		border: 0;
		border-top: solid 1px rgba(255, 255, 255, 0.15);
		margin: 2em 0;
	}

	.panel address {
		font-style: normal;
		margin: 0 0 1em 0;
	}

	.todo {
		color: #d64760;
		font-weight: 600;
	}

/* Hinweis-/Fehlerbox */

	.alert {
		border: solid 1px #d64760;
		padding: 1.25em 1.5em;
		margin: 0 0 1.75em 0;
	}

		.alert strong {
			color: #d64760;
		}

		.alert ul {
			list-style: disc;
			margin: 0.75em 0 0 1.5em;
		}

/* Formular */

	form .row {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 -0.75em;
	}

		form .field {
			-moz-flex: 1 1 45%;
			-webkit-flex: 1 1 45%;
			-ms-flex: 1 1 45%;
			flex: 1 1 45%;
			min-width: 16em;
			padding: 0 0.75em;
			margin: 0 0 1.5em 0;
		}

			form .field.full {
				-moz-flex-basis: 100%;
				-webkit-flex-basis: 100%;
				-ms-flex-basis: 100%;
				flex-basis: 100%;
			}

		form label {
			display: block;
			color: rgba(255, 255, 255, 0.85);
			font-weight: 600;
			margin: 0 0 0.35em 0;
		}

		form input[type="text"],
		form input[type="email"],
		form textarea {
			width: 100%;
			background: rgba(255, 255, 255, 0.07);
			border: solid 1px rgba(255, 255, 255, 0.25);
			color: #fff;
			padding: 0.65em 0.85em;
			font-family: inherit;
			font-size: 1em;
			line-height: 1.5em;
			outline: 0;
			-moz-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
			-webkit-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
			-ms-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
			transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
		}

			form input[type="text"]:focus,
			form input[type="email"]:focus,
			form textarea:focus {
				border-color: #d64760;
				background: rgba(255, 255, 255, 0.11);
			}

		form textarea {
			min-height: 11em;
			resize: vertical;
		}

		form input[type="checkbox"] {
			-moz-appearance: checkbox;
			-webkit-appearance: checkbox;
			appearance: checkbox;
			width: 1em;
			height: 1em;
			margin: 0 0.6em 0 0;
			vertical-align: -0.1em;
		}

		form .checkbox label {
			display: inline;
			font-weight: 400;
			color: inherit;
		}

	/* Honeypot (Spamschutz) – unsichtbar für Besucher */

		.hp {
			position: absolute;
			left: -9999px;
			top: -9999px;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

/* Buttons */

	button,
	.button {
		display: inline-block;
		background: transparent;
		border: solid 1px rgba(255, 255, 255, 0.5);
		color: #fff;
		padding: 0.75em 2.5em;
		font-family: inherit;
		font-size: 1em;
		font-weight: 600;
		line-height: 1.5em;
		cursor: pointer;
		text-align: center;
		-moz-transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out;
		-webkit-transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out;
		-ms-transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out;
		transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out;
	}

		button:hover,
		.button:hover {
			border-color: #d64760;
			color: #d64760;
		}

/* Großes Bestätigungs-Icon (Danke-Seite) */

	.panel .icon-xl {
		display: block;
		text-align: center;
		font-size: 3.5em;
		color: #d64760;
		margin: 0 0 0.35em 0;
	}

	.center {
		text-align: center;
	}

/* Mobil */

	@media screen and (max-width: 736px) {

		#page {
			padding: 2.5em 1.25em;
		}

		.panel {
			padding: 2em 1.5em;
		}

		form .field {
			-moz-flex-basis: 100%;
			-webkit-flex-basis: 100%;
			-ms-flex-basis: 100%;
			flex-basis: 100%;
			margin: 0 0 1.25em 0;
		}

	}