/* Stylesheet für Ruben Norgall */

html {
	--scrollbarBG: #0000008c;
    --thumbBG: #551a8b;
	overflow-x:hidden;
}
body::-webkit-scrollbar {
  width: 11px;
}
body {
  /*display: grid;
  align-content: space-between;*/
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

body{
	color: white;
	background-image: url(/media/ruben-norgall-background.png);
	/* background-size: cover; */
	background-blend-mode: multiply;
	background-color: #322d5b;
}
header{
margin: 50px 5%;
}

nav{
background-color: black;
padding: 15px 25px;
margin: 10px 0 10px;
background-image: linear-gradient(45deg, #6e444440, transparent, #80008052, #0080003b, transparent);
border-radius: 10px;
}

/* allgemein */

.center{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* slider */

.slider, .slider2 {
    position: relative;
    border-radius: 15px;
    box-shadow: 2px 2px 10px #bfbcbc99;
}

.slider img, .slider2 img{
	transition-duration: 1000ms;
	border-radius: 15px;
}

.slider .notjet, .slider2 .notjet{
	position: absolute;
	left: 0;
}

li {
    margin: 2px 15px;
}

p{
	font-family: math;
}

@media only screen and (min-width: 650px) {
	.flx, .flex{
		display:flex;
		flex-wrap: wrap;
	}
	.peight{
	width:80%;
	}

	.ptwent{
		width:20%;	
	}
	.ftl{
	float:left;
	}

	.ftr{
		float:right;
	}
}

@media only screen and (max-width: 650px) {
	.desktop{
		display: none;
	}
}

@media only screen and (min-width: 650px) {
	.mobile{
		display: none;
	}
}

.colorgreen{
	background:green;
}

.colorred{
	background:red;
}

.coloryellow{
	background:yellow;
}

.inactive{
	opacity: 0.5;
}

.hide{
	display: none;
}

.debug{
	display:none;
}

.full{
	width:100%;
}

.menu a{
	font-weight: 700;
	background: white;
	margin: 0 10px;
	padding: 5px 25px;
	border: solid 1px;
	border-radius: 15px;
	cursor: pointer;
	box-shadow: 4px 4px 4px 0px #989898;
	transition-duration: 1s;
    background-image: linear-gradient(45deg, #6e444440, transparent, #80008052, #0080003b, transparent);
	text-decoration: none;
}

.menu a:hover{
	color: white;
	background: black;
	box-shadow: 1px 1px 1px 0px #989898;
	text-shadow: 0 0 10px #e300ff;
}

.content a, footer a{
	color: white;
}

main {
    background-color: #000000fa;
    box-shadow: #191919 1px 1px 4px 2px;
    background-image: linear-gradient(90deg, #ef00ff0a, transparent, #8000801f, #00800033, transparent);
    border-radius: 10px;
    min-height: 75vh;
}

@media (min-width: 768px) {
    main {
		margin: 0 5%;
		padding: 25px;
    }
}

.foto{
	width: 150px;
}


.blattmitte{
	transition-duration: 5s;
	transform: rotateX(45deg) rotateZ(0deg);
    	background: gray;
    	padding: 10px 6px 10px;
    	border-radius: 25px;
    	color: black;
	width: 250px;
}

.blattmitte:hover{
	transform: rotateX(0deg);
	background: white;
}

.blattrechts{
	transition-duration: 5s;
	transform: rotateX(45deg) rotateZ(15deg);
	background: gray;
	padding: 10px 6px 0;
	border-radius: 25px;
	opacity: 0.5;
}

.blattrechts:hover{
	transform: rotateX(0deg);
	background: white;
	opacity: 1;
}

main table{
width: 100%;
}

.column1,.column2,.column3{
width: 25%;
}

.meer{
	display:none;
	opacity:1;
	position: fixed;
	bottom: -50%;
	width: 100%;
	left: 0px;
	transition-duration: 500ms;
	pointer-events: none;
	animation-name: water;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

.meer.gone {
    opacity: 0;
    animation: none;
}

.meer img{
    width: 100%;
}

@keyframes water{
  0%{transform: rotateX(65deg);opacity: 0.4;}
  50%{transform: rotateX(45deg);opacity: 0.2;}
  100%{transform: rotateX(65deg);opacity: 0.4;}
}

footer {
    background-color: black;
    width: 100%;
    border-top: solid 2px #551a8b;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: linear-gradient(180deg, #ba00f752 1%, transparent 10%);
	position: inherit;
	bottom: 0;
	margin-top:15px;
}

p{
transition-duration: 1s;
}

h3:hover, p:hover{
/*
color:grey;
transition-duration: 2s;
*/
}


.footerlink{
	min-width: 100px;
	max-width: 200px;
	margin: 0 auto;
}

input{
	background: grey;
	border-radius: 5px 5px 5px 5px;
	padding: 3px;
	margin: 5px 0;
	width: 100%;
	max-width: 250px;
}

input:hover{
background:white;	
box-shadow: 0px 0px 4px 4px #01505e;
background-image: linear-gradient(45deg,#0000004a, transparent, #0000004a);
}

input:focus {
  background-color: #eaeaea;
  box-shadow: 0px 0px 4px 4px #01505e;
  background-image: linear-gradient(45deg,#0000004a, transparent, #0000004a);
}

.knopf{
    padding: 5px 20px;
    background: #202020;
    color: white;
    border: solid 2px;
    border-radius: 15px;
	cursor: pointer;
}

.knopf:hover{
    padding: 5px 20px;
    background: white;
    color:  #202020;
    border: solid 2px black;
    border-radius: 10px;
	box-shadow: 0px 0px 4px 4px #01505e;
}

#scrollen{
	margin: 20px;
}

#tastenfeld{
display:grid;
grid-template-columns: repeat(4, 1fr);;
grid-gap: 1rem;
width: 250px;	
}

#display {
	min-height: 40px;
    width: 190px;
    font-size: 2em;
    text-align: right;
    background-color: gray;
    margin: 25px 5px;
    padding: 5px 25px;
    border-radius: 25px;
    border: solid white 2px;
}

#display button{
	background: #939393;
    border-radius: 7px;
	width: 50px;
	height: 50px;
}

#uhr {
    border: solid #6d6d6d 2px;
    border-radius: 50%;
    box-shadow: 0px 0px 8px 1px #6b7bec;
	margin: 0 auto;
    display: flex;
}

.kundenstimme{
	padding: 5px 25px;
    background-image: url(/media/ruben-norgall-background.png);
    border-radius: 25px;
    border: solid 2px grey;
    box-shadow: 1px 1px 10px 0px #0006ff;
}

.empty-space{
	height:150px;
}

article{
	padding: 5px 20px;
}

article h3{
margin-bottom:0;	
}

.beitragsinfo{
	margin-top:0;
}

.langtext{
	display: none;
}

.langtextcss{
	overflow:hidden;
	transition: 1s;
	max-height: 0px;
}

.sichtbar{
	max-height:200px!important;
}

.is-sticky{
position:fixed;
top:0px;
animation:menu;
animation-duration: 1s;
}

@keyframes menu{
from {top:-50px;}
 to {top:0px;}
}

.banner{
	background: white;
    color: black;
    position: fixed;
    left: 25%;
    top: 25%;
	
	min-height:450px;
	min-width:450px;

	text-align:center;
}

.bild{
	height: 200px;
	width: 200px;
    background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	cursor: pointer;
}

#bigimage{
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
}

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000f5;
	display: none;
}

#closeOverlayButton{
	float:right;
	color:white;
	cursor:pointer;
	margin:12px;
}

