/* roboto-condensed-300 - latin */
@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local("Roboto Condensed Light"), local("RobotoCondensed-Light"),
		url("/static/fonts/roboto-condensed-v16-latin-300.woff2") format("woff2");
}
/* roboto-condensed-700 - latin */
@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"),
		url("/static/fonts/roboto-condensed-v16-latin-700.woff2") format("woff2");
}

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

* {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 17px;
	font-weight: 300;
}

strong {
	font-weight: 700;
}

html {
	font-size: 10px;
}

body {
	padding-top: 80px;
	padding-bottom: 30px;
	font-size: 14px;
	line-height: 1.42857143;
}

@media screen and (min-width: 768px) {
	body {
		padding-top: 30px;
	}
}

a:focus {
	outline: 0;
}

/*=========================================================
						TYPOGRAFIE
  =========================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #6da8e6;
	font-weight: 300;
	margin: 0;
	margin-top: 36px;
}

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 12px;
}
:is(h1, h2, h3, h4, h5, h6) + * {
	margin-top: 14px;
}

h1 {
	font-size: 1.77em;
}
h2 {
	font-size: 1.5em;
	color: #5f5f5f;
}
h3 {
	font-size: 1.3em;
	color: #8c8c8c;
}

.content:first-child {
	margin-top: 0px;
}
.content:last-child {
	margin-bottom: 0px;
}

ul {
	padding-left: 20px;
}

main > *:first-child {
	margin-top: 0;
}

main > *:last-child {
	margin-bottom: 0;
}

/*=========================================================
						ENDE TYPOGRAFIE
  =========================================================*/

@media (min-width: 768px) {
	.container {
		max-width: 940px;
		padding-left: 0px;
		padding-right: 0px;
		margin-inline: auto;
	}
}

img {
	max-width: 100%;
	height: auto;
}

/*=========================================================
						HEADER BILD
  =========================================================*/

.header-img p {
	margin: 0px;
}

.header-text {
	text-align: center;
}

.header-text-inhalt {
	background-color: rgba(255, 255, 255, 0.85);
	display: inline-block;
	padding: 15px;
	font-size: 1.77em;
	color: #6da8e6;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.header-img {
		position: relative;
		height: 360px;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.header-background {
		position: absolute;
		inset: 0;
		z-index: -1;
		height: 360px;
		width: 100%;
		object-fit: cover;
	}

	.header-text {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 768px) {
	.header-background {
		display: block;
		height: 200px;
		object-fit: cover;
	}

	.header-background .header-text {
		display: block;
		margin-top: 200px;
		position: absolute;
		width: 100%;
	}

	.header-text-inhalt {
		background-color: #6da8e6;
		width: 100%;
		color: #ffffff;
		font-size: 1.2em;
	}

	.header-text {
		text-align: center;
	}
}

/*=========================================================
						ENDE HEADER BILD
  =========================================================*/

/*=========================================================
						HAUPT NAVIGATION
  =========================================================*/
.navigation {
	padding-left: 15px;
	padding-right: 15px;
	z-index: 999;
}
.navigation ul li a {
	line-height: 60px;
	padding: 0px;
	color: #ffffff;
	background-color: #6da8e6;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.navigation ul li a:hover {
	background-color: #5b96d4;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.navigation ul li a:active,
.navigation ul li a:focus {
	background-color: #4e89c7;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.navigation .nav a:is([aria-current="true"], [aria-current="page"]) {
	background-color: #5b96d4;
}

/* @media (max-width: 768px) {
	.navigation {
		padding-left: 0px;
		padding-right: 0px;
	}
	.navbar {
		position: fixed;
		top: 0px;
		width: 100%;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.27);
	}

	.navigation.navbar ul.nav {
		border-bottom: 1px solid #5c98d8;
	}
} */

/*=========================================================
							BOOTSTRAP OVERRIDES
		=========================================================*/
.nav-justified li > a {
	margin-bottom: 0px;
}

.navbar-header {
	background-color: #3c79ba;
}

.navbar-collapse {
	padding-left: 0px;
	padding-right: 0px;
	border-top: 0px;
}
/*.navbar-collapse.collapse{
					width:100%;
				}*/

.navbar-toggle .icon-bar {
	background-color: #ffffff;
}

.navbar {
	margin-bottom: 0;
	padding-inline: 0;
	border: 0px;
}

.navbar-brand {
	color: #f4f4f4;
	padding: 0px;
	line-height: 50px;
	padding-left: 15px;
	font-size: 1.5em;
}
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active {
	color: #ffffff;
}

.navbar > ul {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.navbar-collapse nav > ul {
		display: flex;
		flex-direction: row;
	}
}

.navbar li {
	flex: 1;
}

.navbar a {
	text-align: center;
}

.navbar-header {
	display: none;
}

@media screen and (max-width: 767px) {
	.navbar {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.27);
	}

	.navbar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.navbar-toggle {
		display: flex;
		color: white;
		aspect-ratio: 1/1;
		margin-block: 0;
		margin-right: 2px;

		svg {
			display: block;
		}
	}
}

@media (max-width: 330px) {
	.navbar-brand {
		font-size: 1.1em;
	}
}

/*=========================================================
							ENDE BOOTSTRAP OVERRIDES
		=========================================================*/

/*=========================================================
						ENDE HAUPT NAVIGATION
  =========================================================*/

/*=========================================================
						SUB NAVIGATION
  =========================================================*/

.submenu ul li {
	display: block;
	width: 100%;
}
.submenu ul li a {
	line-height: 40px;
	color: #ffffff;
	background-color: #6da8e6;
	border-bottom: 1px solid #5b96d4;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: left;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.submenu ul li a:hover {
	background-color: #5b96d4;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.submenu ul li a:active,
.submenu ul li a:focus {
	background-color: #4e89c7;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.submenu ul li a:is([aria-current="true"], [aria-current="page"]) {
	background-color: #5b96d4;
}

/*=========================================================
						ENDE SUB NAVIGATION
  =========================================================*/

.sidebar {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}

.sidebar-left,
.sidebar-right {
	background-color: #e9e9e9;
	padding: 30px;
}

.content {
	background-color: #fcfcfc;
	padding: 30px;
}

/*=========================================================
							FOOTER
  =========================================================*/
footer nav {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 60px;
}

footer .nav li a:hover,
footer .nav li a:focus {
	background-color: transparent;
	text-decoration: underline;
}

@media (min-width: 768px) {
	footer .nav {
		display: flex;
		justify-content: center;
		margin: 0 auto;
		text-align: start;
	}
	footer .nav li a {
		display: inline;
	}

	footer ul {
		width: 250px;
	}
}

/*=========================================================
							ENDE FOOTER
  =========================================================*/

.layout {
	display: grid;
	row-gap: 30px;
	grid-template-areas:
		"header"
		"sidebar"
		"main"
		"footer";
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.layout {
		column-gap: 30px;
		grid-template-areas:
			"header header"
			"sidebar main"
			"footer footer";
		grid-template-columns: 290px 1fr;
	}

	.layout.side-nav {
		grid-template-columns: 235px 1fr;
	}
}

.layout header {
	grid-area: header;
}

.layout .sidebar {
	grid-area: sidebar;
}

.layout main {
	grid-area: main;
}

.layout footer {
	grid-area: footer;
}