@font-face {
	font-family: "geist-black";
	src: url("../fonts/Geist/Geist-Black.woff2");
}

@font-face {
	font-family: "geist";
	src: url("../fonts/Geist/Geist-Regular.woff2");
}

@font-face {
	font-family: "droid2";
	src: url("../fonts/droid2/droid.otf");
}
@font-face {
	font-family: "droidsans";
	src: url("../fonts/DroidSans/DroidSans.ttf");
}


html {
	/*muss im rootelement sein - jedenfalls bei firefox*/
	scrollbar-width: none; /* for Firefox */
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	overflow-y: scroll;
	/* alle weiteren "rem" Angaben beziehen sich nun darauf */
	/*font-size: 1vw;*/
}

html::-webkit-scrollbar {
	/*chrome, opera, etc.*/
	display: none;
}

body {
	/*--fonttouse: geist;*/
	/*--fonttouse: droid2;*/
	--fonttouse: droidsans;

	/*font-family: "Open Sans", sans-serif;*/
	font-family: var(--fonttouse), Source Sans VF, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	--mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;

	/*eigene variablen*/
	--main-menu-padding: .5rem;
	--menu-background-color: lightgray;
	--menu-background-color-header: rgba(200, 200, 200, .5);
	--menu-dropdown-background-color: rgba(230, 230, 230, 90%);
	--menu-background-selectcolor: lightblue;
	--highlight-color: orangered;
	--menu-text-highlightcolor: var(--highlight-color);
	margin: 0 auto;
	--hover-transition-duration: 0.3s;
	--hover-scalex: 1.1;
	--hover-scaley: 1.1;
	--header-padding-top: 1rem;
	--header-padding-bottom: 1rem;
	/*--header-fontsize: 1em;*/
	/*--menuentry-bottom-padding: 1em;*/
	--footer-height: 2.5rem;
	--submenu-min-width: 200px;
	--project-bgcolor: azure;
	--project-feature-color: var(--highlight-color);
	--project-content-width: 90%;
	--title-fontsize: 2.5rem;
	--menu-font-size: 3.5rem;
	--mtopic-header-fontsize: calc( --title-fontsize / 1.5 );
	--bgg-col1: rgb(238, 238, 238);
	--bgg-col2: rgb(176, 186, 230);
	background-color: aliceblue;
	--topic-hovercolor: lightblue;
	--responsivesize : 1;
	--topic-flexwidth: unset;

	--headerheight: calc( var(--header-padding-top) + var(--header-padding-bottom) + var(--menu-font-size) );
	--project-footer-padding: 2em;
	--projectinfo-height: calc( 1em + 1em + 1em + var(--project-footer-padding) + var(--footer-height));
	/*wie Logo background:*/
	--offer-content-bgcolor: #b9e2ee88;
		/*rgba(183, 183, 243, 0.2);*/
}

.bc-big {
	/*border: 1px solid blue;*/
	width: 60%;
}

.header-menu {
	justify-content: end;
	display: flex;
	margin: 0;
	padding: 0 2rem 0 0;
	font-size: var(--menu-font-size);
}

.header {
	/*background-color: var(--menu-background-color);*/
	/*background-color: rgba(120, 120, 120, .5);*/
	background-color: var(--menu-background-color-header);
	font-family: var(--fonttouse), sans-serif;
	padding: var(--header-padding-top) 0 var(--header-padding-bottom) 0;
	position: relative;
	z-index: 2;
	/*border-bottom: 0.3rem solid darkblue;*/
}
.header > hr {
	margin-top: 0;
}

/*@media (min-width: 700px) {*/
/*	body {*/
/*		--title-fontsize: 4rem;*/
/*		--menu-font-size: 1.5rem;*/
/*		--mtopic-header-fontsize: 3rem*/
/*	}*/
/*	.footer-menu {*/
/*		margin-left: auto;*/
/*	}*/
/*}*/
/*@media (max-width: 700px) {*/
/*	body {*/
/*		--title-fontsize: 2rem;*/
/*		--menu-font-size: 1rem;*/
/*		--mtopic-header-fontsize: 1.5rem*/
/*	}*/
/*	.footer-menu {*/
/*		margin-left: 1rem;*/
/*	}*/
/*}*/