#closeOverlayButton:hover{
	color:#ff6000;
}

@media only screen and (max-width: 700px) {
	.menu a {
		display: flex;
		margin: 10px 10px;
		justify-content: center;
	}
	
}

.emptyspace{
	height:500px;
}

#hamsterbody {
	text-align: center;
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
    background: #323232;
    border-radius: 15px;
    margin-bottom: 15px;
}

#hamsterbody button {
    min-width: 105px;
    padding: 5px;
    border-radius: 10px;
    margin: 5px;
	transition-duration: 250ms;
}

/*Cookie Banner*/

#cookie-banner {
    position: fixed;
    bottom: 5vh;
    left: 0;
    right: 0;
    border: solid 2px black;
    width: 90%;
    text-align: center;
    padding: 7px;
    z-index: 600;
    background-image: linear-gradient(90deg, #000000, transparent, #000000), linear-gradient(180deg,#00000040, #e241ff40, transparent, #00000040);
	border: solid 1px white;
	margin: 0 auto;
	backdrop-filter: blur(5px);
}

#cookie-banner p {
    margin: 5px 0px;
    font-size: 20px;
    text-shadow: 0 0 5px #fd00c2;
}

#cookie-banner button {
    padding: 5px 15px;
    border-radius: 10px;
    background: white;
    transition-duration: 500ms;
    background-image: linear-gradient(45deg, grey, transparent, grey);
}

#cookie-banner button:hover{
	background: grey;
	color: white;
}

.hamsterhover .stopruntext:after {
    content: " läuft...";
	margin-left: 5px;
}

.hamsterhover:hover .stopruntext:after {
    content: " steht...";
	margin-left: 5px;
}

.hamsterhover{
    margin: 40px auto;
    max-width: 170px;
}

/*Comming Soon*/

.commingsoon {
  position: relative;
}

.commingsoon:hover::before {
  content: "Coming Soon...";
  width: 145px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: #5e3260;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-duration: 500ms;
}

.commingsoon:hover::after {
  content: "";
  border-radius: 5px;
  border: 2px solid #000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.commingsoon:hover::before, .commingsoon:hover::after {
    opacity: 1;
}

