:root {
	--hausfarbe: #0055d4;
	--komplementaer: #FFA100;
#	--komplementaer: #FFC157;
	--hintergrund: #B5DCFF;
}

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Open Sans', sans-serif;
	width: 100%;
	height: 100%;
	margin: 0;
	background: #fff;
	color: #333;
	font-size: 18px;
	line-height: 1.4;
}

a {
	color: var(--hausfarbe);
	text-decoration: none;
}

h2 {
	font-size: 1.7rem;
}

h3 {
	font-size: 1.3rem;
}

h1, h2, h3 {
	text-transform: uppercase;
}
section {
	padding: 75px 8vw 2em 8vw;
	background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.3), transparent), #9ccfff;
	position: relative;
	z-index: 3;
}
section img {
	max-width: 100%;
	height: auto;
}

footer {
	padding: 1em 8vw;
	background-color: var(--hintergrund);
}

.text-right {
	text-align: right;
}

/* CSS für das Logo */
.logo {
	margin: 10px 0 10px 8vw;
    height: 150px; /* Höhe des Logos beim Laden der Seite */
    width: 150px; /* Breite des Logos beim Laden der Seite */
    transition: all 1s; /* Übergangsdauer auf 1 Sekunde für sanften Übergang */
    -webkit-transition: all 1s; /* Übergangsdauer auf 1 Sekunde für sanften Übergang */
    background-image: url('img/logo-ws.svg'); /* Hintergrundbild beim Laden der Seite setzen */
    background-size: cover; /* Größe des Hintergrundbilds anpassen */
    background-repeat: no-repeat; /* Wiederholung des Hintergrundbilds verhindern */
    background-position: center; /* Position des Hintergrundbilds zentrieren */
    display: block; /* Das Element zu einem Blockelement machen */
    float: left;
    left: 8vw;
}

a.btn {
	margin: 1em 1em 0 1em;
	padding: 0.3em 1em;
	background: #fff;
	color: #000;
	border-radius: 2em;
	float: right;
	color: var(--hausfarbe);
	border: 1px solid var(--hausfarbe);
}

a.btn:hover {
	background: var(--hintergrund);
}

.font-blue {
	color: var(--hausfarbe);
}
/* ----- CSS für den feststehenden Header */
/**
 * Der header soll immer am oberen Displayrand zusehen sein → fix
 * Wurde gescrollt, verringert sich seine Höhe auf 50px
 */
.fixed-header {
    position: fixed;
    width: 100%;
    z-index: 1000; /* Ebenenindex, um den Header über dem Rest der Seite zu platzieren */
    background: rgba(0, 0, 0, 0.75); /* Hintergrund anfangs transparent */
    transition: background 1s ease-out;
    -webkit-transition: background 1s ease-out;
}

