@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

blockquote, input, textarea, button, select, ul, ol, li, h1, h2, h3, a, p, q {
	background-color: transparent;
	color: inherit;
	margin: 0;
	outline: none;
	padding: 0;
	text-decoration: none;
}

:root {
	--factor: 0.1vw;
	--font-family: 'Roboto', sans-serif;
	--font-family-quote: 'Archivo', serif;
	--font-size: max(14px, calc(1rem + var(--factor)));
	--font-size--h1: calc( var(--font-size) * 2 );
  --font-size--h2: calc( var(--font-size) * 1.5 );
  --font-size--h3: calc( var(--font-size) * 1.25 );
	--font-size--lead: calc( var(--font-size) * 1.2 );
	--font-size--quote: calc( var(--font-size) * 2 );
	--font-size--footer: max(16px, calc( var(--font-size) * 0.8 ));
	--line-height: calc( var(--font-size) * 1.5 );
	--max-content-width: max(1250px, calc(1150px + var(--factor)));
	--color-blue-1: #194c81;
	--color-blue-2: #5379a0;
	--color-blue-3: #829ab4;
	--color-gray: #4d4d4d;
	--layout-padding-h: 20px;
	--layout-padding-v: 20px;
	--logo-width: 200px;
}

html, body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
	overflow-anchor: none;
	min-height: 100vh;
	height: 100%;
	align-items: start;
}

a {
	cursor: pointer;
}

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

strong {
	font-weight: 700;
}

p {
	line-height: var(--line-height);
	white-space: normal;
}

.align-center {
	align-items: center;
	justify-items: center;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.align-right {
	align-items: end;
	justify-items: center;
	display: flex;
	flex-direction: column;
	width: 100%;
}

q::before, q::after {
	content: '';
}

.grid-1-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* --- Navigation --- */

.nav--wrapper {
	display: flex;
	flex-direction: column;
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 99;
}

.nav-first--wrapper {
	background: var(--color-blue-1);
	background: linear-gradient(90deg, var(--color-blue-1) 25%, rgba(72,114,155,1) 56%, var(--color-blue-1) 100%);
	color: white;
	display: grid;
	font-weight: 500;
	grid-template-columns: 200px 1fr 200px;
	width: 100%;
	font-weight: 700;
}

.nav-first--links {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-first--logo {
	display: flex;
	align-items: flex-end;
	padding-top: 5px;
}

.nav-first--logo img{
	width: var(--logo-width);
	display: block;
}

.nav-first--icon-mobile {
	display: flex;
	align-items: center;
	justify-content: right;
	padding-right: var(--layout-padding-h);
}

.nav-first--icon-mobile img {
	width: 35%;
  max-width: 30px;
  cursor: pointer;
}

.nav-second--wrapper {
	background-color: var(--color-blue-2);
  color: white;
  padding: calc( var(--layout-padding-h) / 1.5 );
}

.nav-first--wrapper nav,
.nav-second--wrapper nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: var(--layout-padding-v);
}

.nav-third--wrapper {
	color: var(--color-blue-1);
	font-weight: 700;
	/* font-size: var(--font-size--footer); */
}

.nav-third--wrapper nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 15px;
}

.nav-third--wrapper a::before {
	content: "\203A";
	position: absolute;
	left: 0;
}

.nav--selected-yellow {
	color: #feeb34;
}

.nav--selected-blue {
	color: var(--color-blue-3);
}

/* --- Shrink  --- */

.nav--shrink .nav-first--logo img {
	width: calc( var(--logo-width) / 1.25);
	transition: all 0.5s;
}

/* --- Navigation Overlay --- */
.freeze-scroll {
  /* .freeze-scroll ist notwendig, damit der Scroll-Effekt auf dem Inhalt blockiert wird, sobald das Overlay Menu offen ist.
  Diese Class wird via jQuery auf den body-Tag vergeben und wieder entfernt. */
  overflow: hidden;
}

.nav-overlay--wrapper {
  background-color: var(--color-blue-2);
	color: white;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow-y: scroll;
}

.nav-overlay--header {
	background-color: var(--color-blue-1);
	display: flex;
	position: sticky;
	top: 0;
	justify-content: space-between;
	padding-top: 5px;
	padding-right: 20px;
	align-items: center;
	border-bottom: 10px solid var(--color-blue-2);
}

.nav-overlay--logo {
	width: var(--logo-width);
}

.nav-overlay--icon {
	height: 100%;
}

.nav-overlay--logo img,
.nav-overlay--icon img {
	cursor: pointer;
	display: block;
}

