body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(64, 64, 64);
}

h4 {
    margin-top: 0;
    margin-bottom: 0;
}

.Spalte h4 {
	font-family: 'Franklin Gothic Demi', sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

ul {
	list-style-type: none;
}

#result_temp h4 {
	font-family: 'Franklin Gothic Demi', sans-serif;
	font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

canvas {
    display: block;
}

.float-container {
	margin-top: 20px;
	display: flex;
	width: 90%;
    position: relative;
}

.float-content{
	flex: 1;
	padding: 0px;
	margin-left: 20px;
    font-family: 'Franklin Gothic Demi', sans-serif;
	font-size: 16px;
	text-align: justify;
	color: darkgray;
}

.float-content h1{
	color: white;
	text-align: left;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.float-content h2{
color: silver;
	text-align: left;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.float-content h3{
	color: lightgray;
	text-align: left;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin-left: 2%;
}

.float-content h4{
	color: lightgray;
	text-align: left;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin-left: 2%;
}

.float-content hr{
	position: relative;
	margin-left: 20%;
	margin-right: 20%;
}

.float-content a, a:visited{
	color: darkgray;
}

.text-container-texte {
	position: absolute;
    top: 5%;
    left: 5%;
    color: white;
	width: 90%;
    font-family: 'Franklin Gothic Demi', sans-serif;
    display: block;
}

.text-container-texte p {
    margin: 0;
}

.text-container-texte p:nth-child(1),
.text-container-texte p:nth-child(2) {
    font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-container-texte p:nth-child(3) {
    font-size: 20px;
    color: darkgray;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.server-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.server-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.server-header-top {
    text-align: center;
	font-weight: bold;
    /*margin-bottom: 3px;*/
	line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.server-name-top {
    font-family: 'Franklin Gothic Demi', sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.server-name-top-title {
    font-family: 'Franklin Gothic Demi', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
	margin-bottom: 10px;
}

.status-icon {
    width: 12px;
    height: 12px;
    margin-right: 10px;
}

.server-name {
    font-family: 'Franklin Gothic Demi', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.description {
    color: red;
    font-size: 12px;
    text-shadow: none; /* Kein Schatten bei Beschreibung */
}

.hdd-icons {
    display: flex;
    justify-content: center;
    gap: 4px; /* Abstand zwischen Icons */
    flex-wrap: wrap;
    margin-top: 4px;
}

.hdd-icon {
    width: 8px;
    height: 8px;
}

.text-container-server {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'Franklin Gothic Demi', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.text-container-server p {
    line-height: 1;
}

.text-container-server p img {
    display: inline-block;
    vertical-align: baseline; /* Wichtig: Versuch baseline, middle oder top */
}

.columns-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.Spalte {
    width: calc(100% / 3);
    max-width: 250px;
    min-width: 250px;
    margin: 20px 10px 20px;
    padding: 10px;
    text-align: center;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    box-sizing: border-box;
}

.remember-me-label {
  font-family: 'Franklin Gothic Demi', sans-serif;
  font-size: 12px;
  color: darkgray;
}

.text-container-server div:not(:last-child) {
    margin-right: 9px;
}

/*.text-container-server div:nth-child(1),
.text-container-server div:nth-child(2),
.text-container-server div:nth-child(3) {
    background: rgb(68, 68, 68);
    background: linear-gradient(0deg, rgba(68, 68, 68, 0.5) 0%, rgba(88, 88, 88, 0.5) 100%);
    text-align: center;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}*/

.text-container-server a:nth-child(1) i:nth-child(1) {
    margin-left: 5px;
    margin-bottom: 10px;
    font-size: 20px;
}

#image-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(68, 68, 68, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
}

#image-box img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

img[name="refImage"]:hover,
img[name="refImage"]:focus {
    opacity: 0.43;
}

/*img[title="Good"],
img[title="Bad"] {
    margin-top: 15px;
    margin-right: 15px;
}*/

/*.text-container-server img {
    vertical-align: middle;
    margin: 0; 
    padding: 0;
}*/

.text-container-server .SpaltenBild:nth-child(1),
.text-container-server .SpaltenBild:nth-child(2),
.text-container-server .SpaltenBild:nth-child(3) {
    margin: 20px auto;
	-webkit-filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
}

.text-container-server .SpaltenBild:hover,
.text-container-server .SpaltenBild:focus {
    opacity: 0.43;
}

.text-container-server p:first-child {
    align-items: flex-start;
}

/*.text-container-server p img {
    vertical-align: top; /* oder baseline/top*/
}*/

.text-container-main {
    position: absolute;
    top: 20%;
    left: 20%;
    color: white;
    font-family: 'Franklin Gothic Demi', sans-serif;
    display: none;
}

.text-container-main p {
    margin: 0;
}

.text-container-main p:nth-child(1),
.text-container-main p:nth-child(2) {
    font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-container-main p:nth-child(3) {
    font-size: 20px;
    color: darkgray;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#error-text {
    color: red;
    margin-top: 10px;
	margin-bottom:50px;
}

.right-sidebar {
    position: fixed;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-end;
    font-family: 'Franklin Gothic Demi', sans-serif;
    width: 50px;
	z-index:2;
}

.link-container-null {
	position: relative;
    width: 100%;
    height: 80%;
	left: -35px;
	margin: 50px auto;
	-webkit-filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
}

.link-container-top {
    position: relative;
    width: 100%;
    height: auto;
    transform: rotate(270deg);
    font-size: 16px;
	font-weight: bold;
    padding: 10px;
    white-space: nowrap;
    text-align: left;
    margin-bottom: 20px;
}

.link-container-middle {
    position: relative;
    width: 100%;
    height: auto;
    transform: rotate(270deg);
    font-size: 16px;
	font-weight: bold;
    padding: 10px;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 20px;
}

.link-container-bottom {
    position: relative;
    width: 100%;
    height: auto;
    transform: rotate(270deg);
    font-size: 16px;
	font-weight: bold;
    padding: 10px;
    white-space: nowrap;
    text-align: right;
    margin-bottom: 20px;
}

.link-container-top a,
.link-container-middle a,
.link-container-bottom a {
    color: silver;
	text-decoration: none;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.link-container-top a:visited,
.link-container-middle a:visited,
.link-container-bottom a:visited {
    color: silver;
	text-decoration: none;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.link-container-top a:hover,
.link-container-middle a:hover,
.link-container-bottom a:hover {
	opacity: 0.43;
}

form[name="login-form"] input[type="password"] {
    background-color: rgb(64, 64, 64);
    font-size: 16px;
    color: white;
    border: 1px solid darkgray;
    margin-top: 0px;
    width: 120px;
    height: auto;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .text-container-main {
        top: 15%;
        left: 15%;
    }

    .text-container-main p:nth-child(1),
    .text-container-main p:nth-child(2) {
        font-size: 30px;
    }

    .text-container-main p:nth-child(3) {
        font-size: 16px;
        color: darkgray;
    }
}

.MenuTitle{
	position: relative;
	font-size: 20px;
	color: darkgray;
	line-height: 1.5;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.MenuTitle:hover {
	opacity: 0.43;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.MenuTitle a, .MenuTitle:visited {
	color: darkgray;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.MenuTitle1Klein{
	position: relative;
	font-size: 18x;
	color: darkgray;
	line-height: 1.5;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.MenuTitle1Klein:hover {
	opacity: 0.43;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.MenuTitle1Klein a, .MenuTitle116:visited {
	color: darkgray;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.LinkInText{
	position: relative;
	font-size: 16px;
	color: darkgray;
	line-height: 1.5;
	text-decoration: none;
}

.LinkInText:hover {
	opacity: 0.43;
}

.LinkInText a, .LinkInText:visited {
	color: darkgray;
}

.fancy-line { 
    border: 0; 
    height: 1px;
    position: relative;
    margin: 0.5em 0;
}
.fancy-line:before {
	content: '';
    top: -0.5em;
    height: 1em;
}
.fancy-line:after {
    height: 0.5em;
    top: calc(-0.5em + 1px);
}

.fancy-line:before, .fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

.fancy-line, .fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255,0.1) 0%, rgba(255, 255, 255,0) 90%);
}

body, .fancy-line:after {
    background: rgb(64, 64, 64);
}

.ContactContainer {
    max-width: 1000px;
    padding-left: 3em;
	padding-right: 3em;
}

.ContactContainerTitle {
	padding: 1.5rem;
}

.ContactInput-Container {
    padding-left: 50px;
}

.ContakcContainer h1 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ContactContainer label {
    display: block;
    margin-bottom: 0.5rem;
}

.ContactContainer input, textarea {
    width: 100%;
    padding: 0.5rem;
    /*margin-bottom: 1rem;*/
}

.ContactContainer textarea {
    height:auto;
	min-height: 20em;
	overflow:auto;
	resize: both;
}

.ContactContainer button {
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

.ContactErrorMessage {
    display: none;
    color: red;
    font-size: 0.9em;
    margin-top: -1rem;
    margin-bottom: 1rem;
}

.ContactContainer .checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

/* Checkbox-Styling */
.ContactContainer input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

/* Datenschutzerklärungs-Text */
.ContactContainer .privacy-policy-text {
    font-size: 0.9em;
}

.ContactContainer button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.popup-hidden {
  display: none;
}

#custom-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 500px;
}

.login-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.login-name {
    font-family: 'Franklin Gothic Demi', sans-serif;
    font-size: 32px;
    color: white;
    margin: 5px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.login-box {
    margin-top: 20px;
}

.login-input {
    padding: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}

.login-button {
    padding: 5px 10px;
    font-size: 16px;
    margin-top: 5px;
}

.remember-line {
    margin-top: 10px;
    color: white;
    font-size: 12px;
}

.login-links {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

.login-links li {
    margin: 6px 0;
    text-align: center;
}