/* Ändern der Größe und des Hintergrunds des Logos beim Scrollen */
.fixed-header.scrolled {
    background: var(--hintergrund); /* Hintergrundfarbe auf Weiß ändern */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.fixed-header.scrolled .logo {
    height: 60px; /* Verkleinerte Höhe beim Scrollen */
    width: 60px; /* Verkleinerte Breite beim Scrollen */
    margin: 5px 0 5px 8vw;
    background-image: url('img/logo.svg'); /* Hintergrundbild beim Scrollen ändern */
}

.fixed-header.scrolled .menu-icon .nav-icon,
.fixed-header.scrolled .menu-icon .nav-icon:before,
.fixed-header.scrolled .menu-icon .nav-icon:after {
	background-color: var(--hausfarbe);
}

.fixed-header.scrolled a.btn {
	background: var(--hausfarbe);
	color: #fff;
}



	/* ----- CSS für das Navigationsmenü */
	/**
	 * Das Hamburgermenü soll zu einem X animiert werden, wenn es
	 * angeklickt wird
	 */
	nav {
		min-width: 250px;
		float: right;
		padding: 0;
		max-height: 0;
		transition: max-height 0.2s ease-out, background 0.2s ease-out, padding 0.4s ease-out;
		-webkit-transition: max-height 0.2s ease-out, background 0.2s ease-out, padding 0.4s ease-out;
	}

	nav .menu {
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: hidden;
		clear: both;
		max-height: 0;
		transition: max-height 0.2s ease-out;
		-webkit-transition: max-height 0.2s ease-out;
		text-align: center;
	}

	nav .menu a {
		display: block;
		padding: 0.4em 0.7em;
		text-decoration: none;
#		color: var(--hintergrund);
		color: #fff;
		background: rgba(255, 255, 255, 0.2);
		outline: 1px solid #555;
	}
	nav .menu a:hover {
		text-decoration: underline;
		color: #fff;
	}

	/* Ändern der Schriftfarbe bei Scrollen */
	.fixed-header.scrolled .menu a {
		color: var(--hausfarbe); /* Hellere Schriftfarbe für den Scroll-Zustand */
	}
	.fixed-header.scrolled .menu a:hover {
		background: #fff;
	}

	.menu-icon {
		margin-top: 8px;
		padding: 28px 20px;
		position: relative;
		float: right;
		cursor: pointer;
	}

	.menu-icon .nav-icon {
		background: #fff;
		display: block;
		height: 2px;
		width: 23px;
		position: relative;
		transition: background 0.2s ease-out;
		-webkit-transition: background 0.2s ease-out;
	}

	.menu-icon .nav-icon::before {
		content: "";
		background: #fff;
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		transition: all 0.2s ease-out;
		-webkit-transition: all 0.2s ease-out;
		top: 8px;
	}

	.menu-icon .nav-icon:after {
		content: "";
		background: #fff;
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		transition: all 0.2s ease-out;
		-webkit-transition: all 0.2s ease-out;
		top: -8px;
	}

	.menu-btn {
		display: none;
	}

	/* wenn Hamburger Icon angeklickt wurde, schaue in das nächste Schwesterelement */
	.menu-btn:checked ~ nav {
	#	padding: 1em;
	}

	.menu-btn:checked ~ nav,
	.menu-btn:checked ~ nav .menu {
		max-height: 540px;
	}

	/* den mittleren Balken ausblenden */
	.menu-btn:checked ~ .menu-icon .nav-icon {
		background: transparent
	}

	.menu-btn:checked ~ .menu-icon .nav-icon:before {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		top: 0;
	}

	.menu-btn:checked ~ .menu-icon .nav-icon:after {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		top: 0;
	}

	/* Media Query für kleine Displays (Hamburger-Menü) */
	@media screen and (max-width: 768px) {
		.logo {
			height: 150px;
			width: 150px;
			margin-left: 1vw;
		}

		nav,
		.menu {
			width: 100%;
			background: var(--hintergrund);
		}

		.menu a {
			color: var(--hausfarbe) !important;
		}
	}

#	@media (min-width: 1600px) {
#		nav {
#			margin-top: 1em;
#		}
#
#		nav,
#		.menu {
#			background-color: transparent;
#			max-height: none !important;
#		}
#
#		.menu {
#			clear: none;
#			float: right;
#		}
#
#		.menu li {
#			float: left;
#			margin-right: 20px;
#		}
#
#		.menu a {
#			text-decoration: none; /* Unterstreichungen entfernen */
#			display: block;
#			width: 100%;
#			height: 100%;
#			padding: 0.5em 0.7em;
#			font-size: 1em;
#			background-color: rgba(255, 255, 255, 0.3); /* Hintergrundfarbe des Dropdown-Menüs anpassen */
#			border-radius: 0.3em;
#			outline: none !important;
#			color: #fff;
#		}
#
#		.menu-icon {
#			display: none !important;
#		}
#	}

/* ----- CSS für das Banner-Hintergrundbild ------------------------- */
#banner {
    background-image: url('img/ems-training-titelbild6.jpg'); /* Pfad zum Bild */
    background-size: cover; /* Bild so skalieren, dass es den gesamten Container bedeckt */
    background-position: center; /* Bild in der Mitte positionieren */
    height: 100vh; /* Vollständige Höhe des Viewports (Full-HD) */
}

.banner-content {
#    color: var(--hintergrund);
    color: #fff;
    font-weight: bold;
    font-size: clamp(16px, 2em, 1.3vw);
    line-height: 1.3;
    margin-top: 50vh;
    padding: 0.5em 1em 1em 1em;
    background: rgba(0, 0, 0, 0.6);
    max-width: 70vw;
    min-width: 300px;
    text-transform: uppercase;
}

