:root{
	--mainColor: #053275;
	--mainColorLight: #063e93;
	--mainColorDark: #05347a;
	
	--headerHoverColor: #1d025d;
	
	--maintextColor: white;
	--mainBackground: #f9f9fa;
	
	--linkColor: #9569ff;
	--linkHoverColor: #30039c;
	
	--messageBackground:  #ede6ff;
	--messageNeuBackground: #9569ff;
	--messageNeuColor: white;
	
	--contentBackground: #f9f9f9;
	
	--openerLinkColor: #a7b2b9;
	--openerLinkHoverColor: #96a0a6;
	--openerColor: #05347a;
	--openerLinkBackround: #e8f5ff;
	--openerHeaderColor: #e8f5ff;
	--openerHeaderBackround: #05347a;
	
	--welcomecontentBackground: #cce9ff;
	--welcomecontentBackgroundLight: #e8f5ff;
	--welcomecontentBackgroundDark: #e8f5ff;
	--welcomeImageDescriptionBackground: white;
	
	--mainContentHeadingColor: #05347a;
	--mainContentTextColor: #455a64;
	--mainContentBackgroud: white;
	--mainContentSubmitColor: white;
	--mainContentSubmitBackgroud: #05347a;
	
	--footerBackground: white;
	
}


html,
body{
	font-size: clamp(0px, 1.2vw, 30px); /* min 14px, fluid up to 18px */
	width: 100%;
	height: 100%;
	margin: 0;
	font-family:  "InterVariable";
	background-color: #05347a;
}

main {
	font-size: 1rem; /* base size relative to root */
	background-color:var(--mainBackground);
}


h1 {
	font-size: 2.8em;
	margin: 0;
}

h2 {
	font-size: 1.5em;
	margin: 0;
}

h3 {
	font-size: 1.2em;
	margin: 0;
}

h4 {
	font-size: 1.0em;
	margin: 0;
}

p {
	font-size: 1.0em;
	
}

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

a:hover {
	color: var(--linkHoverColor);
}

/* Mobile */
@media (max-width: 640px) {

	h1 {
		font-size: 6.0em;
	}

	h2 {
		font-size: 4.5em;
	}

	h3 {
		font-size: 3.6em;
	}

	h4 {
		font-size: 3.0em;
	}
	
	h5 {
		font-size: 3.0em;
	}

	p {
		font-size: 3.0em;	
	}
}


/**********************************************************************************************/
/********************************** HEADER ****************************************************/
/**********************************************************************************************/
header {
	font-size: 1em;
	text-align: left;
	background: radial-gradient(circle, var(--mainColorDark), var(--mainColorLight), var(--mainColor));
	position: fixed;
	top: 0;
	width: 100%;
	color: var(--maintextColor);
    z-index: 1000;         /* Ensures it stays above content */
	padding-left: 1em;	
	padding-right: 1em;	
}


header h2 {
	background: transparent;
	color: 	var(--maintextColor);
}

header h2 {
	font-size: 2em;
}

header table {
	width: 100%;
	border-collapse: collapse;
}
header object{
	width: 3em;
	height: 3em;
	pointer-events: none; /* ignore click */
}

/* Desktop */
.headerDesktop{
	display: block;	
}

.headerDesktop table {
  width: auto;
}

.headerDesktop h3 {
	background: transparent;
	color: 	var(--maintextColor);
	padding: 1em;
	border: 1em;
	border-radius: 0.25em;
	transition: background 0.3s ease;

}

.headerDesktop h3:hover {
	color: 	var(--maintextColor);
	background: var(--headerHoverColor);
}


/* Mobile */
.headerMobile{
	display: none;	
	justify-content: flex-end; /* pushes the object to the right */
	align-items: center;       /* optional: vertical alignment */
	padding-right: 2em;
}

.headerMobile object{
	width: 5em;
	height: 5em;
	pointer-events: none; /* ignore click */
}

/* initially hidden on mobile */
.headerMobileList {
	left: 2em;
	right: 2em;
	border-radius: 0 0 1em 1em;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	list-style: none;
	position: fixed;
	background: var(--headerHoverColor);
	margin-top: 0;
	padding: 0;
	z-index: 2; 
}

.headerMobileList.show {
  max-height: 500px; /* enough space for the items */
}

.headerMobileList li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1em 0;
}

