@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,200;0,400;0,700;1,400;1,700&family=Roboto:wght@100;300;500;700;900&display=swap');

* { font-family: 'Roboto', 'Open Sans'; box-sizing: border-box; }

body { background-color: #f5f5f5; margin: 0; font-weight: 300; }

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.conitem {
    background-color: #fff;
    color: #000;
    margin: 10px;
    padding: 20px;
    flex: 1 1 calc(33.333% - 20px); /* 3 Spalten auf Desktop */
    box-sizing: border-box;
}

.wsimage { 
	width: 100%; 
	height: 200px; 
	overflow: hidden; 
	background-size: cover; 
	background-position: center center;
	background-color: #f5f5f5;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .conitem {
        flex: 1 1 100%; /* 1 Spalte auf Mobil */
    }
}

#loginregister 
	{
	max-width: 500px; width: 80%; margin: 0 auto; margin-top: 100px;
	background-color: #fff;
	box-shadow: 0 0 10px #ccc;
	padding: 30px;
	border-radius: 10px;
	}

.compbtn li { display: inline-block; margin: 0; padding: 0; background-color: #5b5942; color: #fff; border-radius: 20px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; margin-bottom: 10px; margin-right: 10px; }
.compbtn li span { display: inline-block; margin-left: 5px; padding-right: 10px; font-weight: bold; }
.compbtn { padding: 0; margin: 0; list-style-type: none; }

h1,h2 { margin-top: 0; }

input[type="text"],input[type="submit"],input[type="password"],select,input[type="date"],input[type="datetime-local"],input[type="time"] { text-align: center; width: 100%; padding: 10px; font-size: 18px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 0; outline: 2px solid #eeeeee; margin-bottom: 10px; font-color: #333; }
input[type="text"]:focus,input[type="password"]:focus  { outline: 2px solid #5b5942; font-color: #000; }

textarea { width: 100%; padding: 10px; font-size: 18px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 0; outline: 2px solid #eeeeee; margin-bottom: 10px; }

input[type="submit"] { background-color: #fff; color: #5b5942; font-weight: bold; cursor: pointer; outline: 1px solid #5b5942; margin-top: 20px;}
input[type="submit"]:hover { background-color: #5b5942; color: #fff; outline: 2px solid #fff; box-shadow: 0 0 10px #ccc; }
input[type="checkbox"] { float: left; margin-right: 10x; }
label { float: left; font-size: 12px; width: 70%; }

.fragebogen label { font-size: 1em; cursor: pointer; width: 100%; }
.fragebogen label:before { width: 14px; height: 14px; outline: 2px solid #5b5942; content: ''; margin-right: 8px; position: relative; top: 1px; display: inline-block; border-radius: 100%; }

.fragebogen-open label { display: inline-block; width: initial; margin-right: 10px; }
.fragebogen-open h4 { margin-bottom: 0; }

.fragebogen input[type="checkbox"] { display: none; }
.fragebogen input[type="checkbox"]:checked + label { font-weight: bold; color: #5b5942; }
.fragebogen input[type="checkbox"]:checked + label::before { background-color: #5b5942; }

.fragebogen input[type="radio"] { display: none; }
.fragebogen input[type="radio"]:checked + label { font-weight: bold; color: #5b5942; }
.fragebogen input[type="radio"]:checked + label::before { background-color: #5b5942; }

#fragebogen-hilfe { width: 100%; }
#fragebogen-hilfe td { border-bottom: 1px solid #000; padding: 5px; }
#fragebogen-hilfe input[type="radio"] { display: initial; font: inherit; color: #5b5942; border: 0.15em solid #5b5942; border-radius: 100%; }

#fragebogen-hilfe input[type="radio"]:checked { display: initial; font: inherit; color: #5b5942; border: 0.15em solid #5b5942; border-radius: 100%;  box-shadow: 0 0 0 3px #5b5942; }

a { color: #5b5942; text-decoration: underline; }
a:hover { color: #5b5942; font-weight: bold; }

#nav { font-weight: 100; color: #000; padding: 1%; text-align: right; }
#nav b { display: inline-block; float: left; }
#nav a { color: #000; text-decoration: 0; display: inline-box; padding-bottom: 3px; margin-right: 15px; }
#nav a:hover { color: #000; font-weight: bold; border-bottom: 1px solid #000; }

.high { display: inline-block; background-color: #5b5942; color: #fff; padding: 2px 4px; position: relative; top: -1px; left: -2px; font-weight: 600; }

.col { width: 98%; background-color: #fff; box-shadow: 0 0 10px #ccc; padding: 10px; border-radius: 10px; margin: 1%; float: left; }

.userbox { width: 98%; min-height: 200px; background-color: #fff; box-shadow: 0 0 10px #ccc; padding: 10px; border-radius: 10px; margin: 1%; margin-bottom: 20px; }
.disabled { filter: grayscale(1); display: none !important; }
.disabledd { filter: grayscale(1); }
.userbox video { height: 350px;  object-fit: contain; width: 100%; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.userbox img { height: 350px; object-fit: cover; width: 100%; background-color: #e5e5e5; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.userbox h4 { margin-bottom: 10px; }

@media screen and (min-width: 768px) 
	{
	.userbox { width: 300px; background-color: #fff; box-shadow: 0 0 10px #ccc; padding: 10px; border-radius: 10px; margin: 1%; display: inline-block; margin-bottom: 20px; }
	.disabled { filter: grayscale(1); display: none !important; }

	.fragebogen label { font-size: 1em; cursor: pointer; }

	.col-1 { width: 8%;  } 
	.col-2 { width: 18%; }
	.col-3 { width: 28%; }
	.col-4 { width: 38%; }
	.col-5 { width: 48%; }
	.col-6 { width: 58%; }
	.col-7 { width: 68%; }
	.col-8 { width: 78%; }
	.col-9 { width: 88%; }
	.col-10 { width: 98%; margin: 1%; }
	}

#footer { color: #333; text-align: center; text-shadow: 1px 0 0px #d5d5d5; font-size: 10px; margin-top: 20px; width: 100%;  height: 30px; }

.likerow { text-align: right; margin-top: 20px; }
.likerow .active { color: #5b5942; }
.likerow .off { color: #333; }

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    font-size: 1em;
    font-weight: 700;
	padding: 10px;
    color: white;
    background-color: #5b5942;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #5b5942;
}

.answer { font-size: 2em; }
h3 { margin-bottom: 0; }

.active-profile, .active-profile a { background-color: #5b5942; color: #fff; }
.match { background-color: #5b5942; color: #fff; }

[class^=firework-] {
  position: absolute;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
}

.firework-1 {
  -webkit-animation: firework-md 1.2s both infinite;
          animation: firework-md 1.2s both infinite;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  top: 30%;
  left: 60%;
}

.firework-2 {
  -webkit-animation: firework-lg 1.2s both infinite;
          animation: firework-lg 1.2s both infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  top: 45%;
  left: 70%;
}

.firework-3 {
  -webkit-animation: firework-md 1.2s both infinite;
          animation: firework-md 1.2s both infinite;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  top: 80%;
  left: 15%;
}

.firework-4 {
  -webkit-animation: firework-sm 1.2s both infinite;
          animation: firework-sm 1.2s both infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  top: 30%;
  left: 35%;
}

.firework-5 {
  -webkit-animation: firework-sm 1.2s both infinite;
          animation: firework-sm 1.2s both infinite;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  top: 35%;
  left: 65%;
}

.firework-6 {
  -webkit-animation: firework-sm 1.2s both infinite;
          animation: firework-sm 1.2s both infinite;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
  top: 40%;
  left: 50%;
}

.firework-7 {
  -webkit-animation: firework-sm 1.2s both infinite;
          animation: firework-sm 1.2s both infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  top: 50%;
  left: 40%;
}

.firework-8 {
  -webkit-animation: firework-md 1.2s both infinite;
          animation: firework-md 1.2s both infinite;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  top: 70%;
  left: 85%;
}

.firework-9 {
  -webkit-animation: firework-sm 1.2s both infinite;
          animation: firework-sm 1.2s both infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  top: 55%;
  left: 75%;
}

.firework-10 {
  -webkit-animation: firework-lg 1.2s both infinite;
          animation: firework-lg 1.2s both infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  top: 45%;
  left: 40%;
}

.firework-11 {
  -webkit-animation: firework-lg 1.2s both infinite;
          animation: firework-lg 1.2s both infinite;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  top: 65%;
  left: 60%;
}

.firework-12 {
  -webkit-animation: firework-sm 1.2s both infinite;
          animation: firework-sm 1.2s both infinite;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  top: 35%;
  left: 35%;
}

.firework-13 {
  -webkit-animation: firework-lg 1.2s both infinite;
          animation: firework-lg 1.2s both infinite;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  top: 65%;
  left: 35%;
}

.firework-14 {
  -webkit-animation: firework-lg 1.2s both infinite;
          animation: firework-lg 1.2s both infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  top: 75%;
  left: 90%;
}

.firework-15 {
  -webkit-animation: firework-lg 1.2s both infinite;
          animation: firework-lg 1.2s both infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  top: 20%;
  left: 30%;
}

@-webkit-keyframes firework-sm {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.5rem 0rem 0 #5b5942, 0.5rem 0rem 0 #5b5942, 0rem -0.5rem 0 #5b5942, 0rem 0.5rem 0 #5b5942, 0.35rem -0.35rem 0 #5b5942, 0.35rem 0.35rem 0 #5b5942, -0.35rem -0.35rem 0 #5b5942, -0.35rem 0.35rem 0 #5b5942;
  }
}

@keyframes firework-sm {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.5rem 0rem 0 #5b5942, 0.5rem 0rem 0 #5b5942, 0rem -0.5rem 0 #5b5942, 0rem 0.5rem 0 #5b5942, 0.35rem -0.35rem 0 #5b5942, 0.35rem 0.35rem 0 #5b5942, -0.35rem -0.35rem 0 #5b5942, -0.35rem 0.35rem 0 #5b5942;
  }
}
@-webkit-keyframes firework-md {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.7rem 0rem 0 #5b5942, 0.7rem 0rem 0 #5b5942, 0rem -0.7rem 0 #5b5942, 0rem 0.7rem 0 #5b5942, 0.49rem -0.49rem 0 #5b5942, 0.49rem 0.49rem 0 #5b5942, -0.49rem -0.49rem 0 #5b5942, -0.49rem 0.49rem 0 #5b5942;
  }
}
@keyframes firework-md {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.7rem 0rem 0 #5b5942, 0.7rem 0rem 0 #5b5942, 0rem -0.7rem 0 #5b5942, 0rem 0.7rem 0 #5b5942, 0.49rem -0.49rem 0 #5b5942, 0.49rem 0.49rem 0 #5b5942, -0.49rem -0.49rem 0 #5b5942, -0.49rem 0.49rem 0 #5b5942;
  }
}
@-webkit-keyframes firework-lg {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.9rem 0rem 0 #5b5942, 0.9rem 0rem 0 #5b5942, 0rem -0.9rem 0 #5b5942, 0rem 0.9rem 0 #5b5942, 0.63rem -0.63rem 0 #5b5942, 0.63rem 0.63rem 0 #5b5942, -0.63rem -0.63rem 0 #5b5942, -0.63rem 0.63rem 0 #5b5942;
  }
}
@keyframes firework-lg {
  0%, 100% {
    opacity: 0;
  }
  10%, 70% {
    opacity: 1;
  }
  100% {
    box-shadow: -0.9rem 0rem 0 #5b5942, 0.9rem 0rem 0 #5b5942, 0rem -0.9rem 0 #5b5942, 0rem 0.9rem 0 #5b5942, 0.63rem -0.63rem 0 #5b5942, 0.63rem 0.63rem 0 #5b5942, -0.63rem -0.63rem 0 #5b5942, -0.63rem 0.63rem 0 #5b5942;
  }
}

.activee { font-weight: bold; text-decoration: underline; }

div.inputTags-list input.inputTags-field { outline: 0 !important; }
.hiddden { display: none; }


.tool_ico { outline: 1px solid #333; border-radius: 3px; box-sizing: border-box; width: 33%; margin-right: 1%; margin-bottom: 10px; }
			.tool_ico.small { width: 100px; }
			.tool_ico.active { outline: 3px solid #390; border-radius: 3px; box-sizing: border-box; width: 33%; margin-right: 1%; margin-bottom: 10px; }
			.tool_ico.disable { display: none; }
			.profilfoto { position: absolute; bottom: 20px; right: 20px; text-align: right; border-radius: 6px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
			.paddinger { padding: 20px; }
			hr { border: 0; border-top: 1px solid #ccc; }

			.teilnehmerbtn { overflow: hidden; display: inline-block; padding-left: 0px; padding-right: 10px; margin-right: 5px; margin-left: 5px; background-color: #eee; border-radius: 40px; position: relative; width: 230px; height: 40px; }
			.teilnehmerbtn span { display: inline-block; position: absolute; width: 230px; font-size: 1.05em; margin-left: 10px; margin-top: 10px; }

			.btn { float: right; cursor: pointer; font-size: 0.5em; padding: 10px 25px 10px 25px; display: inline-block; border-radius: 3px; outline: 1px solid #333; text-decoration: none; background-color: #390; color: #fff; }
			.btn:hover { padding: 10px 25px 10px 25px; display: inline-block; border-radius: 3px; outline: 1px solid #333; text-decoration: none; background-color: #390; font-weight: bold; color: #fff; }
			
			h3 { margin-top: 0; padding-top: 0; }
			
			.active { background-color: #a0ef59; outline: 2px solid #79ff00; }
			.inactive { background-color: #f5f5f5;  }
			.fix { background-color: #fff !important; border: 1px solid #f5f5f5; cursor: not-allowed; }
			.col { box-shadow: none; border: 1px solid #ccc; }
			h5 { font-size: 1em; margin: 0; padding: 0; float: left; }
			.item { outline: 2px solid #eee; padding: 10px; margin: 10px; border-radius: 18px; }
			.item .edit { float: right; }
			.item .edit::before {  }
			.item .time { float: left; margin-left: 10px; }
			a svg { height: 16px; margin-left: 5px; }
			h5 img { float: left; margin-right: 5px; height: 16px; }

.zeitplan-slider { background-color: #fff; width: 100%; margin: 0 auto; padding: 0px; box-sizing: border-box; margin-top: 0px; margin-bottom: 30px; }
.ws_content { height: 400px; overflow: scroll; }

@media screen and (min-width: 768px) 
	{
	.zeitplan-slider { max-width: 340px; float: right; position: sticky; top: 20px; }
	.ws_content { height: auto; overflow: auto; }
	}