/* ----- Über uns ----- */
/* Flexbox-Kontainer für die Boxen */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Abstand zwischen den Boxen anpassen */
}


@media (min-width: 590px) {
	.box {
		min-width: 500px; /* Mindestbreite von 500px für jede Box */
	}
}
/* Medienabfrage für kleinere Bildschirme (max. 500px Breite) */
@media (max-width: 1200px) {
  .box {
    flex: calc(50% - 20px); /* Berechnung für 2 Boxen pro Zeile mit Abstand */
  }
}

/* Medienabfrage für noch kleinere Bildschirme (max. 320px Breite) */
@media (max-width: 600px) {
  .box {
    flex: 100%; /* Eine Box pro Zeile ohne Abstand */
  }

	.banner-content {
		padding: 1em 0 0 5vw;
		max-width: 90vw;
		margin-top: 70vw;
	}
}

/* Jede Box */
.box {
  flex: calc(33.33% - 20px); /* Berechnung für 3 Boxen pro Zeile mit Abstand */

  box-sizing: border-box;
  padding: 20px; /* Innenabstand für den Inhalt der Boxen anpassen */
  background-color: rgba(255, 255, 255, 0.4); /* Hintergrundfarbe der Boxen anpassen */
  display: flex; /* Flex-Container für die Box aktivieren */
  flex-direction: row; /* Reihenfolge der Spalten festlegen */
}

.box-50 {
	min-width: 49%;
}

/* Spalte für Text */
.column {
  flex: 1; /* Gleiche Breite für beide Spalten */
  padding: 0 10px; /* Innenabstand für die Spalten anpassen */
}

/* Bild in der Spalte */
.column img {
  max-width: 100%; /* Maximale Breite des Bildes auf 100% setzen */
  height: auto; /* Automatische Anpassung der Höhe */
}

/* Medienabfrage für schmalere Bildschirme (max. 800px Breite) */
@media (max-width: 800px) {
  .box {
    flex: 100%; /* Eine Box pro Zeile ohne Abstand */
    flex-direction: column; /* Text und Bild untereinander anordnen */
  }
  .column {
    padding: 10px 0; /* Innenabstand für die Spalten anpassen */
#    text-align: center; /* Text in der Mitte zentrieren */
  }
}

.custom {
	font-size: 1.2em;
	padding: 0.5em;
	background-color: rgba(255, 255, 255, 0.4);
#	background: linear-gradient(#6db9fd, #9accf9);
	border-top: 10px solid var(--hausfarbe);
	border-radius: 0.8em 0 2em 0;
}
/* ----- EMS ----- */
#ems {
}

.ems-container {
    display: flex;
    justify-content: space-between;

}

.ems-column {
    flex-basis: calc(50% - 10px); /* 50% Breite für die Spalte, mit 10px Abstand */
}

.ems-intro, .advantage {
#    border-radius: 8px; /* Abgerundete Ecken */
    background: rgba(255, 255, 255, 0.4); /* Hintergrundfarbe */
    padding: 0.3em 1.5em 0.7em 1.5em;
    margin-bottom: 0.7em; /* Abstand zwischen den Spalten */
}

/* Medienabfrage für Bildschirmbreite < 600px */
@media (max-width: 600px) {
    .ems-container {
        flex-direction: column; /* Einspalter-Ansicht für schmale Bildschirme */
    }
    .ems-column {
        flex-basis: 100%; /* Volle Breite für jede Spalte, um den Einspalter zu erreichen */
        margin-bottom: 20px; /* Abstand zwischen den Spalten beibehalten */
    }
}

/* ----- Bin ich für EMS geeignet? -------- */
/* Styles for the suitability section */
.suitability-category {
    padding: 0.3em 1.5em 0.7em 1.5em;
}
.suitability-category.yes {
	background: #deffde; /* Hintergrundfarbe */
}
.suitability-category.no {
	background: #edd; /* Hintergrundfarbe */
}

.suitability-subtitle {
    margin: 5px 0;
}

.suitability-grid {
    display: flex;
    flex-wrap: wrap; /* Neue Zeilen bei kleinem Bildschirm */
    justify-content: space-evenly;
    gap: 1em;
    margin: 20px 0;
}

