html {
	scroll-behavior: smooth;
	font-size: 91.5%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

::selection,
::-moz-selection {
	background-color: #a94a12;
}

body {
	font-family: roboto, tahoma, "helvetica neue", helveticaneue, helvetica, arial, sans serif;
	background-color: #222;
}

a {
	text-decoration: none;
}

.seitenanker {
	position: absolute;
	scroll-margin-top: 3.7rem;
}

/* NAVIGATIONSLEISTE */

.topnav {
	display: flex;
	position: fixed;
	top: 0;
	height: 3.5rem;
	width: 100%;
	background-color: #222;
	background-color: rgba(14.5,14.5,14.5,0.7);
	outline: 0.2rem solid #f0a173;
	z-index: 10;
	text-align: center;
	line-height: 3.5rem;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	color: white;
	white-space: nowrap;
}	

.topnav a,
.navtogglelabel {
	position: relative;
	height: 100%;
	padding: 0 0.9rem;
	text-decoration: none;
	color: white;
	overflow: hidden;
	cursor: pointer;
}

.topnav label {
	display: none;
	padding: 0 0.5rem;
	stroke: #fff;
}

.topnav label:hover svg {
	stroke: #222;
}

.topnav a:hover,
.topnav a:focus {
	color: #222;
}

.topnav a::before,
.topnav label::before {
	content: "";
	z-index: -1;
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 0;
	width: 100%;
	background-color: #f0a173;
	-webkit-transition: all 0.1s ease-out 0s;
	-ms-transition: all 0.1s ease-out 0s;
	-o-transition: all 0.1s ease-out 0s;
	transition: all 0.1s ease-out 0s;
}

.line-vert {
	height: 50%;
	border-left: 0.1rem solid white;
	margin: 0 1rem;
}

.line-hor {
	width: 100%;
	border-top: 0.1rem solid white;
	margin: 0.5rem 0;
}

.menue a::before {
	height: 100%;
	width: 0;
	bottom: 0;
}

.menue a:hover::before,
.menue a:focus::before {
	width: 100%;
}

.topnav a:hover::before,
.topnav a:focus::before,
.topnav label:hover::before,
.topnav label:focus::before {
	height: 100%;
}

.topnav a:hover .navisymbol,
.topnav a:focus .navisymbol,
.topnav label:hover .navisymbol,
.topnav label:focus .navisymbol {
	fill: #222;
}

.logo {
	z-index: 11;
	position: fixed;
	top: 0;
}

.logo svg {
	height: 3.5rem;
	width: 3.5rem;
	fill: #fff;
}

.navisymbol,
.menueclose {
	height: 2.2rem;
	width: 2.2rem;
	vertical-align: middle;
	fill: #fff;
}

.menueclose {
	height: 2rem;
	width: 2rem;
}

.menue {
	z-index: 15;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	position: fixed;
	font-size: 1.2rem;
	text-align: left;
	line-height: 1.2rem;
	margin-right: 0;
	margin-left: auto;
	top: 3.7rem;
	width: 16rem;
	max-height: calc(100vh - 3.8rem);
	background-color: #222;
	background-color: rgba(14.5,14.5,14.5,0.8);
	transform-origin: top right;
	transform: translate(100%, 0);
	transition: transform 200ms ease-out;
}

.menue a {
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}	

.menue a:hover,
.menue a:focus {
	color: #222;
}

.navtogglelabel {
	width: 3.5rem;
}

.navisymbol path{
	transition: transform 200ms ease-out;
}

.menueclose,
.navtoggle,
.navtoggle:checked ~ .navtogglelabel #burger-mitte {
	display: none;
}

#burger-oben {
	transform-origin: center 30%;
}

#burger-unten {
	transform-origin: center 70%;
}

.navtoggle:checked ~ .navtogglelabel #burger-oben {
	transform: translateY(25%) translateX(-5%) rotate(45deg) scaleX(130%);
}