/* top-level-right-image */
.tlri {
	position: absolute;
	right: 0;
	top: 0;
	width: 40%;
	mask-image: linear-gradient(white, #5D9AD3);
}
.tlri::before {
	content: " ";
	position: relative;
	inset: 0;
	background: linear-gradient(to right, rgba(255, 0, 0, 0.11), rgba(255, 0, 0, 0.86));
	mix-blend-mode: difference;
	pointer-events: none;
}

.title-header {
	display: flex;
	flex-wrap: wrap;
	flex-flow: column wrap;
	width: 50%;
	margin-left: 5rem;
}

.title-header div {
	/*width: 50%;*/
}

.bgwrap {
	position: absolute;
	left: 0;
	width: 100%;
}
.r, .l {
	width: 100%;
	left: 0;
	top: 0;
	background-color: red;
	height: 100%;
}

.r {
	background-color: lightblue;
}

#page {
	position: relative;
	min-height: 100vh;
	/*-ms-overflow-style: none;  !* IE and Edge *!*/
	/*scrollbar-width: none;  !* Firefox *!*/
	/*overflow-y: scroll;*/
	/*background-image: -moz-radial-gradient(center, circle cover, #eee 0, #888 100%);*/
	/*background-image: -webkit-radial-gradient(center, circle cover, #eee 0, #888 100%);*/
	/*background-image: -o-radial-gradient(center, circle cover, #eee 0, #888 100%);*/
	/*background-image: radial-gradient(center, circle cover, #eee 0, #888 100%);*/
}

/*#page::-webkit-scrollbar {*/
/*	!*chrome, opera, etc.*!*/
/*	display: none;*/
/*}*/

.title {
	font-size: var(--title-fontsize);
	/*font-weight: bold;*/
	width: auto;
	/*margin-left: auto;*/
	margin: .5rem;
	letter-spacing: -3px;
	font-weight: bold;
	text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.25);
}

.fixit {
	position: fixed;
	height: 100vh;
	width: 100vw;
	background-color: rgba(200, 200, 200, .4);
	/*background-image: radial-gradient(circle, var(--bgg-col1) 0px, var(--bgg-col2) 50%), url("/bg1_bw.png");*/
	/*background-size: cover;*/
	/*background-position:*/
	/*		center center;*/
	/*background-blend-mode: overlay;*/
	/*background-blend-mode: hard-light;*/
}

.btmborder {
	border-bottom: 1px solid darkgray;
}
.subtitle1 {
	font-size: calc( var(--title-fontsize) * .8 );
	width: auto;
	/*margin-left: auto;*/
	/*letter-spacing: -3px;*/
	text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.25);
	margin-top: 1em;
}
.subtitle2 {
	/*margin-top: -1em;*/
	font-weight: bold;
	width: auto;
	align-self: end;
	/*alignment: center;*/
}
.logo {
	position: absolute;
	left: 1em;
	margin-top: -.5em;
}

.logo-img {
	transition: box-shadow 0.15s ease-in-out, scale 0.15s ease-in-out;
	box-shadow: 0 0 0 0 rgba(0,0,0, 0.2);
	border-radius: 3em;
}

.logo-img:hover {
	box-shadow: 4px 4px 16px 0 rgba(0,0,0, 0.2);
	scale: 1.1;
}

.footer {
	/*background-color: var(--menu-background-color);*/
	/*background-image: -webkit-radial-gradient(circle, var(--bgg-col1) 0px, var(--bgg-col2) 100%);*/
	/*position: absolute;*/
	/*bottom: 0;*/
	/*width: 100%;*/
	/*height: var(--footer-height);*/
	/*align-items: center;*/
	/*!*footer soll über allem liegen, auch ggf. gehoverte projekte*!*/
	/*z-index: 1000;*/
	background-color: var(--menu-background-color-header);

	position: fixed;
	bottom: 0;
	width: 100%;
	/*padding: 0.5rem 0;*/
}

strong a:hover {
	text-decoration: underline;
	color: blue;
}
strong a {
	color: var(--menu-text-highlightcolor);
}

a strong:hover {
	text-decoration: underline;
	color: blue;
}
a strong {
	color: var(--menu-text-highlightcolor);
}

#meta {
	padding: 1em 0;
	padding-bottom: 3rem;
}

/*.header-menu {*/
/*	justify-content: end;*/
/*	display: flex;*/
/*	margin: 0;*/
/*	padding: 0 2rem 0 0;*/
/*	font-size: var(--menu-font-size);*/
/*}*/

.header-submenu-item {
	position: relative;
	background-color: var(--menu-dropdown-background-color);
	min-width: var(--submenu-min-width);
	/*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);*/
	z-index: 1;
	text-transform: none;
}
.header-submenu-item:hover {
	/*box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);*/
	background-color: var(--menu-background-selectcolor);
	box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 8px 5px;
	transform: scaleX(1.2);
}

