@charset "UTF-8";
/* CSS Document */

/*variables*/
/*
:root {
  --c1: rgba(255,190,152,1);
  --c2: rgba(248,124,86,1);
  --c3: #DCCCF3;
  --c4: #B999E7;
  --c5: #9766DC;
  --c6: #7433D0;
  --c7: rgba(81,0,196,1);
	--c8: rgba(81,0,196,0.5);
	--c9: rgba(255,190,152,0.2);
	--c10: rgba(255,190,152,0.5);
} old*/
:root {
  --c1: rgba(255,190,152,1);
  --c2: rgba(248,124,86,1);
  --c3: #F1EBFA;
  --c4: #18131F; 
  --c5: #BFB8CA;
  --c6: #7433D0;
  --c7: rgba(81,0,196,1);
	--c8: rgba(81,0,196,0.5);
	--c9: rgba(255,190,152,0.2);
	--c10: rgba(255,190,152,0.5);
}
html::before {
	content: " ";
  /*display: block;*/
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -10;
}
html{
	scroll-behavior: smooth;
	font-family: "Helvetica Neue", Gotham, Helvetica, Arial, sans-serif;
	font-size: 16px;
}
body {
	scroll-behavior: smooth;
	background-color: var(--c7);
	margin: 0;
}
section {
	padding: 10%;
	min-height: 100vh;
  	top:0px;
  	right:0px;
  	bottom:0px;
  	left:0px;
}
#video-bg {
	position: fixed; /* Changed from fixed to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /*originally it was auto*/
    min-width: 100%; /* Ensure the video covers the entire width */
    min-height: 100%; /* Ensure the video covers the entire height */
    object-fit: cover; /* Scale the video to cover the entire container while maintaining aspect ratio */
    top: 50%;
    left: 50%;
    z-index: -100; /* Ensure the video is behind other content */
    transform: translateX(-50%) translateY(-50%); /* Center the video */
}
#bg_overlay {
	background-image:url("../bg_video+overlay/bg_/bg_1_3.png");
	background-repeat: repeat;
	background-color: rgba(5,169,131,0);
	height: 100%;
	width: 100%;
	color: blue;
	animation: slideBackground 100s linear infinite;
	opacity: 0.3;
}
@keyframes slideBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -459px; /* ganze bildbreite und ca 100px pro 10s sieht gut flüssig aus*/
    }
}
.oben {
	border: none;
	padding: 0;
  	height: 100vh;
  	top:0px;
  	right:0px;
  	bottom:0px;
  	left:0px;
	text-align: center;
}
.oben a {
	cursor: pointer;
}
#welcome {
	background: url("../../logo_2024.png")center center no-repeat;
	height: 100vh;
	width: 100%;
	opacity: 1;
}
#welcome a {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 3px;
	line-height: 120px;
	color: var(--c3);
	text-transform: UPPERCASE;
	text-decoration: none;
	transition-duration: 0.3s;
}
#welcome a:hover, #welcome a:active, #welcome a:focus {
	letter-spacing: 5px;
}

.clear{clear: both;}
.up {
	float: left;
	padding: 0;
	margin: 0;
}
.up a {
	padding: 0;
	margin: 0;
}
.navigation {
	float: left;
	width: 100%;
	/*border-top: 3px solid var(--c4);*/
    color: var(--c4);
	font-weight: 600;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    transition: all 1.3s;
	padding: 20px 0;
}

.navigation a {
    text-decoration: none;
    margin: 0 15px;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

h3 {
}
.gallerie {
}

.gallerie img {
	width: 100%;
}

ul.angebotliste {
	list-style-type:disc;
	list-style-position: inside;
	padding: 0;
}
ul.angebotliste li{padding-top: 10px;}
#meet{
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: var(--c7);
}
#digitalsketchbooks {
	background-color: var(--c1);
	color: var(--c7);
	
	padding: 80px 20px 20px 20px;
}
#meet h3 {
	background-color: var(--c1);
	color: var(--c7);
	text-transform: uppercase;
	transition-duration: 0.8s;
	font-size: 30px;
	font-weight: 100;
	line-height: 30px;
	text-align: center;
	margin: 0;
	padding: 0;
}
#meet p {
	padding: 0;
	font-size: 12px;
	font-weight: 300;
	line-height: 4px;
}
#meet ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#meet ul li {
	border-top: solid 1px var(--c1);
}