.navtoggle:checked ~ .navtogglelabel #burger-unten {
	transform: translateY(-25%) translateX(-5%) rotate(-45deg) scaleX(130%);
}

.navtoggle:checked ~ .menue {
	transform: translate(0, 0);
}

/* HINTERGRUNDBILD */

.Div-Hintergrundbild {
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 33rem;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image:
		radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9) 80%),
		url(Bilder/Wallpaper/Felskueste_grayscale.webp);
		/* url(Bilder/Renderings/Felskueste.webp); */
}

/* FONTS */

@font-face {
	font-family: bigshoulders;
	src: url(fonts/bigshoulderstext-bold.ttf);
	font-display: swap;
}

@font-face {
	font-family: roboto;
	src: url(fonts/roboto-regular.ttf);
	font-display: swap;
}

/* ÜBERSCHRIFTEN */

h1 {
	z-index: 4;
	white-space: nowrap;
	color: #fff;
	font-family: bigshoulders, "agency fb", "franklin gothic", arial, sans serif;
	font-size: 6rem;
	font-stretch: condensed;
	font-weight: 500;
	margin-top: 1.6rem;
}

.h1-highlight {
	color: #f0a173;
	font-size: 120%;
	vertical-align: -5%;
}

#cube {
	height: 12rem;
	width: 12rem;
	vertical-align: -3.7rem;
	margin-left: -12rem;
}

#subh1 {
	font-size: 1.7rem;
	letter-spacing: 0.12rem;
	color: #ccc;
	margin-top: -1.5rem;
}

h2 {
	z-index: 5;
	display: inline-block;
	position: relative;
	padding: 0 1.7rem 0 1rem;
	text-align: center;
	font-family: bigshoulders, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans serif;
	font-weight: 500;
	font-size: 1.9rem;
	color: #222;
	background-color: #f0a173;
}

.h2text {
	padding: 0 1.7rem;
}

.h2div::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 0.075rem);
	width: 100%;
	height: 0.15rem;
	background-color: #222;
}	

.h2div {
	z-index: 4;
	display: block;
	position: relative;
	text-align: center;
	white-space: nowrap;
	height: 4.2rem;
	line-height: 4.2rem;
	background-color: #f0a173;
}

.h2divtop {
	margin-top: 3.4rem;
}

.h2symbol {
	height: 3.5rem;
	width: 3.5rem;
	vertical-align: middle;
	fill: #222;
}

h3 {
	color: #f0a173;
	text-align: center;
	letter-spacing: 0.03rem;
	font-size: 1.5rem;
	margin-bottom: 2rem;
}

.softwareh3 {
	color: white;
}

/* PORTFOLIO */

.portfolio {
	column-count: 10;
	column-gap: 0.35rem;
	padding: 0.35rem 0;
}

.bildcontainer {
	position: relative;
	margin-bottom: 0.35rem;
}

.portbild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.3rem;
	-webkit-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	color: white;
	background-color: #444;
}

.portbild:hover,
.portbild:focus {
	-webkit-filter: grayscale(0);
	-ms-filter: grayscale(0);
	-o-filter: grayscale(0);
	filter: grayscale(0);
}