.header-submenu-item:hover a {
	color: var(--menu-text-highlightcolor);
}

.header-submenu-item a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.header-menu-entry {
	display: inline-block;
	/*text-transform: uppercase;*/
	transition: color 0.15s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	color: black;
	font-weight: lighter;
	border: none;
	height: min-content;
	/*margin: 0 0.5em 0;*/
	margin: 0 0.7em;
	position: relative;
	/* die border transparent zeichnen, damit sie denselben Platz einnimmt, wie wenn selektiert*/
	border-bottom: 3px solid transparent;
}

/*soll vor dem Menupunkt kommen, muss ein eigenes Htmlelement (img) sein*/
/*die pseudo "::before"-klasse kann mit dem "url()" keine cookies mitschicken, ist nur für statische daten*/
.header-menu-entry-before {
	position: absolute;
	left: -1rem;
	top: .3rem;
	height: auto;
	width: .5em;
}

.header-menu-entry.selected {
	border-bottom: 3px solid black;
}

.header-menu-entry:hover .header-submenu {
	display: block;
	/*position: absolute;*/
	/*transition: display 1s, background-color 1s;*/
	transition-delay: 1s;
	transition: color 0.15s ease-in-out, background-color 1.2s ease-in-out, border-color 0.2s ease-in-out, display .5s;
}
.header-menu-entry .header-submenu {
	display: none;
	position: absolute;
	/*damit das submenu etwas nach untern verschoben ist,
	DARF NICHT größer als das Padding sein, sonst entsteht ein gap,
	dann verschwindet das submenu wenn man die maus über den ga bewegt.*/
	font-size: 1rem;
	/* Platz nach oben, der die hintergrundfarbe benutzt, und auf dem headermenu liegt,
	dadurch sieht es transparent aus - aber die unterstriche werden trotzdem opaque verdeckt. -> doller trick. */
	padding-top: 1.2rem;
	min-width: var(--submenu-min-width);
	z-index: 10000;
	box-shadow: rgba(0, 0, 0, 0.25) 5px 5px 8px 5px;
	/* den submenucontainer auf die farbe des headers setzen, so erscheint das padding-top durchsichtig*/
	background-color: var(--menu-background-color);
}

.header-menu-entry > a {
	color: black;
}
.header-menu-entry > a:visited {
	color: black;
}
.header-menu-entry:hover > a {
	color: var(--menu-text-highlightcolor);
}

.footer-span {
	display: flex;
	position: relative;
}

.copyright {
	align-self: center;
	position: absolute;
	right: 0;
	padding-right: 1em;
}

.footer-menu {
	justify-content: center;
	display: flex;
	margin: auto;
	padding: var(--main-menu-padding) 0;
}
.footer-menu-entry {
	display: inline-block;
	text-transform: uppercase;
	padding-right: 1em;
	transition: color 0.15s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/*.footer-menu-entry.fa-handshake::before {*/
/*	content: "";*/
/*}*/

#content {
	/*Platz fuer den fixen footer, der wuerde sonst content überlagern.*/
	/*padding: 1em 1em var(--footer-height);*/
	/*padding: 2vw 10vw var(--footer-height);*/
	position: relative;
}

#content section {
	padding: 4vh 5vw 0;
	min-height: calc( 100vh - var(--headerheight) - var(--footer-height));
}

#content section#project {
	/*Hier die minimalgröße setzen, so dass der Header/Footer UND die Tags und vor/weiter buttons sichtbar sind.*/
	/*von 95vh abziehen, weil das padding oben auf 5vh gesetzt ist.*/
	min-height: calc( 95vh - var(--headerheight) - var(--footer-height) - var(--projectinfo-height) );
}

#content section:nth-child(odd) {
	background-color: azure;
}

#content section:nth-child(even) {
	background-color: whitesmoke;
}


.tag-cloud {
	margin-bottom: 1em;
}
.tag-cloud a {
	font-weight: bold;
	color: white;
}
.tag-cloud a:visited {
	color: white;
}

.tag-cloud a:hover {
	color: black;
}

.tag {
	border-radius: 2em;
	border: 1px solid lightgray;
	background-color: var(--highlight-color);
	font-size: small;
	display: inline-block;
	padding: .2em .5em;
}

a {
	text-decoration: unset;
}
.footer-menu-entry a {
	color: black;
}

.footer-menu-entry a:visited {
	color: black;
}
.footer-menu-entry:hover a {
	color: var(--menu-text-highlightcolor);
}

