/*       congrats! u found another easteregg.
 ╔════╗    ╔═╗ ╔═══╗             ╔═════╗     ╔═╦═╗
 ║ ═  ╠══╦═╣ ║ ║ ═ ╠═══╦═╦═╦═══╗ ║     ╠═══╦═╣ ╠═╬═══╗
 ║   ╦╝═ ║ ═ ║ ║   ║ ═ ║ ║ ╠══ ║ ║ ║ ║ ║ ═ ║ ═ ║ ╠══ ║
 ║ ║ ╚╗ ═╣   ║ ║ ║ ║   ║   ║ ═ ║ ║ ║ ║ ║  ═╣   ║ ║ ═ ║
 ╚═╩══╩══╩═══╝ ╚═╩═╩═╗ ╠═══╩═══╝ ╚═╩═╩═╩═══╩═══╩═╩═══╝
                     ╚═╝
*/

@font-face {
	font-family: 'montserrat';
	font-weight: normal;
	src: url('montserrat.woff2') format('woff2'), url('montserrat.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'montserrat';
	font-weight: bold;
	src: url('montserrat-bold.woff2') format('woff2'), url('montserrat-bold.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'montserrat';
	font-weight: 300;
	src: url('montserrat-light.woff2') format('woff2'), url('montserrat-light.woff') format('woff');
	font-display: swap;
}

body {
	background-color: #fff;
	color: #333;
	font: 12pt montserrat, sans-serif;
	margin: 0;
	line-height: 1.5;
}

.particles-js-canvas-el {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	height: 120vh;
	z-index: -1;
}

b, strong, label span {
	font-weight: bold;
	color: #c31609;
}

a:visited {
	color: unset;
}


/* NAVICON & NAV */

#navicon-checkbox {
	display: none;
}

#navicon {
	z-index: 9;
	position: fixed;
	color: #fff;
	font-size: 13vw;
	font-family: "Arial Rounded MT Bold", montserrat;
	transform: rotate(90deg);
	top: -1vw;
	right: 3%;
	cursor: pointer;
	text-shadow: 0 0 8px #ff0000, 0 0 8px #ff0000;
}