.bildtitel {
	position: absolute;
	visibility: hidden;
	z-index: 3;
	bottom: 0;
	height: 0;
	width: 100%;
	white-space: nowrap;
	background-color: black;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 1rem;
	text-align: center;
	line-height: 2.3rem;
	overflow: hidden;
	pointer-events: none;
	-webkit-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

.bildlink:hover + .bildtitel {
	visibility: visible;
	height: 2.3rem;
}

.bildlink {
	cursor:
			url("data:image/svg+xml;utf8,<svg width='28' height='28' fill='white' stroke='black' stroke-width='64' style='paint-order:stroke fill markers' version='1.1' viewBox='0 0 270.93 270.93' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m104.53 104.53v297.1l104.73-104.73 164.11 164.11 87.645-87.645-164.11-164.11 104.73-104.73h-297.1zm517.84 0 104.73 104.73-164.11 164.11 87.645 87.645 164.11-164.11 104.73 104.73v-297.1h-297.1zm-249 458.46-164.11 164.11-104.73-104.73v297.1h297.1l-104.73-104.73 164.11-164.11-87.645-87.645zm277.27 0.00391-87.645 87.645 164.11 164.11-104.73 104.73h297.1v-297.1l-104.73 104.73-164.11-164.11z'/></svg>") 15 15,
			zoom-in;
}

/* GROSSE BILDER */

.portbildmaxdiv {
	z-index: 15;
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
	background-color: black;
	background-color: rgba(0, 0, 0, 0.8);
}

.portbildmax {
	position: relative;
	z-index: 6;
	max-height: calc(100vh - 8rem);
	max-width: calc(100vw - 12rem);
}

.bildmaxtext {
	position: absolute;
	z-index: 7;
	position: fixed;
	top: 1.3rem;
	left: 0;
	right: 0;
	padding: 0 1rem;
	color: white;
	font-size: 1.5rem;
	text-align: center;
	pointer-events: none;
}

.imgview {
	z-index: 8;
	position: absolute;
	top: 0;
	right: 6rem;
	padding: 2rem 2.5rem;
	background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' fill='white' stroke='black' stroke-width='64' style='paint-order:stroke fill markers' version='1.1' viewBox='0 0 270.93 270.93' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m104.53 104.53v297.1l104.73-104.73 164.11 164.11 87.645-87.645-164.11-164.11 104.73-104.73h-297.1zm517.84 0 104.73 104.73-164.11 164.11 87.645 87.645 164.11-164.11 104.73 104.73v-297.1h-297.1zm-249 458.46-164.11 164.11-104.73-104.73v297.1h297.1l-104.73-104.73 164.11-164.11-87.645-87.645zm277.27 0.00391-87.645 87.645 164.11 164.11-104.73 104.73h297.1v-297.1l-104.73 104.73-164.11-164.11z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}

.imgview:hover,
.imgview:focus {
	background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' fill='%23f0a173' stroke='black' stroke-width='64' style='paint-order:stroke fill markers' version='1.1' viewBox='0 0 270.93 270.93' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m104.53 104.53v297.1l104.73-104.73 164.11 164.11 87.645-87.645-164.11-164.11 104.73-104.73h-297.1zm517.84 0 104.73 104.73-164.11 164.11 87.645 87.645 164.11-164.11 104.73 104.73v-297.1h-297.1zm-249 458.46-164.11 164.11-104.73-104.73v297.1h297.1l-104.73-104.73 164.11-164.11-87.645-87.645zm277.27 0.00391-87.645 87.645 164.11 164.11-104.73 104.73h297.1v-297.1l-104.73 104.73-164.11-164.11z'/></svg>");
}

.xsymbol {
	z-index: 8;
	position: absolute;
	top: 0;
	right: 1rem;
	padding: 2rem 2.5rem;
	background-image: url("data:image/svg+xml;utf8,<svg fill='white' stroke='black' stroke-width='16' style='paint-order:stroke fill markers' width='32' height='32' version='1.1' viewBox='0 0 67.733 67.733' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m212.91 19.359-84.938 84.938-84.92-84.922-23.67 23.672 84.92 84.92-84.941 84.941 23.672 23.672 84.941-84.941 84.955 84.957 23.672-23.672-84.957-84.955 84.938-84.938-23.672-23.672z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
}

.xsymbol:hover,
.xsymbol:focus {
	background-image: url("data:image/svg+xml;utf8,<svg fill='%23f0a173' stroke='black' stroke-width='16' style='paint-order:stroke fill markers' width='32' height='32' version='1.1' viewBox='0 0 67.733 67.733' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m212.91 19.359-84.938 84.938-84.92-84.922-23.67 23.672 84.92 84.92-84.941 84.941 23.672 23.672 84.941-84.941 84.955 84.957 23.672-23.672-84.957-84.955 84.938-84.938-23.672-23.672z'/></svg>");
}

.bildpfeil {
	z-index: 8;
	position: absolute;
	left: 0;
	padding: 40vh 8rem;
	background-image: url("data:image/svg+xml;utf8,<svg fill='white' stroke='black' stroke-width='16' style='paint-order:stroke fill markers' height='50' width='50' version='1.1' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m177.65 5.1406-122.86 122.86 122.86 122.86 23.572-23.572-99.285-99.285 99.285-99.285z'/></svg>");
	background-repeat: no-repeat;
	background-position: 16% center;
}

.bildpfeil:hover,
.bildpfeil:focus {
	background-image: url("data:image/svg+xml;utf8,<svg fill='%23f0a173' stroke='black' stroke-width='16' style='paint-order:stroke fill markers' height='50' width='50' version='1.1' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m177.65 5.1406-122.86 122.86 122.86 122.86 23.572-23.572-99.285-99.285 99.285-99.285z'/></svg>");
}

.bildpfeilrechts {
	left: initial;
	right: 0;
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.maxbildclose {
	z-index: 7;
	position: fixed;
	height: 100%;
	width: 100%;
	cursor:
			url("data:image/svg+xml;utf8,<svg fill='white' stroke='black' stroke-width='24' style='paint-order:stroke fill markers' width='24' height='24' version='1.1' viewBox='0 0 67.733 67.733' xmlns='http://www.w3.org/2000/svg'><path transform='scale(.26458)' d='m212.91 19.359-84.938 84.938-84.92-84.922-23.67 23.672 84.92 84.92-84.941 84.941 23.672 23.672 84.941-84.941 84.955 84.957 23.672-23.672-84.957-84.955 84.938-84.938-23.672-23.672z'/></svg>") 16 10,
			zoom-out;
}

#watergunwarrior:target,				/* 1 */
#skyship:target,						/* 2 */
#internetradiovorne:target,				/* 3 */
#fishing:target,						/* 4 */
#roomforcreativity:target,				/* 5 */
#internetradiohinten:target,			/* 6 */
#clownforbreakfast:target,				/* 7 */
#portal:target,							/* 8 */
#netzwerkkabel:target,					/* 9 */
#medievalrobot:target,					/* 10 */
#macmini:target,						/* 11 */
#pflanzen:target,						/* 12 */
#mathisfigur:target,					/* 13 */
#mathisfigurformen:target,				/* 14 */
#wlanadapter:target,					/* 15 */
#wlanadapter2:target,					/* 16 */
#wlanadapterantenne:target,				/* 17 */
#mittelalterfass:target,				/* 18 */
#mittelalterturm:target,				/* 19 */
#badezimmer:target,						/* 20 */
#giesskanne:target,						/* 21 */
#babyrobot:target,						/* 22 */
#graveyard:target,						/* 23 */
#armbanduhr:target,						/* 24 */
#steampunknavi:target,					/* 25 */
#nachttisch:target,						/* 26 */
#nachttischschubladeauf:target,			/* 27 */
#nachttischwohnung:target,				/* 28 */
#wohnhausswtag:target,					/* 29 */
#wohnhausotag:target,					/* 30 */
#wohnhausnwtag:target,					/* 31 */
#wohnhausswnacht:target,				/* 32 */
#wohnhausonacht:target,					/* 33 */
#wohnhausnwnacht:target,				/* 34 */
#mushroomhouse:target,					/* 35 */
#messestand:target,						/* 36 */
#felskueste:target,						/* 37 */
#rcauto:target,							/* 38 */
#futuristictransport:target,			/* 39 */
#robothamster:target,					/* 40 */
#baumhaus:target {						/* 41 */
	display: flex;
}

/* WORKFLOW */

.workflow {
	padding-bottom: 8rem;
}

.pattern {
	background-image:
		repeating-linear-gradient(-45deg, #292929 0%, #292929 2rem, #222 2rem, #222 4rem);
}

.text {
	width: 98rem;
	padding: 0 2rem;
}

.text p {
	column-count: 3;
	column-gap: 3rem;
}

.zwei-spalten {
	width: 70rem;
}

.zwei-spalten p {
	column-count: 2;
	column-gap: 3rem;
}

p a {
	color: #bbb;
	font-style: italic;
}

p a:hover,
p a:focus {
	color: #f0a173;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	width: 95rem;
	margin: 2rem;
	overflow: auto;
}

.workflowitem {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 18.9rem;
}

.workflowitem p {
	padding: 1rem;
}

.workflowitem h3 {
	margin: 0;
}

.centertext {
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.5;
	color: white;
}

.bild {
	margin-top: 2rem;
	width: 100%;
}

.textur {
	width: 4rem;
	border-radius: 0.3rem;
	margin: 0.05rem;
}

.medium-bild {
	height: 36rem;
	width: auto;
	padding: 0 2rem;
}

/* ÜBER MICH */

.textcontainer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
	padding-top: 4rem;
}

.textblock {
	z-index: 2;
	width: 28rem;
	margin: 0 2rem 4rem 2rem;
	border-radius: 0.3rem;
}

.uebermichblock {
	padding: 1.5rem;
	background-color: #333;
}

#textblockimpressum {
	margin: 6rem auto 8rem auto;
	width: 50%;
	max-width: 45rem;
}

.fliesstext {
	text-align: justify;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	font-size: 1.2rem;
	font-family: roboto, tahoma, "helvetica neue", helveticaneue, helvetica, arial, sans serif;
	line-height: 1.5;
	color: white;
}

.vert-text {
	writing-mode: vertical-rl;
	text-align: center;
	margin-bottom: 4rem;
	margin-left: -1.5rem;
}

.textgrau {
	font-style: italic;
	color: #999;
}

.textsymbol {
	height: 4.5rem;
	width: 4.5rem;
	margin-right: 0.5rem;
	fill: #fff;
}

.fliesstexthighlight {
	color: #f0a173;
}

.zusatztext {
	color: white;
	font-size: 1.1rem;
	line-height: 1.5;
}

.softwarelogo {
	height: 70%;
	width: auto;
	margin: 0 0.7rem 1.5rem 0.7rem;
	color: white;
}

.softwarediv {
	display: inline-block;
	height: 4rem;
	width: 100%;
	text-align: center;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 1rem 0;
	background-color: #333;
}

footer a {
	display: flex;
	align-items: center;
	color: white;
	font-size: 1.1rem;
	min-height: 5rem;
	padding: 0.5rem 1.5rem;
}

footer a:hover,
footer a:focus,
footer a:hover .textsymbol,
footer a:focus .textsymbol {
	color: #f0a173;
	fill: #f0a173;
}

.ofgzertifikat {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.7rem 0 0 3.88rem;
	overflow: clip;
}

.ofgzertifikat,
.ofgzertifikat script {
	height: 5rem;
	width: 18.7rem;
}

/* IMPRESSUM */

.h3impressum {
	text-align: left;
	margin-top: 3rem;
}

.email {
	color: white;
	font-weight: normal;
	font-style: normal;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	overflow: hidden;
}

.email:hover,
.email:focus {
	color: #f0a173;
}

/* VIDEOS */

.videocontainer {
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	gap: 0.35rem;
	padding: 0.35rem 0;
}

.video {
	height: auto;
	width: 40rem;
	border-radius: 0.3rem;
	color: white;
}

.videocontainer + aside {
	margin: 3.8rem 0 4rem 0;
}

/* MOBILE ARROW */

.mobile-arrow {
	display: none;
	z-index: 5;
	position: fixed;
	bottom: 1rem;
	right: 4rem;
}

.mobile-arrow svg {
	position: absolute;
	bottom: 0;
	padding: 0.3rem;
	fill: #000;
	background-color: #f0a173;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 90rem) {
	h1 {
		font-size: 6vw;
	}
	#subh1 {
		font-size: 1.2rem;
		margin-top: -1rem;
	}
	#cube {
		height: 10rem;
		vertical-align: -2.8rem;
		margin-left: -10rem;
	}
}

