@charset "utf-8";
@font-face {
	font-family: 'Roboto';
	src: url(fonts/Roboto/Roboto-Regular.ttf);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto Slab';
	src: url(fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf);
	font-weight: normal;
	font-style: normal;
}

/*------------------------------ Allgemeine Gestaltung der Webseite ------------------------------*/

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: rgb(30,30,30);
	color: rgb(200,200,200);
	font-family: 'Roboto';
	user-select: none;
}

header {
	background-color: rgb(60,60,60);
	height: 70px;
	width: 100%;
	display: flex;
	position: sticky;
	top: 0;
	box-shadow: 0 5px 5px 0 rgb(0,0,0,0.25);
	z-index: 1;
}

#mainnav {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10%;
}

#bildmarke {
	position: absolute;
	top: 10px;
	left: 1rem;
	height: 50px;
	width: 83px;
	background-image: url("bilder/bildmarke.svg");
}

#button_home {
	height: 30px;
	width: 30px;
	background-image: url("bilder/icons/home.svg");
}

#button_home_active
{
	height: 30px;
	width: 30px;
	background-image: url("bilder/icons/home_cyan.svg");
}

#button_home:hover {
	background-image: url("bilder/icons/home_cyan.svg");
	transform: scale(1.25);
	transition: 0.2s ease;
}

#button_ueber_mich {
	height: 30px;
	width: 30px;
	background-image: url("bilder/icons/ueber_mich.svg");
}

#button_ueber_mich_active {
	height: 30px;
	width: 30px;
	background-image: url("bilder/icons/ueber_mich_cyan.svg");
}

#button_ueber_mich:hover {
	background-image: url("bilder/icons/ueber_mich_cyan.svg");
	transform: scale(1.25);
	transition: 0.2s ease;
}

#button_work {
	height: 30px;
	width: 42px;
	background-image: url("bilder/icons/arbeiten.svg");
}

#button_work_active {
	height: 30px;
	width: 42px;
	background-image: url("bilder/icons/arbeiten_cyan.svg");
}

#button_work:hover {
	background-image: url("bilder/icons/arbeiten_cyan.svg");
	transform: scale(1.25);
	transition: 0.2s ease;
}

#button_kontakt {
	height: 30px;
	width: 42px;
	background-image: url("bilder/icons/kontakt.svg");
}

#button_kontakt_active {
	height: 30px;
	width: 42px;
	background-image: url("bilder/icons/kontakt_cyan.svg");
}

#button_kontakt:hover {
	background-image: url("bilder/icons/kontakt_cyan.svg");
	transform: scale(1.25);
	transition: 0.2s ease;
}

main {
	min-height: calc(100vh - 120px);
}

footer {
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(60,60,60);
	font-size: 10pt;
	box-shadow: 0 -3px 3px 0 rgb(0,0,0,0.25);
}

#copyright {
	position: absolute;
	left: 1rem;
	display: flex;
}

#copyright_sp {
	display: none;
	position: absolute;
	left: 1rem;
}

#herz {
	height: 16px;
}

#subnav {
	display: flex;
	align-items: center;
}

footer a {
	text-decoration: none;
	color: rgb(200,200,200);
}

footer a:hover {
	color: #009fe3;
	transition: all 0.3s ease;
}

#up {
	width: 30px;
	height: 15px;
	position: absolute;
	right: 1rem;
	background-image: url("bilder/icons/up.svg")
}

#up:hover {
	background-image: url("bilder/icons/up_cyan.svg")
}

#impressum-link {
	border-right: 1px solid;
	border-color: rgb(200,200,200);
	padding-right: 0.5rem;
}

#datenschutz-link {
	padding-left: 0.5rem;
}

.link-active {
	color: rgb(0,159,227);
}

h1 {
	font-family: 'Roboto Slab';
	font-size: 2rem;
	font-weight: normal;
	text-decoration: underline;
	text-underline-position: under; 
}

h2, h3, h4{
	font-family: 'Roboto Slab';
	font-weight: normal;
}

/*------------------------------ Cookiebanner ------------------------------*/

#cookiebanner {
	position: fixed;
	bottom: 70px;
	right: -398px;
	max-width: 350px;
	background: rgb(60,60,60);
	border-radius: 10px;
	padding: 0 1.5rem 1rem;
	transition: 0.3s ease;
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

#cookiebanner.cookiebanner-active {
	right: 1rem;
}

#header {
	display: flex;
	align-items: center;
}

#cookie {
	background-image: url(bilder/icons/cookie.svg);
	width: 30px;
	height: 30px;
	margin-right: 1rem;
}

#data p a {
	color: rgb(0,159,227);
	text-decoration: none;
}

#buttons {
	display: flex;
	justify-content: space-between;
}
.cookie-button {
	border: none;
	color: rgb(245,245,245);
	padding: 10px 0;
	border-radius: 5px;
	background: rgb(0,159,227);
	cursor: pointer;
	width: calc(100% / 2 - 10px);
	transition: all 0.2s ease;
}

#buttons #acceptBtn:hover {
	background-color: rgb(0,159,227);
}

#declineBtn {
	border: 2px solid rgb(0,159,227);
	background-color: rgb(60,60,60);
	color: rgb(0,159,227);
}

#declineBtn:hover {
	background-color: rgb(0,159,227);
	color: rgb(230,230,230);
}

/*.login {
	font-size: 10pt;
	margin: 0.8rem 1rem 0 0;
}

.login input {
	background-color: rgb(30,30,30);
	border: none;
	border-radius: 0.5rem;
	color: rgb(200,200,200);
	margin: 0 0.5rem 0.5rem 0;
	padding-left: 1rem;
	width: 100px;
}

#login_send {
	background-color: rgb(30,30,30);
	color: rgb(200,200,200);
	border: none;
	border-radius: 0.5rem;
	padding: 0.2rem 0.7rem;
	cursor: pointer;
}*/

/*main {
	flex: 1;
}*/

.titelleiste {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back {
    width: 14px;
	height: 28px;
	background-image: url("bilder/icons/back.svg");
}

.back:hover {
	background-image: url("bilder/icons/back_cyan.svg")
}

.subpage{
	position: relative;
	width: fit-content;
	margin: 0 auto 5rem auto;
}

.bildunterschrift {
	font-size: 14px;
	margin: 0;
	justify-self: end;
}

.button {
	cursor: pointer;
}


/*------------------------------ Startseite ------------------------------*/

#einleitung {
	display: grid;
	height: calc(100vh - 120px);
	grid-template-columns: 1fr 1fr 0.75fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
}

#einleitung-bg {
	background-image: url(bilder/bg.svg);
	background-repeat: no-repeat;
	grid-area: 2 / 2 / span 2 / span 1;
}

#einleitung-inhalt {
	grid-area: 2 / 3 / span 2 / span 1;
	align-self: center;
}

#einleitung h1 {
	margin-top: 0;
}


/*------------------------------ Ueber mich ------------------------------*/

#ueber-mich {
	height: calc(100vh - 120px);
	display: grid;
	grid-template-columns: 0.5fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 3fr;
	gap: 5rem;
}


#ueber-mich h1 {
	margin: 0;
	grid-area: 2 / 2;
	align-self: end;
	justify-self: end;
}

#ueber-mich img{
	width: 10rem;
	height: 10rem;
	grid-area: 3 / 2;
	justify-self: end;
}

#ueber-mich p{
	margin: 0;
	font-size: 1rem;
	grid-area: 3 / 3;
}

/*------------------------------ Arbeiten ------------------------------*/

#arbeiten {
	height: calc(100vh - 120px);
	display: grid;
	grid-template-columns: 1fr 808px 1fr;
	grid-template-rows: 1fr 688px 1fr;
}

#arbeiten-h1 {
	grid-area: 2 / 1;
	margin: 0 0 3rem 0;
	justify-self: center;
}

#arbeiten-wrap {
	grid-area: 2 / 2;
	width: fit-content;
	height: 43rem;
	margin: 0 auto;
	display: flex;
}