.lastpages {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	margin-bottom: 1em;
}
.lastpage {
	width: 250px;
	height: 100px;
	border: 1px solid lightgray;
	margin: 2px;
	padding-inline: 10px;
}

.lastprojects {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	margin-bottom: 1rem;
	gap: 1rem;
}

#project-content {
  	/*width: var(--project-content-width);*/
}

.project {
	box-shadow: #eeeeee;
	width: 250px;
	border: 1px solid lightgray;
	box-sizing: border-box;
	/*margin: 2px;*/
	padding-inline: 10px;
	transform: scale(1, 1);
	transition: transform var(--hover-transition-duration);
	/*border-radius: 2rem;*/
	font-size: .9rem;
	background-color: var(--project-bgcolor);
	padding: 1em;
}

.project:hover {
	transform: scale(var(--hover-scalex), var(--hover-scaley));
	z-index: 10;
	transition: transform var(--hover-transition-duration);
}

.project.featured {
	/*border: 2px solid transparent;*/
	background-color: rgb(238, 255, 238);
	/* ok, dieselbe breite wie bei hover setzen, aber unscheinbare farbe, damit es keine verrückungen gibt, wenn gehovert wird.*/
	border: 2px solid rgba(0, 136, 255, 0.08);
}

.project.featured:hover {
	border: 2px solid var(--project-feature-color);
}

.project a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.project-item-header {
	font-weight: bold;
	font-size: larger;
	margin-top: .3em;
	margin-bottom: .3em;
	border-bottom: 1px solid;
}

.project-item-summary {
	margin: 0 0 .5em;
}
.age-tag {
	/*float: right;*/
	padding: .2em .4em;
	border-radius: 2em;
	border: gray 1px solid;
	align-self: end;
	margin-top: auto;
	margin-bottom: 0.5em;
}

.featured {
	background-color: #eeffee;
}

.cv {
	border: 1px dashed lightgray;
	margin: 1em;
}

/*Fuer das "format-Fragment"*/
.preformat {
	background-color: lightgray;
	padding: 0 .2rem;
	border: 1px solid darkgray;
	font-family: monospace;
	font-size: 1rem;
	font-weight: bold;
}

/*business-card*/
/*.bc-big {*/
/*	border: 1px solid blue;*/
/*    width: 60%;*/
/*}*/
.bc-title-header {
	display: flex;
	flex-wrap: wrap;
	flex-flow: column wrap;
	/*margin-left: 2vw;*/
	/*margin-right: 2vw;*/
	margin-bottom: 10vh;
}
.main-topics {
	margin-left: 2vw;
	display: flex;
}
.main-topics a {
	color: black;
}
.main-topics a:visited {
	color: black;
}

.main-topics .mtopic {
	display: inline-block;
	padding: 1rem;
	flex-grow: 1;
	flex-basis: min-content;
}
.mtopic-header {
	font-size: var(--mtopic-header-fontsize);
	text-decoration: underline;
	padding-bottom: .5rem;
}
.mtopic-text {
	font-size: 1rem;
}

.topic-details .mtopic:last-of-type {
	padding-bottom: 5rem;
}

.mtopic ul {
	margin: 4px;
	padding-left: 1.5em;
}

.topic-details .mtopic {
	display: inline-block;
	padding: 1rem 1rem 4rem;
	flex-grow: 1;
}

@media (min-width: 700px) {
	body {
		--title-fontsize: 3.5rem;
		--menu-font-size: 1.5rem;
		--mtopic-header-fontsize: 3rem;
		--sb-topmargin: -1em;
		--topic-flexwidth: unset;
	}
	.footer-menu {
		margin-left: auto;
	}
}
@media (max-width: 700px) {
	body {
		--title-fontsize: 2rem;
		--menu-font-size: 1rem;
		--mtopic-header-fontsize: 1.5rem;
		--sb-topmargin: -.5em;
		--topic-flexwidth: 100%;
	}
	.footer-menu {
		margin-left: 1rem;
	}
	.footer-menu-entry {
		padding-right: .5rem;
	}

	.footer-span {
		flex-direction: column;
		align-items: center;
	}
	.header-menu-entry-before {
		left: -.6rem;
		top: 0.2rem;
	}
}
@media (max-width: 850px) {
	.copyright {
		bottom: 2.2rem;
		background-color: var(--menu-background-color-header);
	}
}

#project-content figure {
	margin-left: 0;
}

#project-content figure img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#project-content figcaption {
	text-align: center;
}

#project-content figcaption p {
	margin-top: .5rem;
	font-size: .8rem;
	font-weight: 100;
}