.nav-overlay--content {
	column-count: 2;
  column-gap: 50px;
  width: 60%;
  margin: 0 auto;
	padding: 20px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.nav-overlay--first,
.nav-overlay--second,
.nav-overlay--third {
  display: flex;
  flex-direction: column;
  break-inside: avoid-column;
}

.nav-overlay--first {
  gap: 10px;
  padding-top: 25px;
}

.nav-overlay--second {
  gap: 10px;
}

.nav-overlay--third {
  gap: 5px;
}

.nav-overlay--first > a {
  font-size: var(--font-size--h1);
  font-weight: 700;
}

.nav-overlay--second > a {
  font-size: var(--font-size--h2);
  font-weight: 700;
  padding-left: 20px;
  padding-top: 7.5px;
}

.nav-overlay--third > a {
  font-size: var(--font-size--h3);
  padding-left: 20px;
}

/* --- Header --- */

.header {
	background-color: rgb(25,76,129);
	background-attachment: fixed;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: calc(100vh);
	display: flex;
	align-items: end;
	justify-content: center;
	width: 100%;
}

/* --- Content --- */

main {
	display: flex;
  gap: calc( var(--layout-padding-v) * 2.75 );
  padding: calc( var(--layout-padding-v) * 3 ) var(--layout-padding-h);
  max-width: var(--max-content-width);
  flex: 1 0 auto;
  margin: 0 auto;
	width: 100%;
  position: relative;
}

article {
	display: flex;
	flex-direction: column;
	gap: var(--layout-padding-v);
	flex: 1 0 auto;
  width: calc( 100% - var(--layout-padding-v) - 275px - 2 * var(--layout-padding-v));
}

aside {
	display: flex;
	flex-direction: column;
	gap: calc( var(--layout-padding-v) * 2 );
  padding-top: 95px;
  flex: 1 0 auto;
  width: 275px;
}

.right--wrapper {
	position: sticky;
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
}

/* --- Messages --- */

.seer-message {
  background-color: var(--color-blue-1);
	border-radius: 3px;
	color: white;
	padding: var(--layout-padding-v) var(--layout-padding-h);
	font-size: var(--font-size--footer);
	line-height: calc( var(--font-size--footer) * 1.3 );
	height: fit-content;
  width: 100%;
}

.seer-title {
	display: block;
	margin-bottom: 20px;
}

.sticky-top-1 {
  top: 121px;
}

.sticky-top-2 {
  top: 170px;
}

.sticky-top-3 {
  top: 215px;
}

/* --- News --- */

.news--wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.news--elem {
  background-color: var(--color-blue-2);
  color: white;
}

.news--content {
  padding: 20px;
}

.news--date {
  font-size: var(--font-size--footer);
  font-weight: 700;
}

.news--title {
  padding-top: 15px;
  padding-bottom: 5px;
  font-weight: 700;
}

.news--text {
  line-height: var(--line-height);
}

/* --- Events --- */

.events--group {
  margin-top: 10px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid silver;
}

.event--elem {
  display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid silver;
}

.event--date {
	font-size: var(--font-size--footer);
	line-height: var(--line-height);
}

.event--content-grid {
	display: grid;
	grid-template-columns: 1fr 40px;
	gap: 25px;
}

.event--title {
  color: var(--color-blue-1);
	line-height: var(--line-height);
}

/* --- Footer --- */

footer {
	background-color: var(--color-blue-1);
	color: white;
	font-size: var(--font-size--footer);
	line-height: calc( var(--font-size--footer) * 1.5 );
	display: flex;
	width: 100%;
	padding: calc( var(--layout-padding-v) * 2 ) var(--layout-padding-h);
}

.footer--inner {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	max-width: var(--max-content-width);
	width: 100%;
	padding: var(--layout-padding-v) var(--layout-padding-h);
}

.footer--media {
	display: flex;
	align-items: flex-start;
	gap: calc( var(--layout-padding-h) / 2 );
}

.footer--media img {
	width: 30px;
}

.copyright {
	background-color: var(--color-gray);
	color: white;
	font-size: var(--font-size--footer);
	line-height: calc( var(--font-size--footer) * 1.5 );
	width: 100%;
}

.copyright--inner {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--layout-padding-h);
	max-width: var(--max-content-width);
	width: 100%;
	padding: var(--layout-padding-v) var(--layout-padding-h);
}

/* --- Responsive --- */

@media (pointer: coarse) {
  .header { background-attachment: unset; }
}

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

	:root {
		--logo-width: 150px;
	}

  main {
    flex-direction: column;
  }

	article {
		width: 100%;
	}

  aside {
    padding-top: 0;
		width: 100%;
  }

	.header {
		background-position: center center;
	}

  .seer-message {
    font-size: var(--font-size);
    line-height: var(--line-height);
  }

  .nav-overlay--content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    column-count: 1;
    padding-top: 50px;
  }

  .nav-first--links nav,
  .nav-second--wrapper,
  .nav-third--wrapper {
    display: none;
  }

  .nav-overlay--first {
    gap: 10px;
    padding-top: 10px;
  }

  .nav-overlay--content {
    width: 95%;
  }

	.news--wrapper {
		grid-template-columns: 1fr;
	}

  .footer--inner {
    grid-template-columns: 1fr;
  }

}