#kategorien {
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	margin-right: 4rem;
}

.kategorie {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.label {
	text-align: center;
	margin-bottom: 0;
}

.highlight {
	box-shadow: 0px 0px 6px 4px rgb(0,159,227);
}

#grafik-icon {
	width: 30px;
	height: 30px;
	background-image: url("bilder/icons/stift.svg");
}

#grafik-icon:hover {
	background-image: url("bilder/icons/stift_cyan.svg");
	transform: scale(1.25);
	transition: ease 0.2s;
}

#grafik-icon.icon-active {
	background-image: url("bilder/icons/stift_cyan.svg");
}

#grafik-label {
	visibility: hidden; /* Initially hide the label */
	opacity: 0; /* Make it invisible */
	transition: opacity 0.3s ease; /* Smooth transition */
}

#grafik-icon:hover + #grafik-label, #grafik-label.visible{
	visibility: visible; /* Show the label */
	opacity: 1; /* Make it visible */
	color: rgb(0,159,227);
}

#typo-icon {
	width: 30px;
	height: 30px;
	background-image: url("bilder/icons/feder.svg");
}

#typo-icon:hover {
	background-image: url("bilder/icons/feder_cyan.svg");
	transform: scale(1.25);
	transition: ease 0.2s;
}

#typo-icon.icon-active {
	background-image: url("bilder/icons/feder_cyan.svg");
}

#typo-label {
	visibility: hidden; /* Initially hide the label */
	opacity: 0; /* Make it invisible */
	transition: opacity 0.3s ease; /* Smooth transition */
}

#typo-icon:hover + #typo-label, #typo-label.visible{
	visibility: visible; /* Show the label */
	opacity: 1; /* Make it visible */
	color: rgb(0,159,227);
}

#layout-icon {
	width: 30px;
	height: 30px;
	background-image: url("bilder/icons/layout.svg");
}

#layout-icon:hover {
	background-image: url("bilder/icons/layout_cyan.svg");
	transform: scale(1.25);
	transition: ease 0.2s;
}

#layout-icon.icon-active {
	background-image: url("bilder/icons/layout_cyan.svg");
}

#layout-label {
	visibility: hidden; /* Initially hide the label */
	opacity: 0; /* Make it invisible */
	transition: opacity 0.3s ease; /* Smooth transition */
}

#layout-icon:hover + #layout-label, #layout-label.visible{
	visibility: visible; /* Show the label */
	opacity: 1; /* Make it visible */
	color: rgb(0,159,227);
}

#produkt-icon {
	width: 34px;
	height: 30px;
	background-image: url("bilder/icons/produkt.svg");
}

#produkt-icon:hover {
	background-image: url("bilder/icons/produkt_cyan.svg");
	transform: scale(1.25);
	transition: ease 0.2s;
}

#produkt-icon.icon-active {
	background-image: url("bilder/icons/produkt_cyan.svg");
}

#produkt-label {
	visibility: hidden; /* Initially hide the label */
	opacity: 0; /* Make it invisible */
	transition: opacity 0.3s ease; /* Smooth transition */
}

#produkt-icon:hover + #produkt-label, #produkt-label.visible{
	visibility: visible; /* Show the label */
	opacity: 1; /* Make it visible */
	color: rgb(0,159,227);
}

#web-icon {
	height: 30px;
	width: 42px;
	background-image: url("bilder/icons/webdesign.svg");
}

#web-icon:hover {
	background-image: url("bilder/icons/webdesign_cyan.svg");
	transform: scale(1.25);
	transition: ease 0.2s;
}

#web-icon.icon-active {
	background-image: url("bilder/icons/webdesign_cyan.svg");
}

#web-label {
	visibility: hidden; /* Initially hide the label */
	opacity: 0; /* Make it invisible */
	transition: opacity 0.3s ease; /* Smooth transition */
}

#web-icon:hover + #web-label, #web-label.visible{
	visibility: visible; /* Show the label */
	opacity: 1; /* Make it visible */
	color: rgb(0,159,227);
}

#ui-ux_icon {
	height: 30px;
	width: 39px;
	background-image: url("bilder/icons/ui_ux.svg");
}

#ui-ux_icon:hover {
	background-image: url("bilder/icons/ui_ux_cyan.svg");
	transform: scale(1.25);
	transition: ease 0.2s;
}

#ui-ux_icon.icon-active {
	background-image: url("bilder/icons/ui_ux_cyan.svg");
}

#ui-ux_label {
	visibility: hidden; /* Initially hide the label */
	opacity: 0; /* Make it invisible */
	transition: opacity 0.3s ease; /* Smooth transition */
}

#ui-ux_icon:hover + #ui-ux_label, #ui-ux_label.visible{
	visibility: visible; /* Show the label */
	opacity: 1; /* Make it visible */
	color: rgb(0,159,227);
}

#arbeiten-grid {
	display: grid;
	width: fit-content;
	grid-template-columns: repeat(4, 10rem);
	grid-template-rows: repeat(4, 10rem);
	gap: 1rem;
	color: rgb(230,230,230);
}

#arbeiten-grid a {
	color: rgb(230,230,230);
	text-decoration: none;
}

.outline {
	outline: 2px solid rgb(200,200,200);
}

.grid-item {
	background-color: rgba(200,200,200);
	border-radius: 1rem;
	display: flex;
	align-items: center;
}

.overlay {
	opacity: 0;
	height: 50%;
	width: 100%;
	background-color: rgba(0,159,227,0.9);
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 0 0.5rem;
}

.grid-item:hover .overlay{
	opacity: 100;
	transition: ease 0.3s;
}

#grid-item1 {
	background-image: url("bilder/arbeiten/grafik/grafischer_logarithmus/24.svg");
	background-size: cover;
}

#grid-item2 {
	background-image: url("bilder/arbeiten/grafik/infografik/kreisdiagramm1_pfade.svg");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgb(60,60,60);
}

#grid-item3 {
	background-image: url("bilder/arbeiten/thumbs/bulky.png");
	background-color: rgb(30,30,30);
}

#grid-item4 {
	background-image: url("bilder/arbeiten/typo/potsblitz-logo.svg");
	background-size: cover;
	background-color: rgb(30,30,30);
}

#grid-item5 {
	background-image: url("bilder/arbeiten/thumbs/potsblitz-citycard.png");
}

#grid-item6 {
	background-image: url("bilder/arbeiten/thumbs/magazin_titelseite.png");
}

#grid-item7 {
	background-image: url("bilder/arbeiten/thumbs/tageszeitung_titelseite.png");
}

#grid-item8 {
	background-image: url("bilder/arbeiten/layout_print/plakat_sonnencreme.png");
	background-size: cover;
}

#grid-item9 {
	background-image: url("bilder/arbeiten/thumbs/zooflyer.png");
	background-position: right;
}

#grid-item10 {
	background-image: url("bilder/arbeiten/thumbs/firmenbroschur_circularpixels.png");
	background-position: center;
}

#grid-item11 {
	background-image: url("bilder/arbeiten/thumbs/verpackung_sonnencreme.png");
	background-color: rgb(255,255,255);
	background-repeat: no-repeat;
	background-position: center;
}

#grid-item12 {
	background-image: url("bilder/arbeiten/thumbs/waldtriathlon.png");
	background-size: cover;
}

#grid-item13 {
	background-image: url("bilder/arbeiten/web/cp/smart.png");
	background-size: cover;
}

#grid-item14 {
	background-image: url("bilder/arbeiten/thumbs/easytravel.png");
	background-position: center;
}