nav {
	background-color: rgba(255,255,255,.8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 120%;
	text-align: center;
	z-index: 8;
}

nav ul {
	list-style: none;
	margin-top: 20vw;
	padding: 0;
}

nav li {
	display: inline-block;
}

nav a, nav a:visited {
	display: inline-block;
	width: 35vw;
	height: 25vw;
	max-height: 20vh;
	font-size: 3vw;
	padding-top: 50%;
	margin: 1vw;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: middle;
	background: #c31609 center 30%/40% no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath fill='%23fff' d='M690-40q-12 0-21-8.897-9-8.896-9-21.5Q660-83 668.625-91.5 677.25-100 690-100q72 0 121-49.5T860-270q0-13 8.69-21.5 8.689-8.5 21-8.5 12.31 0 21.31 8.78 9 8.781 9 21.22 0 96-67.282 163T690-40ZM70-659q-12.439 0-21.22-9Q40-677 40-689q0-95.851 67.282-163.425Q174.564-920 270-920q12.854 0 21.927 9T301-889.69q0 12.311-8.5 21Q284-860 271-860q-70.538 0-120.769 49.5Q100-761 100-690q0 13.175-8.625 22.088Q82.75-659 70-659Zm682-114q9 9 9 21t-9 21L497-476q-9 9-21.1 8.583-12.1-.416-20.9-9.583-9-8.8-9-20.9 0-12.1 9-21.1l255-254q9-9 21-9t21 9Zm76 131.842q9 8.842 9 21T828-599L601-372q-9 9-21 8.5t-21-9.109Q550-382 550-394q0-12 9-21l226-226q9.067-9 21.533-9Q819-650 828-641.158ZM195-199q-91-91-91.5-218T194-635l101-101q9-9 21-9t21 9l21 21q12 12 19.5 28t8.5 30l163-164q9.067-9 21.533-9Q583-830 592-820.947q9 9.052 9 21.5Q601-787 592-778L389-575l-65 65 26 26q42 42 40.5 100.5t-43.604 100.604L346-282q-9 9-21 8.5t-21-9.109q-9-9.391-9-21.491t9-20.9l1-1q25-25 25.5-58.5T307-442l-47-47q-9-9.067-9-21.533Q251-523 260-532l56-55q17-17 17-42.5T316-672l-80 80q-73 73-72.5 175T237-242q74 74 177 75.5T590-238l241-241q9.067-9 21.533-9Q865-488 874-479.158q9 8.842 9 21T874-437L633-196q-91 91-219 89.5T195-199Zm217-217Z'/%3E%3C/svg%3E");
}

nav a[href*="webdesign"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath fill='%23fff' d='M458-81q-79-4-148-37t-120-86.5q-51-53.5-80.5-124.269Q80-399.537 80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q149 0 259 94t135 236h-61q-17-84-71-150t-135-99v18q0 35-24 61t-59 26h-87v87q0 16.575-13.5 27.787Q410-568 393-568h-83v88h110v125h-67L149-559q-5 20-7 39.667-2 19.666-2 39.333 0 135 91 233t227 106v60Zm392-26L716-241q-21 15-45.5 23t-50.065 8q-71.015 0-120.725-49.618Q450-309.235 450-380.118 450-451 499.618-500.5q49.617-49.5 120.5-49.5Q691-550 740.5-500.29T790-379.565q0 25.565-8.5 50.065Q773-305 759-283l134 133-43 43ZM619.859-270Q666-270 698-301.859q32-31.859 32-78T698.141-458q-31.859-32-78-32T542-458.141q-32 31.859-32 78T541.859-302q31.859 32 78 32Z'/%3E%3C/svg%3E"); }
nav a[href*="printdesign"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath fill='%23fff' d='M349-250h262q12.75 0 21.375-8.675 8.625-8.676 8.625-21.5 0-12.825-8.625-21.325T611-310H349q-12.75 0-21.375 8.675-8.625 8.676-8.625 21.5 0 12.825 8.625 21.325T349-250Zm0-170h262q12.75 0 21.375-8.675 8.625-8.676 8.625-21.5 0-12.825-8.625-21.325T611-480H349q-12.75 0-21.375 8.675-8.625 8.676-8.625 21.5 0 12.825 8.625 21.325T349-420ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.444 0 23.722 5T599-862l183 183q8 8 13 19.278 5 11.278 5 23.722v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.375-8.625T551-664ZM220-820v186-186 680-680Z'/%3E%3C/svg%3E"); }
nav a[href*="fotografie"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath fill='%23fff' d='M480-602h319q-28-74-89-130.5T571-810L467-624q-5 8 0 15t13 7Zm-132 61q4.5 8 12.75 8t13.25-8l161-277q-12-1-27-1.5t-28-.5q-72 0-132 26t-108 72l108 181ZM149.771-393H361q8.25 0 13.125-7T374-415L217-696q-38 45-57.5 100.5T140-480q0 21 2 44t7.771 43ZM390-151l107-184q5-8 .5-15.5T484-358H162q28 74 88.5 130.5T390-151Zm90.077 11Q552-140 612.5-166T720-238L613-419q-4.5-8-12.75-8T587-419L425-142q13 1 27.5 1.5t27.577.5ZM744-264q34-42 55-99t21-116.636q0-22.364-2-44.864-2-22.5-7-43.5H600q-8 0-13.5 7t-.5 15l158 282ZM480-480Zm0 400q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z'/%3E%3C/svg%3E"); }
nav a[href*="pc-support"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath fill='%23fff' d='m438-497-64-64q-3-3-15 2t-23 9q-11 4-14.5 3.5T332-561q-9 9-9 21t9 21l85 85q9 9 21 9t21-9l181-170q0-11-2-22.5t-10.054-19.63Q619.161-655 607.08-655 595-655 586-646L438-497ZM40-120v-60h850q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890-120H40Zm100-120q-24 0-42-18t-18-42v-480q0-24 18-42t42-18h680q24 0 42 18t18 42v480q0 24-18 42t-42 18H140Zm0-60h680v-480H140v480Zm0 0v-480 480Z'/%3E%3C/svg%3E"); }
nav a[href*="kontakt"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 -960 960 960' width='48'%3E%3Cpath fill='%23fff' d='m499-259 364-363-81-80-363 363 80 80Zm-399-90q0 31 23 50t71 26q12 2 19.5 11t6.5 21q-1 13-10 21t-21 6q-73-11-111-44.5T40-349q0-60 51-98t142-46q44-4 65.5-16t21.5-33q0-26-22.5-41T224-606q-13-2-20.5-11t-6.5-22q1-13 11-20.5t22-5.5q74 12 112 42.5t38 80.5q0 46-37.5 75T238-433q-69 5-103.5 26T100-349Zm418 156L353-358l398-397q14-14 31.5-13.5T814-755l102 101q14 14 14 32t-14 32L518-193Zm-159 33q-17 4-30-9t-9-30l33-159 165 165-159 33Z'/%3E%3C/svg%3E"); }

input[type=checkbox]:checked ~ nav {
	display: block;
	animation: navfadein 1s 1;
}

@keyframes navfadein {
	0% { opacity: 0; filter: blur(10px); }
	100% { opacity: 1; filter: blur(0px); }
}

input[type=checkbox]:checked ~ header,
input[type=checkbox]:checked ~ main,
input[type=checkbox]:checked ~ footer {
	filter: blur(8px);
}


/* NAV IN LANDSCAPE ORIENTATION */

@media (orientation: landscape) {

	#navicon {
		display: none;
	}

	nav {
		display: block;
		height: unset;
		background: linear-gradient(to bottom, rgba(191,4,4,1) 5%, rgba(191,4,4,0) 100%);
		padding: .5em;
	}

	nav ul {
		margin-top: 0;
	}

	nav a, nav a:visited {
		width: unset;
		height: unset;
		margin: unset;
		max-height: unset;
		padding-top: unset;
		background: unset !important;
		line-height: 1;
		font-size: 14pt;
		color: #fff;
		margin: 0 1em;
		transition: all 500ms ease;
	}

	nav a:hover {
		margin: 0 1.5em;
		letter-spacing: 2px;
	}

	input[type=checkbox]:checked ~ header,
	input[type=checkbox]:checked ~ main,
	input[type=checkbox]:checked ~ footer {
		filter: unset;
	}
}


/* HEADER */

header {
	display: block;
	position: relative;
	height: 50vw;
	max-height: 60vh;
	background: #ad0101 url('header.webp') center/cover scroll no-repeat;
	z-index: 3;
}

#webdesign { background-image: url('webdesign/header-webdesign.webp'); }
#printdesign { background-image: url('printdesign-corporatedesign/header-printdesign.webp'); }
#fotografie { background-image: url('fotografie/header-fotografie.webp'); }
#pc-support { background-image: url('pc-support/hdd.webp'); }

header img {
	position: relative;
	display: block;
	margin: auto;
	width: 65%;
	max-width: 740px;
	top: 35%;
}

header div {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 20%;
	background-image: url('welle.svg') ;
	background-size: 100% 100%;
	background-repeat: repeat-x;
	opacity: .5;
	z-index: 4;
}

header div:nth-of-type(1) {
	background-position: 100vw 0vw;
	animation: welle1 6s ease-in-out infinite;
}

header div:nth-of-type(2) {
	background-position: 70vw 2vw;
	animation: welle2 14s ease-in-out infinite;
}

header div:nth-of-type(3) {
	background-position: 55vw 3vw;
	animation: welle3 55s ease-in-out infinite;
}

header div:nth-of-type(4) {
	background-position: 33vw 5.5vw;
	opacity: 1;
	animation: welle4 10s ease-in-out infinite;
}

@keyframes welle1 {
	0% { background-position-x: 100vw; }
	50% { background-position-x: 50vw; }
}

@keyframes welle2 {
	0% { background-position-x: 70vw; }
	50% { background-position-x: 270vw; }
}

@keyframes welle3 {
	0% { background-position-x: 55vw; }
	50% { background-position-x: -555vw; }
}

@keyframes welle4 {
	0% { background-position-x: 33vw; }
	50% { background-position-x: 133vw; }
}

h1 {
	position: absolute;
	bottom: 18%;
	right: .3em;
	color: #fff;
	text-transform: uppercase;
	text-align: right;
	font-weight: 300;
	font-size: 5vw;
	mix-blend-mode: hard-light;
	opacity: .9;
	line-height: 1;
	z-index: 3;
}


/* MAIN */

main {
	display: block;
	padding: 4em 0;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0px,rgba(255,255,255,0) 100px,rgba(255,255,255,0) 100%);
}

main > * {
	display: block;
	margin: 1em auto;
	width: 100%;
	max-width: 840px;
	padding: 0 .5em;
	box-sizing: border-box;
}

main ul, main ol {
	padding-left: 2em;
}

main li {
	margin-bottom: .5em;
}

h2 {
	color: #a42625;
	font-weight: 300;
	font-size: 2em;
	text-transform: uppercase;
	text-align: center;
	margin-top: 1.8em;
	line-height: 1.3;
}

h3 {
	color: #a42625;
	margin: 0;
}

blockquote {
	width: 90%;
	max-width: 800px;
	border-left: 5px dotted #a42625;
	padding-left: 1em;
	font-style: italic;
}


/* FOOTER */

footer {
	background: rgb(164,38,37);
	background: linear-gradient(90deg, rgba(164,38,37,1) 0%, rgba(130,3,3,1) 100%);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: red;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
}

footer div {
	padding: 2em;
	flex: 1 1 auto;
	justify-content: space-evenly;
}

footer ul {
	font-weight: normal;
	text-transform: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer a {
	color: inherit;
	text-decoration: none;
	line-height: 1.8;
	margin-left: .4em;
}


/* SEITENSPEZIFISCH */

/* Startseite -> Nav-Blocks  */

#nav-block {
	text-align: center;
}

#nav-block a img {
	display: inline-block;
	margin: 2px;
	width: 45%;
	height: auto;
	background-color: #a42625;
	transition: transform 150ms ease;
}

#nav-block a img:hover {
	transform: scale(1.2);
	outline: 4px solid #fff;
}


/* Leistungen */

#leistungen {
	list-style: none;
	padding-left: .5em;
}

#leistungen li {
	background: linear-gradient(to right, rgba(241,196,196,.9) 0%,rgba(241,196,196,0) 100%);
	border-radius: 10px;
	padding: .5em .5em .5em 68px;
	margin: 1em 0;
	backdrop-filter: blur(3px);
	mix-blend-mode: multiply;
}

