/*Grundeinstellungen start*/
:root {
  --hauptfarbe:#333333;
  --copyfarbe:#555555;
  --beige:#686565;
  --dmsBlau:#0056b3;
  --dmsBlauHover:#0056b3aa;
  --dmsWeis:#dedbdb;
  --dmsGrau:#c0bcbc;
  --codetext:#afaf63;
  --dmsRot:#ff0000;
}
body {
  background: var(--hauptfarbe);
  color:var(--dmsWeis);
  font-size: 100%;
  font-size: 1.6em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
img, video {width: 100%; height: auto;}
h1,h2,h3{color: var(--copyfarbe);background: var(--codetext);text-align: center;margin-top: 5px;}
/*Grundeinstellungen end*/
/*Navbar start*/
#navbar-dms{
 background: var(--dmsGrau)!important;
 box-shadow: rgba(244, 244, 244, 0.24) 0px 0.9rem 1rem;
}
/*Navbar end*/
code {
  display: block;
  background: var(--copyfarbe);
  padding: 5px 5px 10px 10px;
  color:var(--codetext);
  min-width: 60vw;
  font-size: 1em;
  padding: 10px;
  border: 1px solid;
  border-color: var(--dmsWeis);
  white-space: pre-wrap; /* Zeilenumbrüche beibehalten, aber Text umbrechen */
}

a {
  color: var(--codetext);
  text-decoration: none;
}
a:hover {
  color: var(--dmsBlauHover);
  background: var(--codetext);
  padding: 5px;
  border-radius: 3px;
}
/*figure start*/
figure img, figure video {
  width: 80%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
figcaption,video {
  border: 3px solid transparent;
  border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
  border-radius: 12px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background-color: var(--dmsWeis);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  
  /* Text-Styling */
  font-family: 'Arial', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--hauptfarbe);
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  
  /* Subtile Animation für Hover-Effekt */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

figcaption:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/*figure end*/
/*util start*/
#roterText{color:var(--dmsRot);}
#scrollToTopBtn:hover{background: var(--dmsBlau);}
/*util end*/
/*Tooltip start*/
/* Tooltip-Inhalt gestalten */
.tooltip-inner {
  background-color:var(--codetext); 
  color: var(--hauptfarbe);
  font-size: 1.2rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem var(--beige);
  max-width: 300px;
}

/* Tooltip-Pfeil*/
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--dmsWeis);
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--dmsWeis);
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color:var(--dmsWeis);
}
.tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--dmsWeis);
}
/*Tooltip end*/
/*Liststyles start*/
ul {
            list-style-type: none;
            padding-left: 10px;
        }
        li.ordnerstruktur {
            margin-left: 15px;
            position: relative;
        }
        li.ordnerstruktur:before {
            content: "────";
            position: absolute;
            left: -15px;
        }
        li.ordnerstruktur:first-child:before {
            content: "";
        }
/*Liststyles end*/