#grid-item15 {
	background-image: url("bilder/arbeiten/ui_ux/ifn.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

#grid-item16 {
	background-image: url("bilder/arbeiten/ui_ux/tetris.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgb(19,27,46);
}

/* LIGHTBOX MARKUP */

.lightbox_bg {
	/* Default to hidden */
	display: none;

	/* Overlay entire screen */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

/* A bit of padding around image */

/* Translucent background */
	background: rgba(0, 0, 0, 0.8);
	z-index: 1;
	color: rgb(30,30,30);
	text-decoration: none;
	cursor: pointer;

}

/* Unhide the lightbox when it's the target */
.lightbox_bg.active {
	display: flex;
	flex-flow: column;
	justify-content: center;
}

.lightbox_inner {
	margin: 0 auto;
	cursor: auto;
	position: relative;
}

.lightbox-bildunterschrift-bg {
	width: 100%;
	background-color: rgba(255,255,255,0.7);
	border-radius: 0 0 1rem 1rem;
}

.lightbox-bildunterschrift {
	text-align: right;
	padding: 1rem;
	font-family: 'roboto slab';
}

.image-container {
	background-size: contain; /* initial background size */
	transition: background-size 0.3s ease /* smooth zoom transition */
}
  
.image-container.zoomed {
	cursor: grab; /* change cursor to indicate grab */
}
  
.image-container:not(.zoomed) {
	cursor: zoom-in; /* change cursor to indicate zoom-in */
}

.image-container.grabbing {
	cursor: grabbing;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

#myday {
	width: 960px;
	height: 540px;
	background-size: contain;
	background-color: rgb(230,230,230);
	background-image: url(bilder/arbeiten/grafik/infografik/kreisdiagramm2_pfade_canvas.svg);
	border-radius: 1rem 1rem 0 0;
}

#bulky {
	width: 1190px;
	height: 421px;
	background-position:left, right;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: rgb(230,230,230);
	background-image: url(bilder/arbeiten/typo/bulky1_.png), url(bilder/arbeiten/typo/bulky2_.png);
	border-radius: 1rem 1rem 0 0;
}

#potsblitz-logo {
	width: 842px;
	height: 595px;
	background-size: contain;
	background-color: rgb(30,30,30);
	background-image: url(bilder/arbeiten/typo/potsblitz-logo.svg);
	border-radius: 1rem 1rem 0 0;
}

#potsblitz-citycard {
	width: 595px;
	height: 842px;
	background-size: contain;
	background-color: rgb(230,230,230);
	background-image: url(bilder/arbeiten/layout_print/potsblitz-citycard.png);
	border-radius: 1rem 1rem 0 0;
}

#magazin {
	width: 595px;
	height: 842px;
	background-size: contain;
	background-image: url(bilder/arbeiten/layout_print/magazin_titelseite.png);
	border-radius: 1rem 1rem 0 0 ;
}

#tageszeitung {
	width: 595px;
	height: 842px;
	background-image: url(bilder/arbeiten/layout_print/tageszeitung_titelseite2.png);
	border-radius: 1rem 1rem 0 0 ;
}

#plakat {
	width: 595px;
	height: 842px;
	background-size: contain;
	background-image: url(bilder/arbeiten/layout_print/plakat_sonnencreme2.png);
	border-radius: 1rem 1rem 0 0;
}

#zooflyer {
	width: 960px;
	height: 720px;
	background-size: contain;
	background-image: url(bilder/arbeiten/layout_print/zooflyer-mockup.png);
	border-radius: 1rem 1rem 0 0;
}

#verpackung {
	width: 492px;
	height: 549px;
	background-size: contain;
	background-image: url(bilder/arbeiten/produkt/verpackung_sonnencreme.png);
	border-radius: 1rem 1rem 0 0;
	background-color: white;
}

#waldtriathlon {
	width: 960px;
	height: 640px;
	background-image: url(bilder/arbeiten/web/wt/wt_mockup_.png);
	border-radius: 1rem 1rem 0 0;
}

#webseite-cp {
	width: 960px;
	height: 640px;
	background-image: url(bilder/arbeiten/web/cp/cp_mockup.png);
	border-radius: 1rem 1rem 0 0;
}

#easytravel {
	width: 960px;
	height: 540px;
	background-image: url(bilder/arbeiten/ui_ux/app_easy-travel.png);
	border-radius: 1rem 1rem 0 0;
}


/*------------------------------ carousel ------------------------------*/

#container-broschur {
	width: 960px;
	justify-content: center;
	position: relative;
}

#carousel {
	position: relative;
	cursor: grab;
}

#carousel:active {
	cursor: grabbing;
}

/* Slideshow container */
#slides-broschur {
	width: 960px;
	margin: auto;
	display: flex;
	overflow-x: auto;
	border-radius: 1rem 1rem 0 0;
}	

/* Hide scrollbar for Chrome, Safari and Opera */
#slides-broschur::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#slides-broschur {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

#slides-broschur img {
	width: 960px;
	scroll-snap-align: center;
	pointer-events: none;
}	

#prev {
	background-image: url(bilder/icons/back.svg);
}

#prev:hover {
	background-image: url(bilder/icons/back_cyan.svg);
}

/* Next & previous buttons */
#prev, #next {
	margin: 0 2rem;
	cursor: pointer;
	position: absolute;
	top: calc(50% - 14px);
	width: 14px;
	height: 28px;
	transition: 0.3s ease;
}

/* Position the "next button" to the right */
#next {
	background-image: url(bilder/icons/next.svg);
	right: 0;
}

#next:hover {
	background-image: url(bilder/icons/next_cyan.svg);
}

.dots {
	position: absolute;
	bottom: 2rem;
	left: calc(50% - 50px);
	display: flex;
}
	
/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 10px;
	width: 10px;
	margin: 0 5px;
	background-color: rgba(100,100,100);
	border-radius: 50%;
}

.active-dot, .dot:hover {
	background-color: rgb(200,200,200);
}


/*------------------------------ Grafischer Logarithmus ------------------------------*/

.titelleiste .back {
	position: absolute;
	left: 0;
}

#permutationen {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: 400px 890px;
	column-gap: 2rem;
}

#p24-wrap {
	display: grid;
	grid-template-columns: subgrid;
	row-gap: 1rem;
}

#p24 {
	background-image: url(bilder/arbeiten/grafik/grafischer_logarithmus/24_.svg);
	background-color: rgb(230,230,230);
	background-size: contain;
	height: 600px;
}

#p256-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 600px auto;
	row-gap: 1rem;
	column-gap: 2rem;
}

#p256-1 {
	background-image: url(bilder/arbeiten/grafik/grafischer_logarithmus/256_1_.svg);
	background-color: rgb(230,230,230);
	background-size: contain;
	background-repeat: no-repeat;
	height: 600px;
}

#p256-2 {
	background-image: url(bilder/arbeiten/grafik/grafischer_logarithmus/256_2_.svg);
	background-color: rgb(230,230,230);
	background-size: contain;
	height: 600px;
}

#p256-bildunterschrift {
	grid-area: 2 / 1 / span 1 / span 2;
	justify-self: center;
}


/*------------------------------ Plant Lock ------------------------------*/

#plant-lock_grid {
	width: fit-content;
	margin: 5rem auto 0 auto;
	display: grid;
	grid-template-columns: 14px 400px 400px 400px 400px;
	grid-template-rows: 300px 226px 117px;
	column-gap: 2rem;
	row-gap: 2rem;
}

#plant-lock_grid h1 {
	margin-top: 0;
}

#plant-lock_teaser {
	margin: 0;
}

#line {
	border-bottom: 2px solid rgb(230,230,230);
	grid-area: 3 / 2 ;
}

#foto1 {
	background-image: url(bilder/arbeiten/ui_ux/plant-lock/1.jpg);
	background-size: contain;
	outline: 1px solid rgb(230,230,230);
	border-radius: 1rem;
	background-repeat: no-repeat;
}

#foto2 {
	background-image: url(bilder/arbeiten/ui_ux/plant-lock/2.jpg);
	background-size: contain;
	outline: 1px solid rgb(230,230,230);
	border-radius: 1rem;
	grid-area: 2 / 3;
}