#leistungen img {
	position: absolute;
	top: 50%;
	margin-top: -25px;
	left: 8px;
	height: 48px;
}


/* Webdesign -> Referenzen */

figure {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
}

figure > a {
	align-self: flex-start;
	width: 350px;
	max-width: 75%;
	border: 0;
}

figure > a > img {
	width: 100%;
}

figcaption {
	align-self: flex-end;
	background-color: rgba(255,255,255,.9);
	border: 1px dotted #a42625;
	margin-top: -20px;
	width: 418px;
	max-width: 80%;
	padding: 0 .5em;
	line-height: 1.2;
}

figcaption img {
	height: 2em;
	margin: 0 2px;
}


/* Fotografie -> Bildergalerie */

.galerie {
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 0;
}

.galerie img {
	margin: 1px;
	max-width: 100%;
}

/* PC-Support -> Code-Format */

code {
	display: block;
	border: 1px solid;
	padding: .5em;
	background-color: rgba(0,0,0,.8);
	color: #ccc;
	overflow-y: auto;
	white-space: nowrap;
	user-select: all;
}


/* Kontakt -> Kontaktformular */

form {
	width: 600px;
	max-width: 80%;
}

label {
	display: block;
}

input, textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: .5em;
	background-color: rgba(255,255,255,.8);
	border: 1px dotted #a42625;
	transition: all 400ms ease;
	margin-bottom: 1em;
}

