/* Modernes, minimales CSS-Reset (ersetzt Eric Meyers Reset von 2007) */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	line-height: 1;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: none;
}

/* Web-Fonts: woff2 reicht für alle aktuellen Browser; Droid Serif liegt nur als woff vor */

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
		url('../fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
		url('../fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
		url('../fonts/source-sans-pro-v14-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Droid Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/DroidSerif-Italic-webfont.woff') format('woff');
}

/* Farb-Variablen (Marke + Neutraltöne) */

:root {
	--color-primary: #3366cc;
	--color-primary-dark: #24316a;
	--color-primary-light: #e8eefa;

	--color-white: #fff;
	--color-dark: #151515;
	--color-text: #767676;
	--color-text-strong: #555;
	--color-text-muted: #999;
	--color-border: #333037;
	--color-bg: #e2e2e7;
}

/* Grundlegende Typografie & Elemente */

html {
	font-family: 'Source Sans Pro', sans-serif;
}

body {
	background: var(--color-bg);
	text-align: left;
	color: var(--color-text);
	font-size: 1.25rem;
	line-height: 1.75rem;
	position: relative;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
}

::selection {
	background: var(--color-primary);
	color: var(--color-white);
}

hr {
	border: 0;
	width: 16px;
	background: var(--color-text);
	margin: 10px 0 15px;
	height: 1px;
}

a {
	color: var(--color-dark);
	transition: color .25s linear;
}

a:hover {
	color: var(--color-text-muted);
}

b,
strong {
	font-weight: 700;
}

i,
em {
	font-style: italic;
}

p {
	margin-bottom: 22px;
	display: block;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

ol {
	padding: 0;
	margin-left: 20px;
}

ol li {
	margin-bottom: 15px;
}

/* Lange deutsche Komposita (z. B. "Geschäftsbedingungen") dürfen auf schmalen Displays umbrechen */
h1,
h2,
h3 {
	overflow-wrap: break-word;
	hyphens: auto;
}

h1 {
	text-transform: uppercase;
	font-size: 3.75rem;
	font-weight: 700;
}

h1#slogan {
	font-family: 'Droid Serif', serif;
	font-style: italic;
	font-size: 3.75rem;
	line-height: 4.375rem;
	text-align: center;
	letter-spacing: -1px;
	text-transform: none;
	font-weight: 400;
	padding: 0 60px;
}

h2 {
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 44px;
	font-family: 'Droid Serif', serif;
    font-style: italic;
	margin-top: 20px;
}

.text > h2:first-child {
	margin-top: 0;
}


.quad > h2 {
	color: #cfe0ff;
	font-size: 1.5rem;
	margin-top: 0;
	margin-bottom: 0;
}

h2::after {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	margin-top: 16px;
	background: var(--color-primary);
}

h3 {
	margin: 60px 0;
	font-family: 'Droid Serif', serif;
	font-style: italic;
}

.text h3 {
	margin: 0;
	padding: 22px 0;
	display: block;
	color: var(--color-primary-dark);
}

/* Fließtext im Inhaltsbereich: dunkler als das globale Grau */
.text {
	color: var(--color-text-strong);
}

.text .lead {
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--color-primary-dark);
}

/* Fett-kursive Hervorhebungen im Fließtext: ruhiger als doppelte Auszeichnung */
.text strong em,
.text em strong {
	font-style: normal;
	color: var(--color-primary-dark);
}

.text a:not(.btn) {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.text a:not(.btn):hover {
	color: var(--color-primary);
}

h4,
.contact-info {
	font-family: 'Droid Serif', serif;
	font-style: italic;
	font-size: 0.875rem;
}

/* .heading-sm / .heading-xs: Optik von h5/h6 für Überschriften, die semantisch h3/h4 sind
   (.text davor, damit sie die .text h3-Regel oben überstimmen) */
h5,
.text .heading-sm {
	font-family: 'Source Sans Pro', sans-serif;
	font-style: normal;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 36px 0 12px;
}

h6,
.text .heading-xs {
	font-family: 'Source Sans Pro', sans-serif;
	font-style: normal;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-border);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 26px 0 8px;
}

.text ul {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.text ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
}

.text ul li::before {
	content: "–";
	position: absolute;
	left: 0;
	color: var(--color-primary);
}

.spec-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 32px;
	row-gap: 14px;
	margin: 0 0 36px;
	padding: 24px 28px;
	background: var(--color-bg);
	border-radius: 8px;
	color: var(--color-dark);
}

.spec-list dt {
	font-weight: 700;
	color: var(--color-primary-dark);
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: .03em;
	white-space: nowrap;
	align-self: start;
	padding-top: 2px;
}

.spec-list dd {
	margin: 0;
}

/* Hervorgehobene Kernaussage als ruhiges Zitat zwischen zwei Haarlinien */
.text .callout {
	font-family: 'Droid Serif', serif;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--color-primary-dark);
	padding: 28px 0;
	margin: 40px 0;
	border-top: 1px solid rgba(51, 102, 204, .35);
	border-bottom: 1px solid rgba(51, 102, 204, .35);
}

img {
	height: auto;
}

img.full {
	width: 100%;
}

/* Barrierefreiheit */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary-dark);
	color: var(--color-white);
	padding: 12px 20px;
	z-index: 10000;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Auf blauem Grund wäre der blaue Fokusrahmen unsichtbar */
.bg-blue a:focus-visible,
.bg-blue button:focus-visible {
	outline-color: var(--color-white);
}

/* "Bewegung reduzieren": nur Bewegung abschalten (Zoom, Gleiten, Schieben).
   Farb-/Deckkraft-Übergänge als Rückmeldung bleiben erhalten. Parallax schaltet app.js ab. */
@media (prefers-reduced-motion: reduce) {
	.page-hero-image,
	.parallax.visible .hintergrundbild img {
		animation: fadein .6s ease;
	}

	.popup,
	.popup.visible {
		transform: none;
		transition: opacity .4s ease;
	}

	#menu,
	body.offset #menu,
	.site-main,
	.menu-icon > span {
		transition: none;
	}

	body.offset .site-main {
		transform: none;
	}

	.contact-link:hover .icon,
	.border:hover .icon,
	.quad a:hover::after,
	.cert-preview:hover img,
	.cert-preview:focus-visible img {
		transform: none;
	}
}