#foto3 {
	background-image: url(bilder/arbeiten/ui_ux/plant-lock/3.jpg);
	background-size: contain;
	outline: 1px solid rgb(230,230,230);
	border-radius: 1rem;
	grid-area: span 3 / span 1;
}

#plant-lock_plakat {
	height: 566px;
	background-image: url(bilder/arbeiten/ui_ux/plant-lock/4.png);
	background-size: contain;
	background-repeat: no-repeat;
	outline: 1px solid rgb(230,230,230);
	border-radius: 1rem;
	grid-area: span 2 / span 1;
}

#plakat_plant-lock {
	width: 565px;
	height: 800px;
	background-size: contain;
	background-image: url(bilder/arbeiten/ui_ux/plant-lock/4.png);
	border-radius: 1rem;
}


/*------------------------------ Tetris ------------------------------*/

#tetris-grid {
	display: grid;
	width: fit-content;
	margin: 5rem auto 5rem auto;
	grid-template-columns: 14px 400px 400px 400px 400px;
	grid-template-rows: 533px 50px 533px 50px 135px 50px 507px 50px 711px 50px 68px 50px 770px 50px;
	column-gap: 2rem;
	row-gap: 1rem;
}

.projekt {
	border-bottom: 2px solid rgb(230,230,230);
}

#tetris-grid h1 {
	margin-top: 0;
}

#tetris-foto1 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/1.jpg);
	background-size: contain;
	border: 1px solid rgb(230,230,230);
	border-radius: 1rem;
}

#tetris-foto2 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/2.jpg);
	background-size: contain;
	border: 1px solid rgb(230,230,230);
	border-radius: 1rem;
}

#tetris-bildunterschrift1 {
	grid-area: 2 / 3 / span 1 / span 2;
	justify-self: center;
}

#tetris-foto3 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/3.jpg);
	background-size: contain;
	outline: 1px solid rgb(230,230,230);
	border-radius: 1rem;
	height: 533px;
}

#tetris-bildunterschrift2 {
	grid-area: 2 / 5;
}

#tetris-foto4 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/4.jpg);
	background-size: contain;
	outline: 1px solid rgb(230,230,230);
	border-radius: 1rem;
	grid-area: 3 / 2;
	height: 533px;
}

#tetris-bildunterschrift3 {
	grid-area: 4 / 2;
}

#sternstruktur {
	background-image: url(bilder/arbeiten/ui_ux/tetris/sternstruktur.svg);
	grid-area: 3 / 3 / span 3 / span 1;
}

#tetris-bildunterschrift4 {
	grid-area: 6 / 3;
}

#tetris-text {
	grid-area: 5 / 2;
	margin: 0;
	align-self: end;
}

#bausteine {
	background-image: url(bilder/arbeiten/ui_ux/tetris/bausteine.svg);
	grid-area: 3 / 4 / span 3 / span 1;
}

#bausteine2 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/bausteine2.svg);
	grid-area: 3 / 5 / span 3 / span 1;
}

#tetris-bildunterschrift5 {
	grid-area: 6 / 4 / span 1 / span 2;
    justify-self: center;
}

#tetris-bild1 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/1.png);
	grid-area: 7 / 2 / span 1 / span 2;
	background-size: contain;
}

#tetris-bild2 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/2.png);
	grid-area: 7 / 4 / span 1 / span 2;
	background-size: contain;
}

#tetris-bildunterschrift6 {
	grid-area: 8 / 3;
}

#tetris-bildunterschrift7 {
	grid-area: 8 / 5;
}

#tetris-animation {
	height: 711px;
	background-image: url(bilder/arbeiten/ui_ux/tetris/1.gif);
	grid-area: 9 / 2;
	background-size: contain;
}

#tetris-bildunterschrift8 {
	grid-area: 10 / 2;
}

#tetris-foto6 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/6.jpg);
	grid-area: 9 / 3 / span 3 / span 2;
	background-size: contain;
}

#tetris-bildunterschrift9 {
	grid-area: 12 / 4;
}

#tetris-foto7 {
	background-image: url(bilder/arbeiten/ui_ux/tetris/7.jpg);
	grid-area: 13 / 2 / span 1 / span 3;
	background-size: contain;
}

#tetris-bildunterschrift10 {
	grid-area: 14 / 4;
}

#tetris-text2 {
    width: 350px;
	grid-area: 13 / 5;
	align-self: center;
}

/*------------------------------ Kontakt ------------------------------*/

#kontakt {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: calc(100vh - 120px);
	width: 500px;
	margin: 0 auto;
}

#kontakt h1 {
	text-align: center;
}

#einleitung-kontakt {
	margin-bottom: 3rem;
}

#kontaktformular input,
#kontaktformular textarea {
	font-size: 16px;
	font-family: inherit;
	background-color: rgb(60,60,60);
	color: rgb(200,200,200);
	border: none;
	border-radius: 0.5rem;
	padding: 0.3rem;
	margin: 0;
}	

.input {
	width: 100%;
}

#kontaktformular textarea {
	height: 200px;
}

#send {
	width: fit-content;
	font-size: 16px;
	background-color: rgb(60,60,60);
	color: rgb(200,200,200);
	padding: 0.5rem;
	border: none;
	cursor: pointer;
	border-radius: 0.5rem;
	font-family: inherit;
}

#send:hover {
	background-color: #009fe3;
	transition: 0.3s ease;
}

.error {
	color: rgb(255,128,0);
	font-size: 15px;
	margin-top: 0.5rem;
}

#einwilligung-datenschutz {
	hyphens: none;
	display: flex;
	align-items: center;
}

#einwilligung-datenschutz input{
	margin: 0 1rem 0 0;
}

#link-einwilligung-datenschutz{
	color: rgb(0,159,227);
	text-decoration: none;
}

#confirmationMessage{
	hyphens: none;
}


/*------------------------------ Impressum ------------------------------*/

#impressum {
width: fit-content;
height: calc(100vh - 200px);
margin: 0 auto;
display: flex;
align-items: center;
}


/*------------------------------ Datenschutz ------------------------------*/

#datenschutz {
	width: 700px;
	margin: 3rem auto 4rem auto;
}