.category-list li {
    margin: 5px 0;
}

.disclaimer {
    margin-top: 20px;
}

.additional-info {
    margin-top: 10px;
}

.sign {
	width: 2em;
	height: 2em;
	margin: 0 1em -0.5em 0.5em;
}

/* Media Query für kleine Bildschirme */
@media (max-width: 600px) {
    .suitability-grid {
        flex-direction: column; /* Rubriken untereinander anzeigen */
        align-items: center; /* Zentrieren der Rubriken */
    }

    .category-list {
		padding-left: 2px;
	}
}

/* ----- CSS für den Dienstleistungsabschnitt */
.service-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Platz zwischen den Boxen in der letzten Zeile verteilen */
}

.service-box {
    flex: 1;
    min-width: 300px; /* Mindestbreite, um die Lesbarkeit sicherzustellen */
    margin: 10px; /* Platz zwischen den Boxen */
    padding: 0;
    border: 1px solid #ccc; /* Ein Rahmen um die Boxen für bessere Trennung */
    background: #f7f7f7;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass der Container die Überschrift verdeckt */
}

.service-name {
    background-color: var(--hausfarbe); /* Hintergrundfarbe für die Überschrift setzen */
    color: white; /* Schriftfarbe für die Überschrift auf weiß setzen */
    padding: 1em; /* Innenabstand für die Überschrift erhöhen */
    margin: 0; /* Entfernt den oberen und unteren Abstand der Überschrift */
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.service-box-body {
    padding: 15px; /* Innenabstand für den Text erhöhen */
    margin: 0; /* Entfernt den oberen und unteren Abstand des Textes */
}


/* ----- Abschnitt Training ----------------------------------------- */
.training-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.training-box {
    width: 100%;
    padding: 15px 30px;
    margin: 0;
#    text-align: center;
    word-wrap: break-word;
    box-sizing: border-box;
}

.clear {
    flex-basis: 100%;
    width: 0;
    content: "";
}

.training-box.text {
	background: rgba(255, 255, 255, 0.4);
}

.training-box.img {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.training-content img {
    max-width: 100%;
}

.training-box .img-description {
    background: var(--hausfarbe);
    text-align: center;
    padding: 0.3em 0;
    color: #fff;
    border-radius: 0 0 8em 0;
    width: 100%;
}


@media (min-width: 600px) {
    .training-box {
        max-width: 100%;
    }
}

@media (min-width: 900px) {
    .training-box {
        max-width: calc(50% - 30px);
    }
}
@media (min-width: 1600px) {
    .training-box {
        max-width: calc(33.33% - 30px);
    }
}


/* ----- Tarife ----- */
.tariff-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tariff {
    flex: 1;
    margin: 10px;
    padding: 0;
    border: 1px solid #ccc;
    background: #f7f7f7;
    box-sizing: border-box;
    text-align: center;
    min-width: 300px;
}

.tariff-body {
	text-align: left;
	padding: 0 1em;
}

.tariff-price {
	border-radius: 6em;
    background: var(--komplementaer);
    color: #000;
    padding: 10px;
    font-weight: bold;
}

.price-amount {
	margin-top: 0;
}

.tariff-features {
	min-height: 103px;
}

/* Anpassung an große Displays: nebeneinander ohne Zwischenraum */
@media (min-width: 960px) {
    .tariff {
        margin: 0;
        max-width: 500px;
    }
}

.tariff-name {
    background: var(--hausfarbe);
    color: white;
    margin-top: 0;
    padding: 1em;
    font-weight: bold;
    font-size: 1.3rem;
    text-align: center;
    text-transform: uppercase;
}

.tariff-price {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-amount {
    font-size: 1.5em;
}



/* ----- FAQ ----- */
/* CSS für die FAQ-Sektion */

/* CSS für die FAQ-Sektion */

/* Container für die FAQ-Divs */
#faq .container {
    display: flex;
    flex-wrap: wrap; /* Umbruch auf kleinere Displays */
    justify-content: space-between; /* Abstand zwischen den Spalten */
    gap: 1em 3em;
}

#faq .question {
	border-bottom: 2px solid var(--hausfarbe);
	background: rgba(255, 255, 255, 0.4);
	padding: 0.2em 0.6em;
}

/* Einzelnes FAQ-Div */
.faq-question {
    flex-basis: calc(50% - 3em); /* Breite auf 50% der verfügbaren Breite minus Abstand */
    margin-bottom: 20px; /* Abstand zwischen den Divs */
}

/* Frage-Stil */
.faq-question .question {
    font-weight: bold;
    margin: 0;
}

/* Antwort-Stil */
.faq-question .answer {
    margin: 0;
}

@media (max-width: 768px) {
	.faq-question {
		flex-basis: 100%;
	}
}
/* ----- Kontakt ----- */
/* CSS für die Kontakt-Sektion */
section#contact {
	padding-bottom: 0;
}

