/*
	Praxis Dipl.-Psych. Sina Bein, Lüneburg
	Gestaltung nach „Astral“ von HTML5 UP (html5up.net, CCA 3.0) —
	Maße, Farben und Abläufe wie in der bisherigen Seite, nur ohne
	jQuery und ohne die ungenutzten Teile der Vorlage.
*/

/* Schriften
   Vollkorn (SIL Open Font License) — nur die beiden Schnitte, die die
   Seite zeigt, und nur westeuropäische Zeichen. Die drei Symbole stammen
   aus Font Awesome Free 5 (SIL OFL 1.1). */

	@font-face {
		font-family: 'Vollkorn';
		src: url('/assets/fonts/vollkorn-400.woff2') format('woff2');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Vollkorn';
		src: url('/assets/fonts/vollkorn-600-italic.woff2') format('woff2');
		font-weight: 600;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'Symbole';
		src: url('/assets/fonts/symbole.woff2') format('woff2');
		font-weight: 900;
		font-style: normal;
		font-display: block;
	}

/* Grundlage */

	html, body, div, span, h1, h2, h3, p, a, b, u, img, ul, li,
	main, nav, article, header, footer {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	main, nav, article, header, footer {
		display: block;
	}

	ul {
		list-style: none;
	}

	[hidden] {
		display: none !important;
	}

	html {
		box-sizing: border-box;
		/* Mittelton des Verlaufs — steht da, bis das Bild geladen ist. */
		background-color: #dfa898;
	}

	*, *::before, *::after {
		box-sizing: inherit;
	}

	body {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		overflow-y: scroll;
	}

		/* Der Verlauf liegt auf einer eigenen, festen Ebene statt auf
		   background-attachment: fixed — das kennt Safari auf iPhone und
		   iPad nicht und zöge das Bild dort über die ganze Seitenhöhe. */
		body::before {
			content: '';
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			background-image: url('/images/overlay.png'), url('/images/bg.jpg');
			background-repeat: repeat, no-repeat;
			background-size: auto, 100% 100%;
		}

		body.is-preload *, body.is-preload *::before, body.is-preload *::after {
			animation: none !important;
			transition: none !important;
		}

	body {
		font-family: 'Vollkorn', serif;
		font-weight: 400;
		color: #5A5C57;
		font-size: 20pt;
		line-height: 1.75em;
	}

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

			body {
				font-size: 15pt;
			}

		}

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

			body {
				font-size: 14pt;
			}

		}

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

			body {
				font-size: 12pt;
			}

		}

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

			body {
				font-size: 11pt;
			}

		}

	a {
		color: #5A5C57;
		text-decoration: none;
	}

		a:hover, a:active {
			color: #405829;
		}

	b, strong, h1, h2, h3 {
		font-weight: 600;
		font-style: italic;
		color: #405829;
	}

	u {
		text-decoration: underline;
	}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.25em;
	}

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

		h1 {
			font-size: 1.75em;
		}

		h2 {
			font-size: 1.375em;
		}

		h3 {
			font-size: 1em;
		}

	}

	p, ul {
		margin-bottom: 2em;
	}

	article > :last-child {
		margin-bottom: 0;
	}

	header {
		margin: 0 0 1.5em 0;
	}

		header > p {
			margin: 0.5em 0 0 0;
			color: #5A5C57;
		}

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

			header {
				margin: 0 0 1em 0;
			}

		}

/* Symbole */

	.icon {
		position: relative;
		text-decoration: none;
	}

		.icon::before {
			display: inline-block;
			font-family: 'Symbole';
			font-weight: 900;
			font-style: normal;
			font-variant: normal;
			line-height: inherit;
			text-rendering: auto;
			text-transform: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon-home::before {
			content: '\f015';
		}

		.icon-envelope::before {
			content: '\f0e0';
		}

		.icon-chevron-right::before {
			content: '\f054';
		}

/* Navigation */

	#nav {
		text-align: center;
		height: 4.25em;
		cursor: default;
	}

		#nav a {
			position: relative;
			display: inline-block;
			color: #ffffff;
			width: 1em;
			height: 1em;
			line-height: 0.9em;
			font-size: 2.5em;
			margin: 0 0.25em 0 0.25em;
			opacity: 0.35;
			outline: 0;
			transition: opacity .25s ease-in-out;
		}

			#nav a::before {
				font-size: 0.8em;
			}

			/* Das Dreieck unter dem Symbol der offenen Tafel. */
			#nav a::after {
				content: '';
				display: block;
				position: absolute;
				left: 50%;
				bottom: -0.75em;
				margin-left: -0.5em;
				border-bottom: solid 0em #ffffff;
				border-left: solid 0.5em transparent;
				border-right: solid 0.5em transparent;
				transition: border-bottom-width .25s ease-in-out;
			}

			#nav a span {
				display: block;
				position: absolute;
				background: #222222;
				color: #ffffff;
				top: -2.75em;
				font-size: 0.3em;
				height: 2.25em;
				line-height: 2.25em;
				left: 50%;
				opacity: 0;
				transition: opacity .25s ease-in-out;
				width: 5.5em;
				margin-left: -2.75em;
			}

				#nav a span::after {
					content: '';
					display: block;
					position: absolute;
					bottom: -0.4em;
					left: 50%;
					margin-left: -0.6em;
					border-top: solid 0.6em #222222;
					border-left: solid 0.6em transparent;
					border-right: solid 0.6em transparent;
				}

			#nav a:hover, #nav a:focus-visible {
				opacity: 1.0;
			}

				#nav a:hover span, #nav a:focus-visible span {
					opacity: 1.0;
				}

			#nav a.active {
				opacity: 1.0;
			}

				#nav a.active::after {
					border-bottom-width: 0.5em;
				}

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

			#nav a span {
				display: none;
			}

		}