.headerMobileList li .icon {
  display: flex;
  align-items: center;
}

.headerMobileList object{
	width: 12em;
	height: 12em;
	pointer-events: none; /* ignore click */
}

.headerMobileList h3{
	color: 	var(--maintextColor);
	font-size: 4em;
}


/* Desktop: always visible */
@media (max-width: 640px) {
	
	.headerDesktop{
		display: none;	
	}
	.headerMobile {
		display: flex;
	}
	header {
		font-size: clamp(0px, 2.5vw, 60px); 
	}
}


/**********************************************************************************************/
/********************************** MAIN-MESSAGES *********************************************/
/**********************************************************************************************/
.messages {
	background-color: var(--messageBackground);
	text-align: center;
}

.message {
	padding-top: 0.5em;
	padding-bottom: 0.75em;
}

.messages p {
	margin: 0;	
}

.neu {
	background-color: var(--messageNeuBackground);
	color: var(--messageNeuColor);
	border-radius: 0.75em;
	padding: 0.3em;
}

.messages .breakHere {
 
}

/* Mobile */
@media (max-width: 640px) {
	.message {
		padding-top: 1.0em;
		padding-bottom: 1.5em;
	}
	.messages .breakHere {
		display: block;
		padding-top: 1.0em;
	}
}

/**********************************************************************************************/
/********************************** PAGE-CONTENT *********************************************/
/**********************************************************************************************/

main {
	background-color: var(--contentBackground);
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 2em;
	padding-bottom: 2em;	
}

.content {
	margin-top: 2em;
	margin-bottom: 2em;	
	background-color: var(--mainContentBackgroud);	
	border-radius: 1em;
}

/* Mobile */
@media (max-width: 640px) {
	.content {
		margin-top: 8em;
		margin-bottom: 8em;	
	}
	main {
		padding-bottom: 6em;
		min-height: 900px;		
	}
}

/********************************** OPENER ***************************************************/
.opener {
	
}

.opener a {
	color: var(--openerLinkColor);
	font-weight: normal;
}

.opener a:hover {
	color: var(--openerLinkHoverColor);
}

.opener .greaterSign {
	color: var(--openerLinkColor);
}

.opener .currentPageLink {
	color: var(--openerColor);
	background-color: var(--openerLinkBackround);
	font-weight: bold;
	padding: 0.5em;
	border-radius: 0.5em;
}

.opener .header{
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding: 1em;
	width: 100%;
	height: 10em;
	border-radius: 0.5em;
	background-color: var(--openerHeaderBackround);
}

.opener object{
	width: 100%;
	height: 100%;
	fill: var(--openerHeaderColor);
}


/* Mobile */
@media (max-width: 640px) {
	.opener{
		padding-top: 1em;
		font-size:1.0em; 
	}
	.opener .currentPageLink {
		font-size: 2.5em; 	
	}
	.opener .greaterSign {
		font-size: 2.5em; 	
	}
	.opener .header{
		margin-top: 3.0em;
	}
	
}


/********************************** WELCOME-CONTENT ***************************************************/
.welcomeContent
{
	background: radial-gradient(circle, var(--welcomecontentBackground), var(--welcomecontentBackground), var(--welcomecontentBackgroundLight));
	border-radius: 1em;
}

.welcomeContent .row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.welcomeContent .col {
  flex: 1 1 0;
}

.welcomeContent .textCell
{
	margin-left: 6em;
	margin-right: 0;
	margin-top: 6em;
	margin-bottom: 6em;	
	width: 50%;
	vertical-align: top;      /* Content sticks to the top of each cell */	
}

.welcomeContent .imageCell
{
	padding: 0px;
	text-align: right;       /* Center the image within the cell */
}


.welcomeContent .image-container{
	padding-right: 6em;
}


.welcomeContent .responsive-image {
  display: block;
  width: 100%;
  overflow: hidden;
}

.welcomeContent .responsive-image img {
  display: block;
  width: 100%;
  height: auto;       /* keeps correct proportions */
  object-fit: cover;  /* optional: fills container */
}



.welcomeContent .overlay-text {
    position: absolute;
	text-align: left;
    top: 31em;
    right: 5em;
    background-color: var(--welcomeImageDescriptionBackground);
    border-radius: 1em;
	padding-left: 1em;
	padding-right: 1em;
	filter: drop-shadow(0.1em 0.1em 0.05em rgba(0, 0, 0, 0.5));
	z-index: 1; 
}