/* Container für die Kontaktinformationen */
#contact .container{
    display: flex;
    flex-wrap: wrap; /* Umbruch auf kleinere Displays */
    justify-content: space-between; /* Abstand zwischen den Boxen */
    gap: 20px; /* Horizontaler Abstand zwischen den Boxen */
}

/* Stil für jede Kontakt-Box */
.contact-box {
    flex: 1; /* Jede Box dehnt sich aus, um den verfügbaren Platz zu füllen */
    padding: 20px; /* Innenabstand für jede Box */
    border: 1px solid #ccc; /* Rand um jede Box */
    border-radius: 1em 1em 0 0; /* Abgerundete Ecken */
    background-color: #f9f9f9; /* Hintergrundfarbe der Boxen */
}

/* Überschriftsstil für jede Box */
.contact-box h3 {
    font-size: 18px;
    margin-top: 0;
}

/* Stil für den Kartenabschnitt */
.map {
    width: 100%;
}

/* ----- Terminanfrage ---------------------------------------------- */
#terminanfrage form label {
	width: 9em;
	display: inline-block;
	font-weight: bold;
	text-align: right;
	margin-right: 1em;
}

#terminanfrage form input[type="text"],
#terminanfrage form input[type="tel"],
#terminanfrage form input[type="email"] {
	padding: 1em;
	margin: 0.3em 0;
	border-radius: 2em;
	border: 1px solid #999;
	width: 30em;
}

#terminanfrage form .confirmation {
	width: auto;
}

#terminanfrage .cta-button {
	padding: 0.5em 4em;
	margin-top: 1em;
	font-size: 1.2em;
	border: 0;
}

/* ----- Call to action BUTTONS ------------------------------------- */
/* CSS für den auffälligen Button */
.cta-button {
    display: inline-block;
    padding: 10px 20px; /* Anpassen der Innenabstände nach Bedarf */
    margin: 0 1em 0.8em 0;
    border-radius: 2em; /* Abgerundete Ecken */
    color: var(--hausfarbe); /* Schwarze Schriftfarbe */
    background-color: var(--komplementaer); /* Komplementärfarbe zur Hausfarbe #0055d4 */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s; /* Animation für den Hover-Effekt hinzufügen */
    -webkit-transition: background-color 0.3s, color 0.3s; /* Animation für den Hover-Effekt hinzufügen */
	font-weight: bold;
}

/* Ändern der Schriftfarbe und des Hintergrunds beim Hover */
.cta-button:hover,
.cta-button.telefon:hover
.cta-button.mail:hover,
.cta-button.link:hover {
    background-color: var(--hausfarbe); /* Schwarzer Hintergrund beim Hover */
    color: var(--komplementaer); /* Schriftfarbe beim Hover in Komplementärfarbe */
    transition: background-image 0.3s, color 0.3s; /* Animation für den Hover-Effekt hinzufügen */
    -webkit-transition: background-image 0.3s, color 0.3s;
}

.cta-button.telefon,
.cta-button.mail,
.cta-button.link {
    position: relative;
    padding-left: 2.4em; /* Platz für die Grafik */
    border-radius: 4em;
    text-align: center;
    line-height: 1.2;
}

.cta-button.telefon::before,
.cta-button.mail::before,
.cta-button.link::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8em; /* Breite der Grafik relativ zur Schriftgröße */
    height: 1.8em; /* Höhe der Grafik relativ zur Schriftgröße */
    background-size: contain; /* Grafikgröße anpassen */
    background-repeat: no-repeat;
}

