/*
	* Seitenstile für den persönlichen Lebenslauf.
	* Grundlage: cm'soon von Egotype; reduzierte Grid-/Reset-Regeln aus
	* Bootstrap 3 (MIT; Lizenzhinweise siehe LICENSES.md).
	*/

/* Zentrale Text- und Akzentfarben für die gesamte Seite. */
:root {
	--text: #333;
	--blue: #335ea9;
	--grey: #444;
}

/* Grundlegende Schrift und stabile Textgröße auf mobilen Geräten. */
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* Padding und Rahmen in die angegebene Elementbreite einrechnen. */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Grundtypografie und Seitenabstände. */
body {
	position: relative;
	padding: 0;
	margin: 0;
	font-family: "proxima-nova-condensed", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--text);
}

/* Semantische HTML-Elemente als Block darstellen. */
header, nav, section {
	display: block;
}

/* Buttons übernehmen Schrift und Farbe ihres Umfelds. */
button {
	font: inherit;
	color: inherit;
}

/* SVG-Symbole an der Textmitte ausrichten. */
svg {
	vertical-align: middle;
}

/* Seitencontainer mit seitlichen Innenabständen. */
.container-fluid {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

/* Zeilen gleichen die Innenabstände der Spalten aus. */
.row {
	margin-right: -15px;
	margin-left: -15px;
}

/* Clearfix-Hilfselemente für Container mit floatenden Kindern. */
.container-fluid::before, .container-fluid::after, .row::before, .row::after, .nav::before, .nav::after, .navbar::before, .navbar::after {
	display: table;
	content: " ";
}

/* Floatende Inhalte in die Höhe des Containers einbeziehen. */
.container-fluid::after, .row::after, .nav::after, .navbar::after {
	clear: both;
}

/* Gemeinsame Grundabstände der verwendeten Grid-Spalten. */
.col-md-12, .col-md-6, .col-sm-8 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

/* Inhalte horizontal zentrieren. */
.text-center {
	text-align: center;
}

/* Oberen Standardabstand der Überschriften entfernen. */
h1, h2, h3, h4 {
	margin-top: 0;
}

/* Große Überschrift der persönlichen Einführung. */
h1 {
	font-family: "proxima-nova-extra-condensed", sans-serif;
	font-size: 45px;
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: 10px;
}

/* Überschriften der Lebenslaufbereiche. */
h2 {
	font-family: "proxima-nova-extra-condensed", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .15em;
	margin-bottom: 30px;
}

/* Akzentfarbene Zwischenüberschriften. */
h3 {
	font-family: "proxima-nova-extra-condensed", Helvetica, Arial, sans-serif;
	font-size: 26px;
	color: var(--blue);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 0;
}

/* Kleine Überschriften für ergänzende Angaben. */
h4 {
	font-family: "proxima-nova-extra-condensed", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* Standarddarstellung der Fließtextabsätze. */
p {
	font-family: "proxima-nova-condensed", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 5px;
}

/* Kleine Zusatztexte, beispielsweise Fußnoten. */
.small {
	font-family: "proxima-nova-condensed", sans-serif;
	font-size: 12px;
	font-weight: 280;
	line-height: 1.5;
	margin-bottom: 5px;
}

/* Wichtige Textstellen fett und in Akzentfarbe darstellen. */
strong, b {
	color: var(--blue);
	font-weight: 700;
}

/* Hilfsklasse für besonders leichte Schrift. */
.font-weight-200 {
	font-weight: 200;
}

/* Abstand und Bezugspunkt für die dekorative Trennlinie. */
.wrap-line {
	margin: 20px 0 50px;
	position: relative;
}

/* Kurze, zentrierte Trennlinie unter dem Element. */
.wrap-line::before {
	position: absolute;
	width: 40px;
	height: 1px;
	bottom: -30px;
	left: 50%;
	margin-left: -20px;
	content: "";
	border-bottom: 1px solid;
}

/* Weiße Schrift auf dunklen Hintergründen. */
.text-white {
	color: #fff;
}

/* Graue Schrift für zurückhaltende Texte. */
.text-grey {
	color: var(--grey);
}

/* Weißer Hintergrund mit 90 Prozent Deckkraft. */
.bg-white-09 {
	background-color: rgb(255 255 255 / 90%);
}

/* Schwarzer Hintergrund. */
.bg-black {
	background-color: #000;
}

/* Dunkelgrauer Hintergrund. */
.bg-dark {
	background-color: #333;
}

/* Grunddarstellung der Links. */
a {
	color: var(--text);
	text-decoration: none;
}

/* Links bei Mauszeigerkontakt und Aktivierung hervorheben. */
a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

/* Weiße Links auch bei Interaktion beibehalten. */
a.link-white, a.link-white:hover, a.link-white:active, a.link-white:focus {
	color: #fff;
}

/* Sichtbarer Fokusrahmen für die Tastaturbedienung. */
a:focus-visible, button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

/* Seitliche Button-Abstände innerhalb einer Zeile ausgleichen. */
.btn-row {
	margin-left: -5px;
	margin-right: -5px;
}

/* Gemeinsame Darstellung der als Button gestalteten Links. */
.btn {
	display: inline-block;
	margin: 0 5px;
	padding: 14px;
	font-family: "proxima-nova-condensed", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.42857143;
	letter-spacing: .15em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 0;
	transition: background .3s ease-in-out;
}

/* Transparenter Button mit weißem Rahmen. */
.btn.btn-border-white {
	color: #fff;
	background-color: transparent;
	border: 1px solid #fff;
}

/* Button bei Interaktion mit weißem Hintergrund hervorheben. */
.btn.btn-border-white:hover, .btn.btn-border-white:active, .btn.btn-border-white:focus {
	color: var(--text);
	background-color: #fff;
	text-decoration: none;
}

/* Einführung vertikal zentrieren; Mindesthöhe 700 Pixel. */
.vert-middle {
	min-height: 700px;
	height: 100%;
	align-items: center;
	display: flex;
}

/* Zentrierten Inhalt über die verfügbare Breite ausdehnen. */
.vert-middle > div {
	width: 100%;
	vertical-align: middle;
}

/* Oben und unten jeweils 5 Pixel Innenabstand. */
.p-t-b-5 {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Oben und unten jeweils 15 Pixel Innenabstand. */
.p-t-b-15 {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Oben und unten jeweils 30 Pixel Innenabstand. */
.p-t-b-30 {
	padding-top: 30px;
	padding-bottom: 30px;
}

/* Navigation in der mobilen Grundansicht ausblenden. */
header {
	display: none;
}

/* Grundmaße und Rahmen der Navigationsleiste. */
.navbar {
	min-height: 50px;
	margin-bottom: 20px;
	border: 1px solid transparent;
}

/* Navigation am oberen Fensterrand fixieren. */
.navbar-fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
	border-width: 0 0 1px;
}

/* Platz und Bezugspunkt innerhalb der Navigationsleiste. */
.navbar-wrapper {
	height: 60px;
	position: relative;
}

/* Navigationslinks rechtsbündig mit eigener Typografie. */
.navbar-links {
	float: right;
	font-family: "proxima-nova-condensed", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .15em;
	text-transform: uppercase;
}

/* Standardabstände und Listenpunkte entfernen. */
.navbar-links ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

/* Links nebeneinander anordnen und Einblendung animieren. */
.navbar-links li {
	float: left;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

/* Bootstrap-artige Linkabstände zurücksetzen. */
.navbar-links .nav > li > a {
	display: inline;
	padding: 0;
}

/* Abstände zwischen den Navigationspunkten. */
.navbar-links .nav > li {
	margin: 20px 15px;
}

/* Aktuell sichtbaren Abschnitt mit einer Linie markieren. */
.navbar-links .nav > li.active > a {
	border-bottom: 1px solid #fff;
}

/* Menübutton: Position, Klickfläche und sichtbarkeitsabhängige Darstellung. */
.navbar-button {
	position: relative;
	float: right;
	width: 25px;
	height: 19px;
	margin: 22px 5px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Drei animierbare Linien des Menüsymbols. */
.navbar-button span {
	position: absolute;
	left: 0;
	display: block;
	height: 1px;
	width: 100%;
	background: #fff;
	border-radius: 9px;
	opacity: 1;
	transform: rotate(0deg);
	transition: .25s ease-in-out;
}

/* Obere Linie des Menüsymbols. */
.navbar-button span:nth-child(1) {
	top: 0;
}

/* Mittlere Linie des Menüsymbols. */
.navbar-button span:nth-child(2) {
	top: 7px;
}

/* Untere Linie des Menüsymbols. */
.navbar-button span:nth-child(3) {
	top: 14px;
}

/* Obere Linie bei geöffnetem Inhalt zum Kreuz drehen. */
.show-content .navbar-button span:nth-child(1) {
	top: 7px;
	transform: rotate(135deg);
}

/* Mittlere Linie bei geöffnetem Inhalt ausblenden. */
.show-content .navbar-button span:nth-child(2) {
	left: -40px;
	opacity: 0;
}

/* Untere Linie bei geöffnetem Inhalt zum Kreuz drehen. */
.show-content .navbar-button span:nth-child(3) {
	top: 7px;
	transform: rotate(-135deg);
}

/* Hintergrundebene hinter den Seiteninhalten fixieren. */
.section-overlay {
	position: fixed;
	top: 0;
	height: 100%;
	min-height: 700px;
	width: 100%;
	z-index: -100;
}

/* Bildebene hinter der zusätzlichen Abdunklung platzieren. */
.section-overlay.media {
	z-index: -250;
}

/* Deckkraft der darüberliegenden Hintergrundebene. */
.overlay-opacity {
	opacity: .3;
}

/* Hero-Foto flächendeckend und zentriert darstellen. */
.page-image {
	background: url('../images/main-hero.jpg') no-repeat center center / cover;
}

/* Grundhöhe und vertikale Abstände der persönlichen Einführung. */
.page-info {
	min-height: 700px;
	height: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Größe des E-Mail-Symbols. */
.mail-icon {
	width: 28px;
	height: 28px;
}

/* Ab 768 Pixeln: Inhaltsblock auf acht Grid-Spalten zentrieren. */
@media (min-width: 768px) {

	/* Inhaltsbreite auf acht von zwölf Spalten begrenzen. */
	.col-sm-8 {
		float: left;
		width: 66.66666667%;
	}

	/* Zwei Spalten Abstand links zum Zentrieren. */
	.col-sm-offset-2 {
		margin-left: 16.66666667%;
	}
}

/* Desktop ab 991 Pixeln: Navigation und animierte Zweispaltenansicht. */
@media (min-width: 991px) {

	/* Navigation auf dem Desktop anzeigen. */
	header {
		display: block;
	}

	/* Menübutton: Position, Klickfläche und sichtbarkeitsabhängige Darstellung. */
	.navbar-button {
		display: none;
	}

	/* Grundhöhe und vertikale Abstände der persönlichen Einführung. */
	.page-info {
		padding-top: 60px;
	}

	/* Bei aktivem JavaScript die geschlossene Desktopansicht ohne Scrollbalken zeigen. */
	.enhanced {
		overflow: hidden;
	}

	/* Bei geöffnetem Inhalt vertikales Scrollen erlauben. */
	.enhanced.show-content {
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* Einführung und Navigationsspalte zunächst über volle Breite darstellen. */
	.enhanced header .col-transform, .enhanced .page-info {
		float: left;
		width: 100%;
		transition: width .6s ease-in-out;
	}

	/* Einführung fest im Fenster halten. */
	.enhanced .page-info {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
	}

	/* Bei geöffnetem Inhalt die linke Hälfte für die Einführung nutzen. */
	.enhanced.show-content header .col-transform, .enhanced.show-content .page-info {
		width: 50%;
	}

	/* Lebenslauf rechts außerhalb des Fensters verbergen. */
	.enhanced .page-content {
		position: absolute;
		top: 0;
		right: -50%;
		width: 50%;
		visibility: hidden;
		transition: right .6s ease-in-out, visibility .6s;
	}

	/* Lebenslauf in die rechte Fensterhälfte einschieben. */
	.enhanced.show-content .page-content {
		right: 0;
		visibility: visible;
	}

	/* Menübutton für die JavaScript-gesteuerte Desktopansicht anzeigen. */
	.enhanced .navbar-button {
		display: block;
	}

	/* Navigationspunkte vor dem Öffnen rechts versetzen und verbergen. */
	.enhanced .navbar-links li {
		opacity: 0;
		transform: translateX(100%);
		visibility: hidden;
	}

	/* Navigationspunkte beim Öffnen einblenden. */
	.enhanced.show-content .navbar-links li {
		opacity: 1;
		transform: translateX(0);
		visibility: visible;
	}

	/* Verzögerung für den ersten Navigationspunkt. */
	.enhanced.show-content .navbar-links li:nth-child(1) {
		transition-delay: .9s;
	}

	/* Verzögerung für den zweiten Navigationspunkt. */
	.enhanced.show-content .navbar-links li:nth-child(2) {
		transition-delay: .8s;
	}

	/* Verzögerung für den dritten Navigationspunkt. */
	.enhanced.show-content .navbar-links li:nth-child(3) {
		transition-delay: .7s;
	}

	/* Verzögerung für den vierten Navigationspunkt. */
	.enhanced.show-content .navbar-links li:nth-child(4) {
		transition-delay: .6s;
	}
}

/* Einstiegsanimationen nur ohne Wunsch nach reduzierter Bewegung. */
@media (prefers-reduced-motion: no-preference) {

	/* Hintergrund beim Einstieg aus einer leichten Vergrößerung einblenden. */
	.enhanced .reveal.scale-in {
		animation: background-in 1.5s linear .4s both;
	}

	/* Einführung beim Einstieg aus einer leichten Verkleinerung einblenden. */
	.enhanced .reveal.scale-out {
		animation: introduction-in 1.5s linear .4s both;
	}

	/* Bewegung und Skalierung des Hintergrunds beim Einstieg. */
	@keyframes background-in {

		/* Anfangszustand der Animation. */
		from {
			transform: translateY(20px) scale(1.1);
		}

		/* Endzustand: ursprüngliche Position und Größe. */
		to {
			transform: none;
		}
	}

	/* Bewegung und Skalierung der Einführung beim Einstieg. */
	@keyframes introduction-in {

		/* Anfangszustand der Animation. */
		from {
			transform: translateY(20px) scale(.9);
		}

		/* Endzustand: ursprüngliche Position und Größe. */
		to {
			transform: none;
		}
	}
}

/* Bei reduzierter Bewegung sämtliche Übergänge und Animationen abschalten. */
@media (prefers-reduced-motion: reduce) {

	/* Übergänge und Animationen für alle Elemente und Pseudoelemente deaktivieren. */
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Druckansicht: Dekoration entfernen und beide Inhaltsbereiche untereinander zeigen. */
@media print {

	/* Navigation, Hintergrund und Aktionsbuttons im Druck ausblenden. */
	header, .section-overlay, .btn-row {
		display: none !important;
	}

	/* Beide Bereiche im normalen Dokumentfluss vollständig drucken. */
	.enhanced .page-info, .enhanced .page-content {
		position: static;
		width: 100%;
		visibility: visible;
	}

	/* Helle Hero-Schrift für den Druck dunkel darstellen. */
	.text-white {
		color: #333;
	}

	/* Weißer Seitenhintergrund für den Druck. */
	body {
		background: #fff;
	}
}