#meet ul li a {
	font-size: 16px;
	font-weight: 300;
	text-decoration: none;
	color: var(--c1);
	text-transform: uppercase;
	transition-duration: 0.8s;
	display: inline-block;
	width: 100%;
	padding: 20px 0;
	margin: 0;
}
#meet ul li a:hover, #meet ul li a:active, #meet ul li a:focus {
	letter-spacing: 1px;
	background-color: var(--c1);
	color: var(--c7);
}



footer {
	border-top: solid 1px var(--c1);
	padding: 10%;
	color: var(--c1);
    background-color: var(--c7); /* Confirming background color */
}
footer a {
	color: var(--c1);
}
footer a:hover {
	color: var(--c2);
}
footer a:visited {
	color: var(--c1);
}

footer div ul {
	list-style-type: none;
}
#contact {
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	padding-top: 10%;
	float: left;
	width: 60%;
	text-decoration: none !important;
}
#contactlogo {
	padding-top: 25px;
	float: right;
	width: 30%;
}

#about_me {
	padding-top: 200px;
	background: var(--c3);
	color: var(--c4);
	font-weight: 600;
}
#about_me ul {
	margin: 0;
	padding: 0;
	list-style-type: none;}

h2 {
	margin: 60px 0 12px;
	font-size: 18px;
	font-weight: 300;
	color: var(--c5);
}
b {
	font-weight: 500;
}
p {
	margin: 0;
}
.txt_left {
	float: left;
	width: 48%;
	max-width: 330px;
}
.txt_right {
	float: right;
	width: 50%;
	max-width: 260px;
}
#resume {
	background: var(--c3);
	line-height: 1.8em;
	letter-spacing: 0.01em;
}
.left {
	float: left;
	width: 60%;
	margin-top: 40px;
}
.right{
	float: right;
}
td.time{
	width: 20%;
	min-width: 100px;
	vertical-align: top;
}
td i {
	font-weight: 500;
	color: #5F33FF;/* /////////////// neue farbe für italics im LEBENSLAUF*/
}
.margins {
	margin-top: 180px;
	margin-bottom: 50px;
}
#webdetail {
	border-top: solid 1px var(--c6);
	margin: 100px 0 0 0;
	padding: 20px 0;
	color: var(--c6);
}
#webdetail p {
	padding: 20px;
}

/*  /////////////////////////////////  HAMBURGER   ///////////////////////////////////////  */

/* Mobile navigation styles for later */
.navigation {
	/*border-top: 3px solid var(--c4);*/
    background-color: var(--c3);
    color: var(--c4);
}
.hamburger {
    display: none;
    background-color: transparent !important;
    color: var(--c4);
    border: none;
    cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	/* the HAMBURGER is just a GLYPH (☰) */
}
.nav-links a {
    color: var(--c4);
	text-transform: UPPERCASE; 
    text-decoration: none;
    display: inline-block; /* Change to block for vertical layout on mobile */
}

/* Mobile navigation styles */
@media (max-width: 768px) {
    .hamburger {
		float: right;
        display: block;
		padding: 0 20px;
    }
    .nav-links {
        display: none;
        width: 100%;
    }
    .nav-links a {
        display: block;
        text-align: center;
		padding: 20px 0;
    }
    .navigation.sticky {
        position: fixed;
    }
	.txt_left {
	float: left;
	width: 100%;
	}
	.txt_right {
	float: left;
	width: 100%;
	}
}

/* When the nav is active */
.nav-active .nav-links {
    display: block;
}

/*  /////////////////////////////////  HAMBURGER_END    ///////////////////////////////////////  */
	
	.oben {
		background-size: 80%;
		padding: 0;
  }
	.left{
	float: left;
	width: 100%;
	margin-top: 40px;
}

	#profilbild img {
	padding: 70px 0 10% 20%;
	width: 80%;
	height: auto;
		max-width: 500px;
  }

#fotoboxex{padding: 20px 0;}
	.box{
		width: 48%;
		margin: 1%;
	}
	.box_mid{
	    width: 48%;
	    margin: 1%;
	}