/*------------------------------ Small Laptops ------------------------------*/

	@media only screen
	
	and (max-width: 1440px)
	and (orientation: landscape) {
		
		/*------------------------------ Allgemeine Gestaltung der Webseite ------------------------------*/

		header {
			position: relative;
		}


		/*------------------------------ Startseite ------------------------------*/
		
		#einleitung {
			grid-template-columns: 0.75fr 1fr 1fr 0.75fr;
		}


		/*------------------------------ Ueber mich ------------------------------*/

		#ueber-mich p {
			grid-area: 3 / 3 / span 1 / span 2;
		}

		
		/*------------------------------ Arbeiten ------------------------------*/

		#arbeiten {
			height: 100%;
			display: flex;
			flex-flow: column;
		}

		#arbeiten-h1 {
			text-align: center;
			margin-top: 2rem;
		}

		#kategorien {
			width: 100%;
			height: fit-content;
			flex-flow: row;
			align-items: center;
			margin: 0 0 2rem 0;
		}

		#arbeiten-wrap {
			width: fit-content;
			height: fit-content;
			margin: 0 auto 3rem auto;
			flex-flow: column;
		}

		#arbeiten-grid {
			grid-template-columns: repeat(6, 10rem);
			grid-template-rows: repeat(3, 10rem);
		}

		#potsblitz-citycard, #magazin, #tageszeitung, #plakat {
			aspect-ratio: 1 / 1.41463415;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}
		
		#zooflyer {
			aspect-ratio: 1.33275862 / 1;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}

		#waldtriathlon, #webseite-cp {
			aspect-ratio: 1.5 / 1;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 771px;
		}


		/*------------------------------ Grafischer Logarithmus ------------------------------*/

		#permutationen {
			grid-template-columns: 333px 748px;
		}
		
		#p256-wrap {
			grid-template-rows: 500px auto;
		}

		#p24, #p256-1, #p256-2 {
			height: 500px;
		}


		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			grid-template-columns: 14px 300px 400px 400px;
			grid-template-rows: 300px 226px 117px 566px;
		}

		#line {
			grid-area: 2 / 2 ;
		}

		#plant-lock_plakat {
			grid-area: 3 / 3;
		}

		#plakat_plant-lock {
			width: 448px;
			height: 634px;
		}

        /*------------------------------ Tetris ------------------------------*/

        #tetris-grid {
            grid-template-columns: 14px 300px 300px 300px;
            grid-template-rows: 400px 50px 400px 50px 81px 50px 563px 50px 587px 50px 587px 50px 533px 50px 587px 50px auto;
        }

        #tetris-bildunterschrift1 {
            grid-area: 2 / 3 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-foto3 {
            height: 400px;
            grid-area: 3 / 2;
        }

        #tetris-bildunterschrift2 {
            grid-area: 4 / 2;
        }

        #tetris-foto4 {
            grid-area: 3 / 3;
            height: 400px;
        }

        #tetris-bildunterschrift3 {
            grid-area: 4 / 3;
        }

        #sternstruktur {
            grid-area: 3 / 4 / span 3 / span 1;
        }

        #tetris-bildunterschrift4 {
            grid-area: 6 / 4;
        }

        #tetris-text {
            grid-area: 5 / 2 / span 1 / span 2;
            align-self: start;
        }

        #bausteine {
            grid-area: 7 / 2 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #bausteine2 {
            grid-area: 7 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift5 {
            grid-area: 8 / 3;
        }

        #tetris-bild1 {
            grid-area: 9 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift6 {
            grid-area: 10 / 4;
        }

        #tetris-bild2 {
            grid-area: 11 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift7 {
            grid-area: 12 / 4;
        }

        #tetris-animation {
            height: 533px;
            grid-area: 13 / 2;
        }

        #tetris-bildunterschrift8 {
            grid-area: 14 / 2;
        }

        #tetris-foto6 {
            grid-area: 13 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: right;
        }

        #tetris-bildunterschrift9 {
            grid-area: 14 / 4;
        }

        #tetris-foto7 {
            grid-area: 15 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift10 {
            grid-area: 16 / 4;
        }

        #tetris-text2 {
            width: 964px;
            grid-area: 17 / 2 / span 1 / span 3;
            align-self: start;
        }


		/*------------------------------ Kontakt ------------------------------*/

		#kontakt {
			height: 100%;
			margin-bottom: 50px;
		}

		#kontakt h1 {
			margin: 2rem 0 1rem 0;
		}

		#einleitung-kontakt {
			margin-bottom: 2rem;
		}
	}


/*------------------------------ Large Tablets Landscape ------------------------------*/

@media only screen
	and (min-width: 1281px)
	and (max-width: 1376px)
	and (orientation: landscape) {

		/*------------------------------ Startseite ------------------------------*/

		#einleitung {
			grid-template-columns: 0.75fr 1fr 1fr 0.75fr;
		}


		/*------------------------------ Kontakt ------------------------------*/

		#kontakt {
			height: calc(100vh - 120px);
			margin-bottom: 0;
		}

		#kontakt h1 {
			margin: 0;
		}


		/*------------------------------ Arbeiten ------------------------------*/

		#arbeiten-wrap {
			display: flex;
			flex-flow: row;
			height: 43rem;
		}

		#kategorien {
			height: 100%;
			margin-right: 4rem;
			flex-flow: column;
		}

		#arbeiten-grid {
			grid-template-columns: repeat(4, 10rem);
			grid-template-rows: repeat(4, 10rem);
		}


		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			grid-template-columns: 14px 300px 400px 400px;
			grid-template-rows: 300px 226px 117px 566px;
		}

		#line {
			grid-area: 2 / 2 ;
		}

		#plant-lock_plakat {
			grid-area: 3 / 3;
		}

		#plakat_plant-lock {
			aspect-ratio: 1/1.42; /* set the aspect ratio */
			height: calc(100vh - 2rem); /* fixed height */
			width: auto;
		  }

          /*------------------------------ Tetris ------------------------------*/

        #tetris-grid {
            grid-template-columns: 14px 300px 300px 300px;
            grid-template-rows: 400px 50px 400px 50px 81px 50px 563px 50px 587px 50px 587px 50px 533px 50px 587px 50px auto;
        }

        #tetris-bildunterschrift1 {
            grid-area: 2 / 3 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-foto3 {
            height: 400px;
            grid-area: 3 / 2;
        }

        #tetris-bildunterschrift2 {
            grid-area: 4 / 2;
        }

        #tetris-foto4 {
            grid-area: 3 / 3;
            height: 400px;
        }

        #tetris-bildunterschrift3 {
            grid-area: 4 / 3;
        }

        #sternstruktur {
            grid-area: 3 / 4 / span 3 / span 1;
        }

        #tetris-bildunterschrift4 {
            grid-area: 6 / 4;
        }

        #tetris-text {
            grid-area: 5 / 2 / span 1 / span 2;
            align-self: start;
        }

        #bausteine {
            grid-area: 7 / 2 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #bausteine2 {
            grid-area: 7 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift5 {
            grid-area: 8 / 3;
        }

        #tetris-bild1 {
            grid-area: 9 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift6 {
            grid-area: 10 / 4;
        }

        #tetris-bild2 {
            grid-area: 11 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift7 {
            grid-area: 12 / 4;
        }

        #tetris-animation {
            height: 533px;
            grid-area: 13 / 2;
        }

        #tetris-bildunterschrift8 {
            grid-area: 14 / 2;
        }

        #tetris-foto6 {
            grid-area: 13 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: right;
        }

        #tetris-bildunterschrift9 {
            grid-area: 14 / 4;
        }

        #tetris-foto7 {
            grid-area: 15 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift10 {
            grid-area: 16 / 4;
        }

        #tetris-text2 {
            width: 964px;
            grid-area: 17 / 2 / span 1 / span 3;
            align-self: start;
        }
}


/*------------------------------ Medium Tablets Landscape ------------------------------*/

@media only screen
	and (max-width: 1210px)
	and (orientation: landscape) {

		/*------------------------------ Arbeiten ------------------------------*/

		#bulky {
			width: 1150px;
			height: 407px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			margin-bottom: 5rem;
			grid-template-columns: 14px 300px 300px 300px;
			grid-template-rows: 225px 170px 71px 322px;
		}

		#plant-lock_plakat {
			height: 425px;
			grid-area: 3 / 3;
		}

		#plakat_plant-lock {
			width: 448px;
			height: 634px;
		}
}


/*------------------------------ Small Tablets Landscape ------------------------------*/