input:focus, textarea:focus {
	transform: scale(1.2);
}


/* FADEIN-ANIMATION */

.fadein {
	opacity: 1; 
}

.js .fadein {			
	opacity: 0;
	transform: translateY(30px);	
}

.js .fadein.visible {
	opacity: 1;
	transform: translateY(0px);
	animation: fadein 1s 1;
}

@keyframes fadein {
	0% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0px); }
}


/* RESPONSIVE */

@media (min-width: 800px) {

	#navicon {
		font-size: 104px;
	}

	#webdesign { background-image: url('webdesign/header-webdesign@2x.webp'); }
	#printdesign { background-image: url('printdesign-corporatedesign/header-printdesign@2x.webp'); }
	#fotografie { background-image: url('fotografie/header-fotografie@2x.webp'); }
	#pc-support { background-image: url('pc-support/hdd@2x.webp'); }

	h1 {
		font-size: 40px;
	}

	figure {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	figure > a {
		align-self: center;
	}

	figure:nth-of-type(odd) {
		flex-direction: row-reverse;
	}

	figcaption {
		align-self: center;
		margin-top: 0;
		margin-left: -20px;
		z-index: 11;
	}

	figcaption p:last-of-type {
		margin-bottom: 2px;
	}

	figure:nth-of-type(odd) figcaption {
		margin-left: 0;
		margin-right: -20px;
	}
}