.cta-button.telefon::before {
    background-image: url('img/telefon.svg'); /* Pfad zur Grafik */
}

.cta-button.telefon:hover::before {
    background-image: url('img/telefon-hover.svg'); /* Pfad zur Hover-Grafik */
}

.cta-button.mail::before {
    background-image: url('img/mail.svg'); /* Pfad zur Grafik */
}

.cta-button.mail:hover::before {
    background-image: url('img/mail-hover.svg'); /* Pfad zur Hover-Grafik */
}

.cta-button.link::before {
    background-image: url('img/link.svg'); /* Pfad zur Grafik */
}

.cta-button.link:hover::before {
    background-image: url('img/link-hover.svg'); /* Pfad zur Hover-Grafik */
}


/* Media Query für kleine Bildschirme */
@media (max-width: 768px) {
    .tariff {
        width: 100%; /* Tarife nehmen die volle Breite bei kleinen Bildschirmen */
    }
}

/*----------*/
.slogan {
    background: #b5dbff;
    display: flex;
    flex-wrap: wrap; /* Neue Zeile, wenn der Platz nicht ausreicht */
    position: relative;
}

.slogan-3 {
    font-size: clamp(16px, 2em, 6vw); /* Anpassung der max-width */
    font-weight: bold;
    flex: 1; /* Teilt den verfügbaren Platz gleichmäßig mit dem Bild */
    color: #fff;
    padding-bottom: 2em;
    max-width: 100%; /* Damit der Text nicht breiter als das Elternelement wird */
    text-shadow: 1px 1px 3px #000;
#    text-shadow: -1px 1px 0 var(--hausfarbe), 1px 1px 0 var(--hausfarbe), 1px -1px 0 var(--hausfarbe), -1px -1px 0 var(--hausfarbe);
#    -webkit-text-stroke-width: 1px;
#    -webkit-text-stroke-color: var(--hausfarbe);
}

.slogan .img {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    width: auto;
    margin-top: -30px;
    min-width: 40vw;
}

.slogan img {
    height: auto;
    width: auto;
    max-height: 800px;
}


/* ------ Parallaxen-Effekt ----- */
/* Stil für die Parallaxen-Sektionen */
.parallax-section {
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Hintergrundbilder für die Parallaxen-Sektionen */
#section1 {
#    background-image: url('img/ems-fitness-gruppe-stepper.jpg');
}
#section-karte {
	background-image: url('img/karte.jpg');
}

.last-mile {
	display: flex;
	justify-content: space-between;
}


/* ----- Kopfrahmen für textboxen ----------------------------------- */
.box,
.ems-intro,
.advantage,
.training-box.text {
	border-top: 10px solid var(--hausfarbe);
	border-radius: 0.8em 0 2em 0;
}

/* ------ Error Page -------- */
.error-page {
	min-height: calc(100vh - 277px);
}
/* ----- Betriebssystem typische Schriftart anzeigen ----- */
/* Allgemeine Standardschriftarten, die als Fallback dienen, wenn keine systemeigene Schrift verfügbar ist */
body {
#  font-family: Arial, Helvetica, sans-serif;
}

/* Media Query für Windows-Betriebssysteme */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
}

/* Media Query für macOS-Betriebssysteme */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
  body {
    font-family: "Myriad Pro", "Myriad", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

/* Media Query für Linux-Betriebssysteme */
@media not all and (pointer: coarse) {
  body {
    font-family: "Ubuntu", "DejaVu Sans", "Liberation Sans", "Noto Sans", "Cantarell", sans-serif;
  }
}

.contact-icons {
}
.contact-icons a img {
	height: 38px;
	width: auto;
#	position: relative;
#	vertical-align: middle;
#	margin-bottom: 1em;
}

dl {
	max-width: 12em;
	display: grid;
	grid-template-columns: auto auto;
	gap: 10px;
}

dt, dd {
	margin: 0;
    padding: 5px;
}

dt {
	font-weight: bold;
}


a:focus-visible,
label:focus-visible,
.cta-button:focus-visible {
	outline: 5px auto #212121;
	outline: 5px auto -webkit-focis-ring-color;
	outline-offset: 5px;
}