@media only screen
	and (max-width: 1133px)
	and (orientation: landscape) {

		/*------------------------------ Startseite ------------------------------*/
		
		#einleitung {
			grid-template-columns: 0.3fr 1fr 1fr 0.3fr;
		}


		/*------------------------------ Arbeiten ------------------------------*/

		#arbeiten-grid {
			grid-template-columns: repeat(5, 10rem);
			grid-template-rows: repeat(4, 10rem);
		}

		#bulky {
			aspect-ratio: 2.82386364 / 1;
			width: calc(100vw - 2rem);
			height: auto;
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 900px;
		}


		/*------------------------------ Grafischer Logarithmus ------------------------------*/

		#permutationen {
			grid-template-columns: 267px 604px;
		}
		
		#p256-wrap {
			grid-template-rows: 400px auto;
		}

		#p24, #p256-1, #p256-2 {
			height: 400px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			grid-template-columns: 14px 300px 250px 250px;
			grid-template-rows: 187px 141px 50px 272px;
		}

		#plant-lock_plakat {
			height: 354px;
			grid-area: 3 / 3;
		}

		#plakat_plant-lock {
			width: 448px;
			height: 634px;
		}

        /*------------------------------ Tetris ------------------------------*/

        #tetris-grid {
            margin-top: 3rem;
            grid-template-columns: 14px 275px 275px 275px;
            grid-template-rows: 367px 50px 367px 50px 67px 50px 516px 50px 542px 50px 542px 50px 488px 50px 541px 50px auto;
        }

        #tetris-bildunterschrift1 {
            grid-area: 2 / 3 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-foto3 {
            height: 367px;
            grid-area: 3 / 2;
        }

        #tetris-bildunterschrift2 {
            grid-area: 4 / 2;
        }

        #tetris-foto4 {
            grid-area: 3 / 3;
            height: 367px;
        }

        #tetris-bildunterschrift3 {
            grid-area: 4 / 3;
        }

        #sternstruktur {
            grid-area: 3 / 4 / span 3 / span 1;
        }

        #tetris-bildunterschrift4 {
            grid-area: 6 / 4;
        }

        #tetris-text {
            grid-area: 5 / 2 / span 1 / span 2;
            align-self: start;
        }

        #bausteine {
            grid-area: 7 / 2 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #bausteine2 {
            grid-area: 7 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift5 {
            grid-area: 8 / 3;
        }

        #tetris-bild1 {
            grid-area: 9 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift6 {
            grid-area: 10 / 4;
        }

        #tetris-bild2 {
            grid-area: 11 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift7 {
            grid-area: 12 / 4;
        }

        #tetris-animation {
            height: 488px;
            grid-area: 13 / 2;
        }

        #tetris-bildunterschrift8 {
            grid-area: 14 / 2;
        }

        #tetris-foto6 {
            grid-area: 13 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: right;
        }

        #tetris-bildunterschrift9 {
            grid-area: 14 / 4;
        }

        #tetris-foto7 {
            grid-area: 15 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift10 {
            grid-area: 16 / 4;
        }

        #tetris-text2 {
            width: 889px;
            grid-area: 17 / 2 / span 1 / span 3;
            align-self: start;
        }
}


/*------------------------------ Large Tablets Portrait ------------------------------*/

@media only screen
	and (max-width: 1032px)
	and (orientation: portrait) {
	
		/*------------------------------ Allgemeine Gestaltung der Webseite ------------------------------*/

		footer {
			justify-content: space-between;
		}

		#copyright {
			position: relative;
		}

		#up {
			position: relative;
		}


		/*------------------------------ Startseite ------------------------------*/
			
		#einleitung {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 0 auto;
		}

		#einleitung-bg {
			width: 100%;
			height: 35%;
			background-position: center;
		}

		#einleitung h1 {
			margin-top: 0;
		}


		/*------------------------------ Ueber mich ------------------------------*/

		#ueber-mich {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			gap: 0;
		}

		#ueber-mich h1 {
			align-self: center;
			margin-bottom: 3rem;
		}

		#ueber-mich img {
			margin-bottom: 3rem;
		}


		/*------------------------------ Arbeiten ------------------------------*/

		#arbeiten {
			display: flex;
			flex-flow: column;
			justify-content: center;
		}

		#arbeiten h1 {
			text-align: center;
		}

		#arbeiten-wrap {
			flex-flow: column;
			height: fit-content;
		}

		#kategorien {
			flex-flow: row;
		}

		#arbeiten-grid {
			grid-template-columns: repeat(4, 10rem);
			grid-template-rows: repeat(4, 10rem);
		}

		#bulky {
			width: 595px;
			height: 842px;
			background-position: top, bottom;
		}


		/*------------------------------ Grafischer Logarithmus ------------------------------*/

		#permutationen {
			display: flex;
			flex-flow: column;
			align-items: center;
			row-gap: 0;
		}

		#p24-wrap, #p256-wrap {
			display: flex;
			flex-flow: column;
			align-items: end;
			row-gap: 1rem;
		}

		#p24 {
			width: 400px;
		}

		#p24-bildunterschrift {
			margin-bottom: 2rem;
			width: 332px;
		}

		#p256-1, #p256-2 {
			width: 429px;
		}

		#p256-bildunterschrift {
			width: 288px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			grid-template-columns: 14px 400px 400px;
			grid-template-rows: 300px 226px 449px 85px;
		}

		#line {
			border: 0;
		}

		#foto3 {
			grid-area: 2 / 2 / span 2 / span 1;
		}

		#plant-lock_plakat {
			grid-area: 3 / 3;
		}

		
		/*------------------------------ Kontakt ------------------------------*/

		#kontakt {
			height: calc(100vh - 120px);
			margin-bottom: 0;
		}

        /*------------------------------ Tetris ------------------------------*/

        #tetris-grid {
            margin-top: 3rem;
            grid-template-columns: 14px 275px 275px 275px;
            grid-template-rows: 367px 50px 367px 50px 67px 50px 516px 50px 542px 50px 542px 50px 488px 50px 541px 50px auto;
        }

        #tetris-bildunterschrift1 {
            grid-area: 2 / 3 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-foto3 {
            height: 367px;
            grid-area: 3 / 2;
        }

        #tetris-bildunterschrift2 {
            grid-area: 4 / 2;
        }

        #tetris-foto4 {
            grid-area: 3 / 3;
            height: 367px;
        }

        #tetris-bildunterschrift3 {
            grid-area: 4 / 3;
        }

        #sternstruktur {
            grid-area: 3 / 4 / span 3 / span 1;
        }

        #tetris-bildunterschrift4 {
            grid-area: 6 / 4;
        }

        #tetris-text {
            grid-area: 5 / 2 / span 1 / span 2;
            align-self: start;
        }

        #bausteine {
            grid-area: 7 / 2 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #bausteine2 {
            grid-area: 7 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift5 {
            grid-area: 8 / 3;
        }

        #tetris-bild1 {
            grid-area: 9 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift6 {
            grid-area: 10 / 4;
        }

        #tetris-bild2 {
            grid-area: 11 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift7 {
            grid-area: 12 / 4;
        }

        #tetris-animation {
            height: 488px;
            grid-area: 13 / 2;
        }

        #tetris-bildunterschrift8 {
            grid-area: 14 / 2;
        }

        #tetris-foto6 {
            grid-area: 13 / 3 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: right;
        }

        #tetris-bildunterschrift9 {
            grid-area: 14 / 4;
        }

        #tetris-foto7 {
            grid-area: 15 / 2 / span 1 / span 3;
        }

        #tetris-bildunterschrift10 {
            grid-area: 16 / 4;
        }

        #tetris-text2 {
            width: 889px;
            grid-area: 17 / 2 / span 1 / span 3;
            align-self: start;
        }

	}


/*------------------------------ Medium Tablets Portrait ------------------------------*/