#catfacts {
    margin: 20px auto 25px;
    max-width: 610px;
    text-align: center;
}

#catfacts button{
    padding: 5px 15px;
    margin: 5px;
    border: solid 1px white;
    background: linear-gradient(45deg, #266d74, #0400ff, #747474);
    color: white;
    font-size: 15px;
    border-radius: 15px;
	transition-duration: 500ms;
}

#catfacts button:hover{
	border-radius: 5px;
	background: linear-gradient(90deg, #266d74, #0400ff, #747474);
	cursor: pointer;
}

#catfacts #catresult {
    min-height: 60px;
	transition-duration: 0ms;
	text-shadow: -15px -15px #ffffff00, -15px 15px #ffffff00, 15px -15px #ffffff00, 15px 15px #ffffff00;
	color:white;
}

#catfacts #catresult.shine {
	text-shadow: 0px 0px #ffffff, 0px 0px #ffffff, 0px 0px #ffffff, 0px 0px #ffffff;
	color:black;
	transition-duration: 800ms;
}

@keyframes shine {
  from {text-shadow: -15px -15px #ffffff00, -15px 15px #ffffff00, 15px -15px #ffffff00, 15px 15px #ffffff00;}
  to {text-shadow: 0px 0px #ffffff, 0px 0px #ffffff, 0px 0px #ffffff, 0px 0px #ffffff;}
}

#offer {
    background: grey;
    padding: 5px;
    border-radius: 5px;
}

#offer .tool{
    border: solid 1px black;
    padding: 5px 10px;
    border-radius: 10px;
	cursor: pointer;
	transition-duration: 500ms;
	margin: 5px 0px;
	background-image: linear-gradient(45deg, transparent, #00000069, transparent);
}

#offer .tool:hover{
    border: solid 1px white;
}

#offer .tool.active{
    border: solid 1px black;
    padding: 5px 10px;
    border-radius: 0px;
	background: darkgrey;
	background-image: linear-gradient(45deg, #00000069, transparent, #00000069);
}

div#output {
padding: 5px 10px;
    border: solid white 1px;
    border-radius: 15px;
    margin: 10px;
    min-height: 500px;
    background-image: radial-gradient(#74747475, black);
}

#login form label {
    width: 100%;
    display: block;
}

#login input#stay-in {
    width: 15px;
}

#toolbox {
    min-height: 900px;
    background-image: url(/media/bikercat.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 360px;
}

.imageoverlay{
	position: relative;
	outline: 1px dashed white;
    outline-offset: -1rem;
	linear-gradient(
	62deg,
	#fbab7e 0%,
	#fdcf5a 100%
	);
	width: max(14rem, 40vw);
	aspect-ratio: 3 / 1;
}

.profileimage{
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

#ueber-mich .imageoverlay{
	    width: max(12rem, 15vw);
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.imageoverlay:after {
  position: absolute;
  content: '';
  inset: 0;
  background: linear-gradient(
    to right,
    #90c3fd,
    #ba71ff,
    #ff71b8
  );
  background-size: 200% 200%;
  mix-blend-mode: overlay;
  animation: stop;
  animation: gradientMove 6s ease infinite;
}

.imageoverlay:after:hover{
	animation:start;
}

.imageoverlay a{
	position: absolute;
	z-index: 1;
	inset: auto 1rem 1rem auto;
	display: flex:
	justify-content: center;
	align-items: center;
	padding: 0.75rem 1rem;
	font-size: 0.93rem;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	color: black;
	background-color: white;
	transition: background-color 0.3s ease-in-out;
	backdrop-filter: blur(5px);
	border: solid 1px white;
}

.imageoverlay a:hover{
	background-color: #000000a3;
	color: white;
}

.m1{
	margin: 1em auto;
}

section {
    resize: vertical;
    overflow: hidden;
    flex-wrap: nowrap;
    overflow-y: overlay;
    backdrop-filter: blur(5px);
    background-attachment: fixed;
    background-size: 200%;
    background-position: top left;
    animation: move-gradient 30s infinite linear;
}

/* Animation: Bewegung des Gradients */
@keyframes move-gradient {
    0% {
        background-position: top left;
    }
    50% {
        background-position: top right;
    }
	100% {
        background-position: top left;
    }
}

section:hover, section:focus {
    background-image: radial-gradient(#083e08, transparent, transparent);
    //backdrop-filter: blur(5px);
    background-attachment: fixed;
}

/*SCROLLBAR*/
/* Für moderne Browser */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
/*
::-webkit-scrollbar-track {
  background: linear-gradient(45deg, #1a1a2e, #0f3460);
  border-radius: 10px;
}
*/
::-webkit-scrollbar-thumb {
  border: 2px solid #1a1a2e;
}

/* Für Firefox */
scrollbar-width: thin;
scrollbar-color: #ff0080 #1a1a2e;