/* Rahmen */

	#wrapper {
		width: 45em;
		margin: 0 auto;
		min-height: 100vh;
		max-width: 100%;
		padding: 4em 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: opacity 1s ease-in-out;
	}

		body.is-preload #wrapper {
			opacity: 0;
		}

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

			#wrapper {
				padding: 3em 0;
				max-width: calc(100% - 6em);
			}

		}

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

			#wrapper {
				padding: 1.5em 0;
				max-width: calc(100% - 8em);
			}

		}

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

			#wrapper {
				padding: 1em 0;
				max-width: calc(100% - 2em);
			}

		}

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

			#wrapper {
				padding: 1em 0;
				max-width: 100%;
			}

		}

/* Tafeln */

	#main {
		position: relative;
		overflow: hidden;
		width: 100%;
		background: #ffffff;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25);
		transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
	}

		#main > .panel {
			transition: opacity 0.25s ease-in-out;
			margin-bottom: 0;
			position: relative;
			padding: 3.5em 2.5em 2.5em 2.5em;
			width: 100%;
			outline: 0;
			/* Notbremse für überlange Wörter auf schmalen Bildschirmen: lieber
			   mitten im Wort umbrechen als aus dem Rahmen laufen. Die erwünschte
			   Stelle steht im HTML als <wbr>, etwa nach „…beilegung/“. */
			overflow-wrap: break-word;
		}

			#main > .panel.inactive {
				opacity: 0;
			}

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

				#main > .panel {
					padding: 2em 1.5em 1.5em 1.5em;
				}

			}

			#main > .panel.intro {
				padding: 0;
				height: 20em;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

				#main > .panel.intro .pic {
					text-decoration: none;
					position: relative;
					flex-grow: 0;
					flex-shrink: 0;
					width: 17em;
					height: 100%;
				}

					#main > .panel.intro .pic img {
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}

					#main > .panel.intro .pic .arrow {
						display: block;
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -1.375em;
						width: 2.75em;
						height: 2.75em;
						background: rgba(0, 0, 0, 0.75);
						color: #ffffff;
						text-align: center;
						line-height: 2.75em;
						font-size: 1.5em;
						z-index: 1;
						transition: width .15s ease-in-out, padding-right .15s ease-in-out;
					}

						#main > .panel.intro .pic .arrow::before {
							position: relative;
							top: 0.125em;
						}

						#main > .panel.intro .pic .arrow span {
							display: block;
							text-indent: -9999px;
						}

					#main > .panel.intro .pic:hover .arrow,
					#main > .panel.intro .pic:focus-visible .arrow {
						width: 3em;
						padding-right: 0.25em;
					}

				#main > .panel.intro header {
					flex-grow: 1;
					flex-shrink: 1;
					padding: 3.5em 2.5em;
					margin-bottom: 0;
					width: 100%;
				}

					#main > .panel.intro header h1 {
						line-height: 1.25em;
						margin-bottom: 0;
					}

					#main > .panel.intro header p {
						font-size: 1.15em;
						margin: 0.25em 0 0 0;
					}

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

					#main > .panel.intro {
						flex-direction: column;
						height: auto;
					}

						#main > .panel.intro .pic {
							height: 25em;
							width: 100%;
						}

						#main > .panel.intro header {
							padding: 4em;
							text-align: center;
						}

				}

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

					#main > .panel.intro .pic {
						height: 20em;
					}

						#main > .panel.intro .pic img {
							object-position: center 18%;
						}

					#main > .panel.intro header {
						padding: 2.75em 2em 2.5em 2em;
					}

						#main > .panel.intro header p {
							font-size: 1em;
							margin: 0.25em 0 0 0;
						}

				}

/* Fußzeile */

	#footer {
		color: rgba(255, 255, 255, 0.45);
		text-align: center;
		padding: 2em 0 0 0;
		font-size: 0.75em;
	}

		#footer a {
			color: rgba(255, 255, 255, 0.65);
			transition: color .25s ease-in-out;
		}

			#footer a:hover {
				color: #ffffff;
			}

		#footer .copyright li {
			display: inline-block;
			padding-left: 1em;
			margin-left: 1em;
			border-left: solid 1px rgba(255, 255, 255, 0.25);
			line-height: 1;
		}

			#footer .copyright li:first-child {
				padding-left: 0;
				margin-left: 0;
				border-left: 0;
			}

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

			#footer .copyright li {
				padding-left: 0.5em;
				margin-left: 0.5em;
			}

		}