@media only screen
	and (max-width: 834px)
	and (orientation: portrait) {
		
		/*------------------------------ Allegemeine Gestaltung der Webseite ------------------------------*/

		header {
			position: relative;
		}


		/*------------------------------ Arbeiten ------------------------------*/

		#zooflyer {
			aspect-ratio: 1.33275862 / 1;
			width: calc(100vw - 2rem);
			height: auto;
		}

		#waldtriathlon, #webseite-cp {
			aspect-ratio: 1.5 / 1;
			width: calc(100vw - 2rem);
			height: auto;
		}

		#easytravel {
			aspect-ratio: 1.77927928 / 1;
			width: calc(100vw - 2rem);
			height: auto;
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 800px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			margin-bottom: 5rem;
			grid-template-columns: 14px 300px 300px;
			grid-template-rows: auto 170px 328px 65px;
		}

		#foto1 {
			height: 225px;
			align-self: end;
		}

		#plant-lock_plakat {
			height: 425px;
		}

        /*------------------------------ Tetris ------------------------------*/

        #tetris-grid {
            margin-top: 3rem;
            grid-template-columns: 14px 275px 275px;
            grid-template-rows: 367px 0 367px 50px 367px 133px 50px auto 0 516px 50px 355px 50px 355px 50px 488px 50px 603px 50px 354px 50px auto;
        }

        .projekt {
            border: 0;
        }

        #tetris-bildunterschrift1 {
            grid-area: 4 / 2;
            justify-self: end;
        }

        #tetris-foto2 {
            grid-area: 3 / 2;
        }

        #tetris-foto3 {
            grid-area: 3 / 3;
        }

        #tetris-bildunterschrift2 {
            grid-area: 4 / 3;
        }

        #tetris-foto4 {
            grid-area: 5 / 2;
            height: 367px;
        }

        #tetris-bildunterschrift3 {
            grid-area: 6 / 2;
        }

        #sternstruktur {
            grid-area: 5 / 3 / span 2 / span 1;
        }

        #tetris-bildunterschrift4 {
            grid-area: 7 / 3;
        }

        #tetris-text {
            grid-area: 8 / 2 / span 1 / span 2;
            align-self: start;
        }

        #bausteine {
            grid-area: 10 / 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #bausteine2 {
            grid-area: 10 / 3;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift5 {
            grid-area: 11 / 2 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-bild1 {
            grid-area: 12 / 2 / span 1 / span 2;
        }

        #tetris-bildunterschrift6 {
            grid-area: 13 / 3;
        }

        #tetris-bild2 {
            grid-area: 14 / 2 / span 1 / span 2;
        }

        #tetris-bildunterschrift7 {
            grid-area: 15 / 3;
        }

        #tetris-animation {
            height: 488px;
            grid-area: 16 / 2 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift8 {
            grid-area: 17 / 2 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-foto6 {
            grid-area: 18 / 2 / span 1 / span 2;

        }

        #tetris-bildunterschrift9 {
            grid-area: 19 / 3;
        }

        #tetris-foto7 {
            grid-area: 20 / 2 / span 1 / span 2;
        }

        #tetris-bildunterschrift10 {
            grid-area: 21 / 3;
        }

        #tetris-text2 {
            margin: 0;
            width: 350px;
            grid-area: 22 / 2 / span 1 / span 2;
            align-self: start;
        }
	}


/*------------------------------ Small Tablets Portrait ------------------------------*/

@media only screen
	and (max-width: 768px)
	and (orientation: portrait) {
	
		/*------------------------------ Arbeiten ------------------------------*/

		#myday {
			aspect-ratio: 1.7761194 / 1;
			width: calc(100vw - 2rem);
			height: auto;
		}

		#potsblitz-logo {
			aspect-ratio: 1.41666667 / 1;
			width: calc(100vw - 2rem);
			height: auto;
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 700px;
		}
	}


/*------------------------------ Large Phones Landscape ------------------------------*/

@media only screen 
	and (max-width: 956px)
	and (orientation: landscape) {
		
		/*------------------------------ Allgemeine Gestaltung der Webseite ------------------------------*/

		footer {
			justify-content: space-between;
		}

		#copyright {
			position: relative;
		}

		#up {
			position: relative;
		}


		/*------------------------------ Startseite ------------------------------*/

		#einleitung {
			grid-template-columns: 0.35fr 0.5fr 0.1fr 1fr 0.35fr;
			grid-template-rows: 0.1fr 1fr 0.1fr;
		}
		
		#einleitung-bg {
			grid-area: 2 / 2;
		}

		#einleitung-inhalt {
			grid-area: 2 / 4;
		}


		/*------------------------------ Ueber mich ------------------------------*/

		#ueber-mich {
			grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
			grid-template-rows: 0.1fr 0.4fr 1fr 0.1fr;
			gap: 0;
		}


		#ueber-mich h1 {
			align-self: start;
			justify-self: start;
		}

		#ueber-mich img{
			justify-self: start;
		}

		#ueber-mich p{
			grid-area: 2 / 3 / span 2 / span 1;
			align-self: center;
		}


		/*------------------------------ Arbeiten ------------------------------*/
		
		#kategorien {
			flex-flow: row;
		}

		#arbeiten-wrap {
			display: block;
			height: fit-content;
		}

		#arbeiten-grid {
			grid-template-columns: repeat(5, 10rem);
			grid-template-rows: repeat(4, 10rem);
		}

		#myday {
			aspect-ratio: 1.7761194 / 1;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}

		#potsblitz-logo {
			aspect-ratio: 1.41666667 / 1;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}

		#verpackung {
			aspect-ratio: 1 / 1.11688312;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}

		#easytravel {
			aspect-ratio: 1.78197674 / 1;
			width: auto;
			height: calc(100vh - 54px - 2rem);
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 456px;
		}


		/*------------------------------ Grafischer Logarithmus ------------------------------*/

		#permutationen {
			grid-template-columns: 200px 461px;
		}
				
		#p256-wrap {
			grid-template-rows: 300px auto;
		}
		
		#p24, #p256-1, #p256-2 {
			height: 300px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			grid-template-columns: 14px 250px 250px 250px;
		}

		#line {
			grid-area: 3 / 2;
		}

		#plakat_plant-lock {
			aspect-ratio: 1 / 1.41517857;
			width: auto;
			height: calc(100vh - 2rem);
		}

        /*------------------------------ Tetris ------------------------------*/

        #tetris-grid {
            margin-top: 3rem;
            grid-template-columns: 14px 275px 275px;
            grid-template-rows: 367px 0 367px 50px 367px 133px 50px auto 0 516px 50px 355px 50px 355px 50px 488px 50px 603px 50px 354px 50px auto;
        }

        .projekt {
            border: 0;
        }

        #tetris-bildunterschrift1 {
            grid-area: 4 / 2;
            justify-self: end;
        }

        #tetris-foto2 {
            grid-area: 3 / 2;
        }

        #tetris-foto3 {
            grid-area: 3 / 3;
        }

        #tetris-bildunterschrift2 {
            grid-area: 4 / 3;
        }

        #tetris-foto4 {
            grid-area: 5 / 2;
            height: 367px;
        }

        #tetris-bildunterschrift3 {
            grid-area: 6 / 2;
        }

        #sternstruktur {
            grid-area: 5 / 3 / span 2 / span 1;
        }

        #tetris-bildunterschrift4 {
            grid-area: 7 / 3;
        }

        #tetris-text {
            grid-area: 8 / 2 / span 1 / span 2;
            align-self: start;
        }

        #bausteine {
            grid-area: 10 / 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #bausteine2 {
            grid-area: 10 / 3;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift5 {
            grid-area: 11 / 2 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-bild1 {
            grid-area: 12 / 2 / span 1 / span 2;
        }

        #tetris-bildunterschrift6 {
            grid-area: 13 / 3;
        }

        #tetris-bild2 {
            grid-area: 14 / 2 / span 1 / span 2;
        }

        #tetris-bildunterschrift7 {
            grid-area: 15 / 3;
        }

        #tetris-animation {
            height: 488px;
            grid-area: 16 / 2 / span 1 / span 2;
            background-repeat: no-repeat;
            background-position: center;
        }

        #tetris-bildunterschrift8 {
            grid-area: 17 / 2 / span 1 / span 2;
            justify-self: center;
        }

        #tetris-foto6 {
            grid-area: 18 / 2 / span 1 / span 2;

        }

        #tetris-bildunterschrift9 {
            grid-area: 19 / 3;
        }

        #tetris-foto7 {
            grid-area: 20 / 2 / span 1 / span 2;
        }

        #tetris-bildunterschrift10 {
            grid-area: 21 / 3;
        }

        #tetris-text2 {
            margin: 0;
            width: 350px;
            grid-area: 22 / 2 / span 1 / span 2;
            align-self: start;
        }
	}


/*------------------------------ Medium Phones Landscape ------------------------------*/