@media only screen and (max-width: 85rem) {
	.topnav > a, .line-vert {
		display: none;
	}
	.topnav label {
		display: inline;
	}
	.topnav {
		justify-content: flex-end;
	}
}

@media only screen and (min-width: 85rem) {
	.menue {
		display: none;
	}
}

@media only screen and (min-width: 110rem) and (max-width: 150rem) {
	.video {
		width: 30rem;
		flex-grow: 1;
	}
}

@media only screen and (max-width: 75rem) {
	.text p {
		column-count: 2;
	}
}

@media only screen and (max-width: 70rem) {
	.h2div {
		height: 3.5rem;
		line-height: 3.5rem;
	}
	.h2symbol {
		height: 3rem;
		width: 3rem;
	}
	#textblockimpressum {
		width: 80%;
	}
	#cube {
		display: none;
	}
	h1 {
		padding: 0 6rem;
		white-space: normal;
		font-size: 4rem;
	}
	#subh1 {
		display: none;
	}
	.Div-Hintergrundbild {
		height: 28rem;
	}
	.text p {
		column-count: 2;
	}
}

@media only screen and (max-width: 60rem) {
	.bildmaxtext {
		font-size: 1.3rem;
		text-shadow: 0 0 1.5rem black;
	}
	.portbildmax {
		max-height: 100vh;
		max-width: 100vw;
	}
	.text p,
	.zwei-spalten p {
		column-count: auto;
	}
}

