body {
   padding:0em;
}



.PosR {
   position: absolute;
   top:0em;
   right:0.5em;
   text-align: right;
}



span.ButtonContainer {
   display: flex;
   white-space: nowrap;
}

td:has(.ButtonContainer) {
   width: 1%;
   white-space: nowrap;
}


.Button {
   cursor: pointer;
}

span.Button {
   vertical-align: middle;
   line-height: 1;
   border: 0px solid #0003;
   border-radius: 8px;
   padding: 7px 3px;
   min-width: 25px;
   text-align: center;
   margin-right: 0px;
   background: transparent;
   position: relative;
   overflow: hidden;
   transition: transform 0.2s ease, color 0.3s ease;
   transform: scale(1);
   color: #26272857;
   font-size: 130%;
}

span.Button.SpaceR {
   margin-right: 0.6em;
}

span.Button::before {
   content: attr(content, "");  /* Dein Inhalt hier, z.B. Icon/Text */
   display: inline-block;
   transition: transform 0.2s ease;
   transform-origin: center;
   transform: scale(1.2);
   font-size: inherit;
}

span.Button:hover::before, span.Button.hover::before {
   transform: scale(1.5);
}

span.Button:hover, span.Button.hover {
   transform: scale(1);
   color: #262728ff;
}
span.Button.hoverRot:hover {
   color: red;
}
span.Button.hoverGrun:hover {
   color: green;
}






.ButtonSubmit {
   cursor: pointer;
}

span.ButtonSubmit {
   vertical-align: middle;
   line-height: 1;
   border: 0px solid #0003;
   border-radius: 8px;
   padding: 7px 3px;
   min-width: 25px;
   text-align: center;
   margin-right: 0px;
   background: transparent;
   position: relative;
   overflow: hidden;
   transition: transform 0.2s ease, color 0.3s ease;
   transform: scale(1);
   color: #26272857;
   font-size: 130%;
}

span.ButtonSubmit.SpaceR {
   margin-right: 0.6em;
}

span.ButtonSubmit::before {
   content: attr(content, "");  /* Dein Inhalt hier, z.B. Icon/Text */
   display: inline-block;
   transition: transform 0.2s ease;
   transform-origin: center;
   transform: scale(1.2);
   font-size: inherit;
}

span.ButtonSubmit:hover::before, span.ButtonSubmit.hover::before {
   transform: scale(1.5);
}

span.ButtonSubmit:hover, span.ButtonSubmit.hover {
   transform: scale(1);
   color: #262728ff;
}
span.ButtonSubmit.hoverRot:hover {
   color: red;
}
span.ButtonSubmit.hoverGrun:hover {
   color: green;
}



td.no-padding {
   padding-left: 0.1em;
   padding-right: 0.1em;
}

td.r {
   text-align: right;
}

span.Note {
   padding: 0.3em;
   border-radius: 0.3em;
}



span.ButtonMove {
   cursor: n-resize;
   padding: 0px 10px;
}








span.Code {
   display: inline-block;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   cursor: pointer;
   font-size: 5px;
   padding: 1em;


}

span.Code:hover {
   color: #000000;
   transform: scale(6.5);
   padding: 0.2em;
}




















div.sidebar {
   position: fixed;
   left: 0;
   top: 0;
   width: 4em;
   height: 100vh;           /* ← Volle Bildschirmhöhe */
   padding: 10px 0;         /* Vertikales Padding */
   z-index: 2000;           /* ← Immer sichtbar */
   transition: width 0.3s ease;  /* Optional: Ausklapp-Animation */
   overflow: hidden;
   padding: 0px 0px;
   background: #bdbdbdf7;
   border-right: 0px solid #7c8f979e;
}


div.topbar {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   margin: 0;
   padding: 0px 0px;
   background: #bdbdbdf7;
   border-bottom: 0px solid #7c8f979e;
   margin-bottom: 2em;
   z-index: 1000;

   div.top1 {
      margin-left:4em;
      padding-left:2em;
      padding-top:0.6em;
      padding-bottom:0.6em;
   }
   div.top2 {
      padding-top:0.6em;
      background: #e9e9e9f5;
      margin-left:4em;
      padding-left:2em;
      border-top-left-radius: 14px;
   }
}


div.content {
   margin:0;
   margin-left:6em;
   display: block;
   position: relative;
}


div.flex {
   display: flex;
   flex-wrap: wrap;
   gap: 3em;
}








table tbody tr {
   transition: background 0.2s ease;
}

table tbody tr:hover {
   background:#4c526c18;
}