@media only screen 
	and (max-width: 812px)
	and (orientation: landscape) {

		/*------------------------------ Startseite ------------------------------*/

		#einleitung {
			grid-template-columns: 0.3fr 0.5fr 0.1fr 1fr 0.3fr;
		}


		/*------------------------------ Ueber mich ------------------------------*/

		#ueber-mich {
			height: 100%;
			grid-template-columns: 0.3fr 1fr 1fr 0.3fr;
		}


		/*------------------------------ Arbeiten ------------------------------*/

		#arbeiten-grid {
			grid-template-columns: repeat(4, 10rem);
			grid-template-rows: repeat(4, 10rem);
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 385px;
		}


		/*------------------------------ Grafischer Logarithmus ------------------------------*/

		#permutationen {
			grid-template-columns: 167px 390px;
		}
						
		#p256-wrap {
			grid-template-rows: 250px auto;
		}
				
		#p24, #p256-1, #p256-2 {
			height: 250px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			grid-template-columns: 14px 250px 200px 200px;
			grid-template-rows: 150px 113px 27px 224px;
		}

		#plant-lock_teaser {
			grid-area: span 3 / span 1;
		}

		#line {
			grid-area: 4 / 2;
		}

		#plant-lock_plakat {
			height: 283px;
		}
	}


/*------------------------------ Small Phones Landscape ------------------------------*/

@media only screen 
	and (max-width: 667px)
	and (orientation: landscape) {

		/*------------------------------ Allgemeine Gestaltung der Webseite ------------------------------*/

		footer {
			justify-content: space-between;
		}

		#copyright {
			position: relative;
		}

		#up {
			position: relative;
		}

		/*------------------------------ Startseite ------------------------------*/

		#einleitung {
			grid-template-columns: 0.1fr 0.5fr 0.1fr 1fr 0.1fr;
		}


		/*------------------------------ Ueber mich ------------------------------*/

		#ueber-mich {
			grid-template-columns: 0.15fr 1fr 1fr 0.15fr;
		}


		/*------------------------------ Arbeiten ------------------------------*/

		#kategorien {
			flex-flow: row;
		}

		#arbeiten-wrap {
			display: block;
			height: fit-content;
		}

		#arbeiten-grid {
			grid-template-columns: repeat(3, 10rem);
			grid-template-rows: repeat(6, 10rem);
		}

		#bulky {
			width: 637px;
			height: 226px;
		}

		/*------------------------------ carousel ------------------------------*/

		#container-broschur, #slides-broschur, #slides-broschur img {
			width: 385px;
		}

		/*------------------------------ Plant Lock ------------------------------*/

		#plant-lock_grid {
			margin-bottom: 5rem;
			grid-template-columns: 14px 250px 250px;
			grid-template-rows: auto 141px 269px 53px;
		}

		#line {
			border: 0;
		}

		#foto1 {
			height: 187px;
			align-self: end;
		}

		#foto3 {
			grid-area: 2 / 2 / span 2 / span 1;
		}

		#plant-lock_plakat {
			height: 354px;
		}
		
}


/*------------------------------ Large Phones Portrait ------------------------------*/

@media only screen and (max-width: 440px) {
	
	/*------------------------------ Allgemeine Gestaltung der Webseite ------------------------------*/

	#mainnav {
		justify-content: space-evenly;
		gap: 0;
	}

	#bildmarke {
		position: relative;
		top: 0;
		left: 0;
	}

	#copyright {
		display: none;
	}

	#copyright_sp {
		display: flex;
		position: relative;
	}

	#cookiebanner.cookiebanner-active {
		right: 0;
	}


	/*------------------------------ Startseite ------------------------------*/

	#einleitung {
		width: 80%;
		height: 100vh;
	}

	#einleitung-bg {
		height: 50%;
	}


	/*------------------------------ Ueber mich ------------------------------*/

	#ueber-mich {
		height: 100vh;
	}


	/*------------------------------ Arbeiten ------------------------------*/
	
	#arbeiten {
		height: 100%;
	}

	#arbeiten h1 {
		margin-top: 2rem;
	}

	#kategorien {
		width: 100%;
		margin-bottom: 2rem;
	}

	#arbeiten-wrap {
		height: fit-content;
		margin-bottom: 3rem;
	}

	#arbeiten-grid {
		grid-template-columns: repeat(2, 10rem);
		grid-template-rows: repeat(8, 10rem);
	}

	#bulky {
		aspect-ratio: 1 / 1.41457286;
		width: calc(100vw - 2rem);
		height: auto;
	}

	#potsblitz-citycard, #magazin, #tageszeitung, #plakat {
		aspect-ratio: 1 / 1.4120603;
		width: calc(100vw - 2rem);
		height: auto;
	}

	#verpackung {
		aspect-ratio: 1 / 1.11688312;
		width: calc(100vw - 2rem);
		height: auto;
	}

	/*------------------------------ carousel ------------------------------*/

	#container-broschur, #slides-broschur, #slides-broschur img {
		width: 398px;
	}


	/*------------------------------ Grafischer Logarithmus ------------------------------*/

    .titelleiste {
        width: 398px
    }

	#p24 {
		width: 300px;
		height: 450px;
	}

	#p24-bildunterschrift {
		width: 300px;
	}

	#p256-1, #p256-2 {
		width: 300px;
		height: 420px;
	}

	#p256-bildunterschrift {
		width: 300px;
	}

	#back {
		left: -1rem;
	}

	.titelleiste h1 {
		font-size: 1.5rem;
	}

	/*------------------------------ Plant Lock ------------------------------*/

	#plant-lock_grid {
		display: flex;
		flex-flow: column;
		width: 300px;
		margin-top: 3rem;
	}

	#plant-lock_grid .back {
		position: absolute;
		left: 2rem;
		top: 125px;
	}

	#plant-lock_grid h1 {
		text-align: center;
	}

	#foto1, #foto2, #foto3 {
		width: 300px;
	}

	#foto2 {
		height: 170px;
	}

	#foto3 {
		height: 530px;
	}

	#plakat_plant-lock {
		aspect-ratio: 1 / 1.41517857;
		width: calc(100vw - 2rem);
		height: auto;
	}


    /*------------------------------ Tetris ------------------------------*/

    #tetris-grid {
        width: 300px;
        display: flex;
        flex-flow: column;
    }

    #tetris-grid h1 {
        text-align: center;
    }

    #tetris-grid .back {
        position: absolute;
        left: 2rem;
        top: 125px;
    }

    #tetris-grid .bildunterschrift {
        text-align: right;
    }

    #tetris-foto1, #tetris-foto2, #tetris-foto3, #tetris-foto4, #tetris-foto5, #tetris-foto6,
    #tetris-foto7, #tetris-bild1, #tetris-bild2, #sternstruktur, #bausteine, #bausteine2 {
        width: 300px;
    }

    #tetris-foto1, #tetris-foto2, #tetris-foto3, #tetris-foto4 {
        height: 400px;
    }

    #sternstruktur, #bausteine, #bausteine2 {
        height: 563px;
    }

    #tetris-bild1, #tetris-bild2 {
        height: 183px;
    }

    #tetris-animation {
        height: 533px;

    }

    #tetris-foto6 {
        height: 311px;
    }

    #tetris-foto7 {
        height: 183px
    }

	#tetris-text2 {
		width: 300px;
	}


	/*------------------------------ Kontakt ------------------------------*/

	#kontakt {
		width: 80%;
		margin: 1rem auto 2rem auto;
		height: 100vh;
	}


	/*------------------------------ Datenschutz ------------------------------*/

	#datenschutz {
		width: 396px;
		margin: 0 auto 2rem auto;
	}

}

/*------------------------------ Medium and Small Phones Portrait ------------------------------*/

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

	/*------------------------------ Arbeiten ------------------------------*/

	/*------------------------------ carousel ------------------------------*/

	#container-broschur, #slides-broschur, #slides-broschur img {
		width: 345px;
	}


    /*------------------------------ Grafischer Logarithmus ------------------------------*/

    .titelleiste {
        width: 345px;
    }


	/*------------------------------ Datenschutz ------------------------------*/

	#datenschutz {
		width: 343px;
	}
}