@media only screen and (max-height: 60rem) {
	.bildmaxtext {
		font-size: 1.3rem;
		text-shadow: 0 0 1.5rem black;
	}
	.portbildmax {
		max-height: 100vh;
		max-width: 100vw;
	}
}

@media only screen and (max-width: 41rem) {
	.video {
		width: 100%;
	}
	.bildpfeil {
		padding: 50vh 15vw;
	}
}

@media only screen and (max-width: 35rem) {
	h1 {
		font-size: 10.5vw;
		padding: 0 3rem;
	}
}

@media only screen and (max-width: 16rem) {
	.menue {
		width: 100%;
	}
}

@media only screen and (max-height: 23.9rem) {
	.menue {
		width: 24rem;
	}
	.line-hor {
		width: 12rem;
	}
}

@media only screen and (max-width: 24rem) and (max-height: 26.1rem) {
	.menue {
		width: 100%;
		overflow: scroll;
	}
}

@media only screen and (max-width: 250rem) {
	.portfolio {
		column-count: 10;
	}
}

@media only screen and (max-width: 225rem) {
	.portfolio {
		column-count: 9;
	}
}

@media only screen and (max-width: 200rem) {
	.portfolio {
		column-count: 8;
	}
}

@media only screen and (max-width: 175rem) {
	.portfolio {
		column-count: 7;
	}
}

@media only screen and (max-width: 150rem) {
	.portfolio {
		column-count: 6;
	}
}

@media only screen and (max-width: 125rem) {
	.portfolio {
		column-count: 5;
	}
}

@media only screen and (max-width: 100rem) {
	.portfolio {
		column-count: 4;
	}
}

@media only screen and (max-width: 75rem) {
	.portfolio {
		column-count: 3;
	}
}

@media only screen and (max-width: 50rem) {
	.portfolio {
		column-count: 2;
	}
	.bildmaxtext {
		width: calc(100% - 11rem);
		text-align: left
	}
}

@media only screen and (max-width: 25rem) {
	.portfolio {
		column-count: 1;
	}
}

@media (hover: none) and (pointer: coarse) {
	.mobile-arrow {
		display: inline;
	}
}