/* Mobile */
@media (max-width: 640px) {
	.welcomeContent .overlay-text {
		 top: 128em;
		 right: 4em;
	}
	
	.welcomeContent .textCell {
		width: 90%;
	}

	.welcomeContent .row {
		flex-direction: column; /* stacks vertically */
	}
	
	.welcomeContent .imageCell {
		padding: 0px;
		margin: 0 auto; /* auto left/right = center */
	}
}

/********************************** MAIN-CONTENT ***************************************************/

.mainContent {
	padding-left: 6em;
	padding-right: 6em;
}

.mainContent h4 {
	text-transform: uppercase;
	color: var(--mainContentHeadingColor);
}

.mainContent p {
	color: var(--mainContentTextColor);
}

.mainContent .row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  align-items: center; /* vertical centering */
}

.mainContent .col {
  flex: 1 1 0;
}


.mainContent a {
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	border-radius: 0.5em;
	text-decoration: none;
	color: var(--mainContentSubmitColor);
	background-color: var(--mainContentSubmitBackgroud);
	font-weight: bold;
}

.mainContent a:hover {
	
}

.mainContent object {
	width: 35em;
	height: 25em;
}

/* Mobile */
@media (max-width: 640px) {
	
	.mainContent .row {
		flex-direction: column; /* stacks vertically */
	}
	
	.mainContent object {
		width: 70em;
		height: 50em;
	}
	
}
/********************************** PAGE-CONTENT ***************************************************/

.pageContent {
	padding-left: 12em;
	padding-right: 12em;
}

/* Mobile */
@media (max-width: 640px) {
	.content a {
		font-size: 3.0em;
	}
}

/********************************** SUBJECT ***************************************************/

.subject h4 {
	text-transform: uppercase;
	color: var(--mainContentHeadingColor);
}

.subject p {
	color: var(--mainContentTextColor);
}

.subject .row {
  display: flex;
  align-items: flex-start;
  gap: 10em;

}

.subject .col {
  flex: 1 1 0;
}

.subject object {
	width: 100%;
	height: auto;	
	display: block;
	margin: 0 auto;
	
}




/* Mobile */
@media (max-width: 640px) {
	.subject .row {
		flex-direction: column; /* stacks vertically */
	}
	
	.subject .col {
		padding-bottom: 10em;
	}
	
	.subject object {
		width: 100%;
		height: auto;
	}
	
	.subject .row {
	  gap: 1em;
	}
}

/********************************** CONTACT ***************************************************/
.contact object.rounded {
  border-radius: 16px;
  overflow: hidden;     /* helps in some engines */
  display: block;
  margin-right: 2em;
}

.contact object {
	display: inline;
	margin: 0 auto;
	width: 11em;
	height: 11em;
}

.contact .col {
  flex: 0 1 auto;
}

.contact .row {
  gap: 1em;
}

/* Mobile */
@media (max-width: 640px) {
	.contact a {
		font-size: 1.0em;	
	}
	
	.contact object {
		width: 100%;
		height: auto;
	}
	.contact .row {
		padding-top: 10em;
	}
	
	
}



/********************************** DATENSCHUTZ ***************************************************/

.datenschutz h4 {
	text-transform: uppercase;
	color: var(--mainContentHeadingColor);
}

/* Mobile */
@media (max-width: 640px) {
	.datenschutz a{
		font-size: 1.0em;
	}
}

/********************************** IMPRESSUM ***************************************************/

.impressum h4 {
	text-transform: uppercase;
	color: var(--mainContentHeadingColor);
}

/**********************************************************************************************/
/********************************** FOOTER ****************************************************/
/**********************************************************************************************/
.footer {
	bottom: 0;
	width: 100%;
	background: var(--footerBackground);
    z-index: 1000;         /* Ensures it stays above content */
}

.footer table {
	width: 25%;
	border-collapse: collapse;
}

.footer td {
	height: auto;
	padding: 1em;
}

/* Mobile */
@media (max-width: 640px) {
	.footer a{
		font-size: 4.0em;
	}
}


/**********************************************************************************************/
/********************************** FONT ****************************************************/
/**********************************************************************************************/

/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("InterVariable-Italic.woff2") format("woff2");
}

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}