@media screen and (max-width: 480px) {
  /* Anpassungen für Smartphones */
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Anpassungen für Tablets */

}

@media screen and (min-width: 769px) {
  /* Anpassungen für Desktop */
}

.blink {
  animation: blink-animation 1s linear infinite;
  background-color: yellow; /* Hintergrundfarbe für Hervorhebung */
  /* Optional: Rahmen für bessere Sichtbarkeit */
}

@keyframes blink-animation {
  0%, 100% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
}

/*=========================== Scrollbar ===================================*/
.lighting-effect {
  position: fixed;
  top: 0;
  right: 0;
  width:100%;
  height:100%;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle at top right, rgba(254, 221, 2, 0.7), rgba(255, 255, 255, 0) 70%);
  pointer-events: none; /* Damit der Effekt nicht anklickbar ist */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #424242;
}

/* Webkit-basierte Browser */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #424242;
}

::-webkit-scrollbar-thumb {
  background-color: #888; 
  border-radius: 6px; 
  border: 3px solid #f1f1f1; 
}

::-webkit-scrollbar-thumb:hover {
  background: #f1f1f1;
}



/*================================= Basis ==================================*/

.formbtn {
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

button#navbutton,
.navbutton { 
  color:#000000;
  background-color: #ffff;
  border:0px solid #000000;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-left:2px;
  margin-right:2px;
  padding:0.5rem;
  height:100%;
  max-height:46px;
  display:inline-flex;
  flex-wrap: nowrap;
  aspect-ratio:1/1 !important;
}
button#navbutton:hover,
.navbutton:hover { }

/* optional: Drop-Zone hervorheben */
.drop-zone.dragover {
  outline: 2px dashed #4caf50;
  background: rgb(189, 236, 191) !important;
}


.color-change-div {
  background:rgba(255,255,255,0.2);
  transition: background-color 0.3s ease;
  border-bottom:1px solid #000;
}

.color-change-div:hover {
  background-color: #ff0000;
}

.color-change-div1 {
  background:rgba(255,255,255,0.2);
  transition: background-color 0.3s ease;
  border-bottom:1px solid #000;
}
.color-change-div1:hover {
  background-color: #008000;
}


.nav-tabs .nav-link {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.rounded-top-right {
  border-top-right-radius: .25rem !important;
}
.rounded-top-left {
  border-top-left-radius: .25rem !important;
}
.rounded-bottom-left {
  border-bottom-left-radius: .25rem !important;
}
.rounded-bottom-right {
  border-bottom-right-radius: .25rem !important;
}
.border-mid {
  border-width: 3px !important; /* Mittlere Stärke */
}
.border-big {
  border-width: 5px !important; /* Dick */
}
.border-black {
  border-color: #000000 !important;
}
.bg-none {
  background: none !important;
}

.bg-dark {
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(28,28,28,1) 35%, rgba(13,13,13,1) 100%);
background-attachment: fixed; 
background-color: rgb(0,0,0);
background-image: var(--bg-image);
background-position: right bottom;
background-repeat: no-repeat;
background-size: cover;

}
.text-yellow {
  color:#ff9d02;
}
.text-green {
  color:#008000;
}
.text-red {
  color:#ff0000;
}
.text-rms {
  color:#bcd049;
}
.text-rmsgrey {
  color:#656b70;
}
.text-black {
  color:#000000 !important;
}
.bg-yellow {
  background-color: #ff9d02;
  
}
.bg-green {
  background-color: #008000;
}
.bg-red {
  background-color: #ff0000;
}
.bg-rms {
  background:none;
  background-color:#bcd049 !important;
}
.bg-rmsgrey {
  background:none;
  background-color:#656b70 !important;
}
  /* Icon + Text sauber ausrichten */
  display:inline-flex; /* statt inline-block fuer flex-gap */
  align-items:center;
  gap:.5rem; /* Standardabstand zwischen Icon (<i>, <svg>) und Text */

.bg-lightgrey {
  background-color:#f2f2f2;
  color:#333333;
}
.text-lightgrey {
  color:#f2f2f2;
}
.bg-grey {
  background-color:grey;
  color:#000000;
}
.text-grey {
  color:grey;
}
.bg-darkgrey {
  background-color:#333333;
  color:#f2f2f2;
}
.text-darkgrey {
  color:#333333;
}

.nowrap {
  white-space: nowrap;
}
.container {
  /* border-radius: 10px; */
  background-color: #f2f2f2;
  /* background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(245,245,245,1) 35%, rgba(2555,255,255,1) 100%); */
  background-attachment: fixed;
  padding: 5px;
  padding-left:20px;
  padding-bottom:5px;
  margin-bottom: 8px;
  /*border:2px solid #131313;*/
}

@media (max-width: 1200px) {
  .container {
    max-width: 100% !important;
  }
}
/*@media (min-width: 1200px) {
  .container {
    max-width: auto !important;
  }
} */
.container-sm {
  background-color: #f2f2f2;
}
.container-md {
  background-color: #f2f2f2;
}

.row {
  transition: background-color 0.3s; /* Optional: Fügt eine sanfte Übergangseffekt hinzu */
 }
  .row:hover {
    /* background-color:#ffffff !important;*/
  }
  .row.clicked {
    /* background-color:#ffffff !important; */
  }

.rowcol {
  flex-direction: row;
}

.rowcol1 {
  flex-direction: row;
}

#map {
  height: calc(100% - 65px);
}


html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Humnst777-Cn-BT';
  font-size:100%;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
    background-image: var(--bg-image);

  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

p { 
  margin-top: 0;
  margin-bottom:0.2rem;
}



/*================================== Schrift =================================*/

h1 {
  font-size:2.5rem;
  font-family: 'NewAmsterdam-Regular', sans-serif;
  text-transform:uppercase;
}
h2 {
  font-size:2rem;
  font-family: 'NewAmsterdam-Regular', sans-serif;
}
h3 {
  font-size:1.5rem;
  font-family: 'BeVietnamPro-Bold', sans-serif;
}

span.big {
  /*font-size:40px;*/
  font-size:2rem;
  font-family: 'BeVietnamPro-Bold', sans-serif;
  
}
span.sbig {
  font-size:30px; font-family: 'BeVietnamPro-Bold', sans-serif;
}

span.mid {
  font-size:22px;
  font-family: 'BeVietnamPro-Regular', sans-serif;
  
}
span.mmid {
  font-size:22px;
  font-family: 'BeVietnamPro-Regular', sans-serif;
}

span.smal {
  font-size:18px;
  font-family: 'BeVietnamPro-Regular', sans-serif;
}
span.smalest {
  font-size:12px;
  font-family: 'BeVietnamPro-Regular', sans-serif;
}
span.msmal {
  font-size:16px;
  font-family: 'BeVietnamPro-Bold', sans-serif;
}

span.nav a {
  color:#ccc;
  font-size:26px;
   }

span.nav a:hover {
    color:#bcd049;
     }

div.btn a {
  color:#000000;
}
div.btn a:hover {
  color:#f2f2f2;
  text-decoration:none;
}

.big {
  font-size:40px;font-weight: bold;
}

.max {
  font-size:80px;font-weight: bold;
}

.sbig {
  font-size:30px; font-weight: bold;
}

.mid {
  font-size:22px;
}

.smal {
  font-size:18px;
}
.smalest {
  font-size:12px;
}

.link {
  cursor:pointer;
}

/* Nähstatus Verlauf (mobile): kompaktere Statusbox + Abstand */
.ns-verlauf .ns-verlauf-row {
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.ns-verlauf .ns-verlauf-left {
  flex: 1 1 60%;
}
.ns-verlauf .ns-verlauf-right {
  flex: 0 0 auto;
  margin-left: 8px;
}
.ns-verlauf .statusbox {
  height: 32px;
  font-size: 14px;
  min-width: 150px;
  margin-right: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

.ns-mob-status .status-badge {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 6px;
}

.unselect {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none;
  }

.vmitte {
margin-top:auto;
margin-bottom:auto;
}

.hmitte {
  margin-left:auto;
  margin-right:auto;
}


.m5 {
  margin-left:5px;
  margin-right:5px;
}

.p5 {
  padding-left:5px;
  padding-right:5px;
}

.p10 {
  padding-left:10px;
  padding-right:10px;
}

.m10 {
  margin-left:10px;
  margin-right:10px;
}

.h10 {
  margin-top:10px;
  margin-bottom:10px;
}

.r10 {
   margin-bottom:10px;
}

/*================================ Schrift Repaufnahme ================================*/
#schein .forminput {
  background:#f8f8f8;
  border-radius:5px;
  border: 1px solid #cccccc;
  margin:0px;
  padding:0px;
  padding-left:2%;
  width:100%;
  

}

#schein .title{
	font-size:clamp(1.5em, 3vw, 3.5em);
	margin-left:10%;
	position:relative;
	top:-8px;
	line-height: 1;
	color:#656b70;
}
#schein.text {
	font-family: 'Bahnschrift';
	color:#000000;
}

#schein .inputtext {
	/* font-family: 'GrapeNuts-Regular'; */
	line-height: 1;
}

#schein .smal {
	font-size: clamp(0.5em, 2vw, 1em);
}
#schein .mid {
	font-size: clamp(12px, 2vw, 1.5em);
	line-height: 1;
}
#schein .big {
  font-size: clamp(12px, 3vw, 2.5em);
  /*font-size: clamp(11px, 2vw, 1.7em);*/
}

.naehzahl {
  font-size: clamp(8px, 2vw, 24px);
	line-height: 1;
}
#schein .naehinput {
  /*border:1px solid #656b70;
  background-color:#ffffff;*/
  text-shadow: 
                1px 0 0 #ffffff,  /* rechter Rand */
                -1px 0 0 #ffffff, /* linker Rand */
                0 1px 0 #ffffff,  /* unterer Rand */
                0 -1px 0 #ffffff, /* oberer Rand */
                1px 1px 0 #ffffff, /* unterer rechter Rand */
                1px -1px 0 #ffffff, /* oberer rechter Rand */
                -1px 1px 0 #ffffff, /* unterer linker Rand */
                -1px -1px 0 #ffffff; /* oberer linker Rand */
  /*text-shadow:1px 1px 1px #ffffff; */
  border:1px dotted #888888;
  margin-left:15%;
  background:none;
  padding:2px;
  max-width:3em;
  text-align:center;
}
#schein .shortnaehinput {
  text-shadow: 
  1px 0 0 #ffffff,  /* rechter Rand */
  -1px 0 0 #ffffff, /* linker Rand */
  0 1px 0 #ffffff,  /* unterer Rand */
  0 -1px 0 #ffffff, /* oberer Rand */
  1px 1px 0 #ffffff, /* unterer rechter Rand */
  1px -1px 0 #ffffff, /* oberer rechter Rand */
  -1px 1px 0 #ffffff, /* unterer linker Rand */
  -1px -1px 0 #ffffff; /* oberer linker Rand */
/*text-shadow:1px 1px 1px #ffffff; */
border:0px;
margin-left:0%;
background:none;
padding:2px;
max-width:2em;
text-align:center;

}


/* Maximale Höhe des Modal-Dialogs, um nicht höher als die Fensterhöhe zu werden */
.modal-dialog {
  max-height: 100vh;
  display: flex;
  align-items: center;
}
/* Der Modal-Body wird scrollbar, wenn der Inhalt zu lang ist */
.modal-body {
  max-height: calc(100vh - 200px); /* Header und Footer berücksichtigen */
  overflow-y: auto;
}


/*================================ Custom Alert ================================*/
 /* Styles für die modale Box */
 #customAlert {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 21;
}
#customAlertOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 20;
}
#customAlert i {
  vertical-align: middle;
  margin-right: 10px;
}
#customAlert button {
  margin-top: 20px;
}


/*================================ Navigation ================================*/
#untermenuenav {
  position:fixed;
  left:0px;
  top:50px;
  min-width:230px;
  z-index:12;
  background-color:rgba(0,0,0,0.8);
  width:50%;
  height:calc(100% - 50px);
  overflow-x: scroll;
  overflow-x:hidden;
  /*max-width:400px;*/
}


#navigation {
  display:flex;
  position:fixed;
  height:52px;
  top:0px;
  left:0px;
  z-index:90;
  background-color:#000;
  width:100%;
  border-bottom:1px solid #333;
  box-shadow:0px 2px 6px #131313;
  flex-direction:row;
}

#untermenue {
    flex-direction: column;
    max-width:50%;
  }

#profilnav {
  position:fixed;
  right:0px;
  top:50px;
  min-width:230px;
  z-index:12;
  background-color:rgba(0,0,0,0.8);
  width:50%;
  height:calc(100% - 50px);
  overflow-x: scroll;
  overflow-x:hidden;
  }

  #navbox {
    font-family: 'NewAmsterdam-Regular';
    margin-top:10px;
    display:flex;
    flex-direction:column;
    row-gap:10px;
    }

.untermenue {
  border:1px solid #444;
  border-top:0px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
  background-color:#000;
  width:150px;
  position:relative;
  top:-2px;
  z-index:10;
  display:none;
  margin-left:5px;
  margin-right:-115px;
}

@media (max-width: 576px) {
  .untermenue {
    margin-right: 0;
    max-width: calc(100vw - 20px);
  }
}

.unav {
  width:100%;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;
  padding-left:10px;
  font-size:20px;
  color:#ccc;
  display:block;
}
.unav:hover {
  color:#131313;
  background-color: #bcd049;
}


.filternav {
  color:#999;
  background-color:#000;
  border:1px solid #999;
  border-radius:5px;
}
.filternav:hover {
  background-color:#999;
  color:#000;
  border:1px solid #000;
}

.hovernav {
  text-decoration:none;
  color:#000000;
  display:flex;
  height: 40px; 
  margin-right:5px;
  margin-top:2px;
  margin-bottom:2px;
  align-items: center;
  justify-content: center;
   }

.hovernav:hover { 
  text-decoration:none;
  color:#ffffff;
  background-color:#bcd049;
}


.iconnav {
  height:inherit;
  aspect-ratio: 1/1;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:#bcd049; 
  color: #000;
  text-align:center;
}
.navboxu .iconnav {
  font-size:0.8em;
}


.navsymbol {
  height:50px;
  font-size:25px;
  display:inline-block;
  margin-right:10px;
}

.navbox {
 
  height:50px;
  /*font-size:25px;*/
  font-size:2em;
  display:inline-flex;
  width:auto;
  min-width:130px;
  justify-content: center;
  align-items: center;
  text-align:left;
  background-color: #000000;
  color:#ccc;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-left:10px;
  margin-right:10px;
  /*margin-right:15px;*/
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
  border-bottom:1px solid #444;
}

.navbox:hover {
  background-color:#bcd049;
  color:#131313;
}

.navboxu {
  height:38px;
  font-size:1.8em;
  display:inline-flex;
  width:calc(100% - 20px);
  background-color:#000;
  /*min-width:120px;*/
  justify-content: center;
  align-items: center;
  text-align:left;
  /*background-color: #181818;*/
  color:#ccc;
  /*box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);*/
  margin-right:15px;
  margin-bottom:2px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
  border-bottom:1px solid #444;
}
.navboxu:hover {
  background-color:#bcd049;
  color:#131313;
}

/*================================= Formular ================================*/
/*.btn {
  cursor:pointer;
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  /*line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
} */
.border-rms {
  border-color:#bcd049 !important;
}

.navbtn-light:hover {
  background-color:#f2f2f2;
  border-radius:0px;
}

.no-hover:hover {
  /* Nichts ändern, alles bleibt wie im Normalzustand */
  background-color: inherit !important;
  background: inherit !important;
  color: inherit !important;
  border: inherit !important;
  box-shadow: inherit !important;
  position: relative;
  top: 0px !important;
  left: 0px !important;

  /* ...je nach Bedarf weitere Eigenschaften */
}

.btn-responsive {
 display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  padding: .375rem .75rem;
  font-size: 1.2rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  white-space:nowrap;
}

.btn-rms { 
font-family: 'NewAmsterdam-Regular';
font-weight: normal;
display:inline-flex; /* sicherstellen auch im mobilen Breakpoint */
align-items:center;
gap:.4rem; /* etwas kleiner auf sehr kleinen Screens */
color:#111;
background-color:#f1f1f1;
box-shadow: -2px -2px 2px #111111 inset;
border:1px solid #bcd049;
margin:2px;
}
.btn-rms:hover { 
  color:#111;
background-color:#bcd049;
box-shadow: 2px 2px 2px #111111 inset;
position:relative;
top:2px;
left:2px;
}
.btn-rms:focus {
color:#111;
background-color:#f1f1f1;
box-shadow: -2px -2px 2px #111111 inset;
box-shadow: 0 0 0 .2rem rgba(188,208,73,.5);
}

.btn-lg {
  cursor:pointer;
}

.btn-regular {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-regular:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}


.form-control[type=file] {
  overflow: hidden;
}

.form-control {
  display: block;
  width: 100%;
  color: #444;
  background-color: #fff;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

input, select {
  outline: none;
}

/* Fixed sizing avoids oversized checkboxes on iOS Safari */
input[type=checkbox] {
  width: clamp(16px, 1.1rem, 20px);
  height: clamp(16px, 1.1rem, 20px);
  max-width: 20px;
  max-height: 20px;
  -webkit-appearance: auto;
  appearance: auto;
}






/*=============================== Blöcke ===================================*/

.cardrow {
  min-height:23px;
}


#zoom {
  width: 100%; /* Ausgangswert */
  height: 25px; /* Oder einen anderen Ausgangswert für height setzen */
  transition: width 2s, height 1s;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;
}
#zoom:hover {
  white-space: wrap;;
  width: 120%;
  height: 50px;
}

#flexleft {
  width:350px;
  height:50px;
  display:flex;
  white-space:nowrap;
  align-items:center;  
  }

#objblock {
  display:flex;
  flex-wrap: wrap;
 /* flex-direction:row; */
}

#titlekurz {
  max-width:450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#headbox {
  width:80%;
  max-width:650px;
  margin-bottom:25px;
}

.searchblock-m {
  max-width:200px;
  padding:0px;
  background-color:#fff;
  border-radius:6px;
  height:25px;
 }

  #search-m {
    
    height:25px;
  }

#searchfield-m {
    position:fixed;
    z-index:50;
    top:60px;
    left:60%;
}



.searchblock {
  max-width:300px;
  padding:0px;
  background-color:#fff;
  border-radius:8px;
  height:45px;
 }

  #search {
    
    height:45px;
  }

#searchfield {
    position:fixed;
    z-index:50;
    top:60px;
    left:60%;
}

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

.flexrow {
  display:flex;
  flex-basis:100%;
  flex-wrap:nowrap;
  }

.box-shadow {
  box-shadow: 2px 4px 8px #666;
}

.box-center {
  display:flex;
  justify-content: center;
  align-items: center;
  margin-left:auto;
  margin-right:auto;
}

.overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon {
  width:55px;float:left;
  border:1px dotted #000;
  border-radius:9px;
  margin:5px;
  background-color:#fff;
}

.nobg {
  background:none;
}
.noborder {
  border:none;
}

.iconL {
  width:40px;float:left;
  border:0px solid #000;
  border-radius:2px;
  margin:2px;
  margin-top:0px;
  margin-bottom:0px;
  background:none;
}
.iconXL {
  width:80px;float:left;
  border:0px solid #000;
  border-radius:2px;
  margin:2px;
  margin-top:0px;
  margin-bottom:0px;
  background:none;
}

.naehicon {
  border:1px dotted #999;
  border-radius:6px;
  padding:5px;
  margin:5px;
  min-width:215px;
  min-height:215px;
  text-align:center;
  justify-content: center;
  align-items:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.iconprofil {
  height:50px;
/*  min-width:150px;
  aspect-ratio: 1/1; */
  justify-content: center;
  align-items: center;
  text-align:center;
  font-size:35px;
  float:right;
  color: #666;
  cursor:pointer;
}

.starticon {
  min-width:75px;
  font-size:60px;
  line-height:50px;  
}

.stofficon {
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  height:50px;
  aspect-ratio:1.25/1;
  background-size:cover;
  text-align:center;
  padding:0px;
  margin:0px;
  box-shadow:2px 2px 4px #444;

}

.boxx {
  height:50px;
  font-size:25px;
  display:inline-block;
  width:auto;
  min-width:160px;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-right:15px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}

.block {
    display:flex;
    width:100%;
    flex-wrap: wrap;
    vertical-align: top;
    margin-left:auto;
    margin-right: auto;
    border-radius: 0px;
    background-color: #f2f2f2;
    padding: 5px;
    padding-left:20px;
    padding-bottom:5px;
    border:5px solid #131313;
}

.kundenblock {
  white-space:nowrap;
  overflow:clip;
  flex-grow:1;
  width: calc(100% - 480px);
  display:inline-block;
  border:0px solid red;
}

.statusblock {
  width:230px;
  display:inline-block;
}

.hiddenstatus {
  float:right;
  width:300px; }

.datumblock {
  width:130px;
  display:inline-block;
  overflow:clip;
  border:0px solid yellow;
}

.statusselect {
 width:230px;
 font-size:25px;
 height:50px;
}


.infobox {
  flex-grow:1;
  padding:5px;
}

.auftragicon {
  height:auto;
  /*aspect-ratio: 1/1;
   display:flex; */
  background-color: #bcd049; 
  text-align:center;
  padding:0px;
  padding-left:1vw;
  padding-right:1vw;
}


.auftragbox {
  height:50px;
  font-size:25px;
  /* display:inline-block; */
  width:auto;
  min-width:230px;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-right:15px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
  cursor:pointer;
}


.statusbox {
  height:50px;
  font-size:25px;
  display:inline-block;
  width:auto;
  min-width:230px;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-right:15px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
  cursor:pointer;
}

.infoblock {
  display:flex;
  width:100%; 
}

.iconbox {
  height:inherit;
  aspect-ratio: 1/1;
  display:flex;
  justify-content: center;
  align-items: center;
  /*background-color: #bcd049; */
  text-align:center;
}



.navinbox {
  height:30px;
  font-size:25px;
  display:flex; /*inline-block;*/
  flex-wrap: nowrap;;
  width:auto;
  justify-content: center;
  align-items: center;
  text-align:center;
  background:none;
  margin-left:15px;
  margin-right:15px;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
  color:#656b70;
  border-bottom:1px solid #bcd049;
}
.navinbox:hover {
  color:#fff;
}

.naviconbox {
  height:inherit;
  aspect-ratio: 1/1;
  display:flex;
  justify-content: center;
  align-items: center;
  background:none;
  text-align:center;
  color: #bcd049; 
}
.navboxtxt {
  margin-left:15px;
  font-size:0.8em;
  display:flex;
  flex-grow:1;
  justify-content: left;
  text-align: left;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color:rgba(0,0,0,0.7);
}
.navboxtxt:hover {
  color:#fff;
}
.box {
  height:35px;
  font-size:1.25rem;
  display:flex; /*inline-block;*/
  flex-wrap: nowrap;;
  width:auto;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color: #fff;
  /*margin-left:15px;
  margin-right:15px;*/
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}

.box:hover {
  background-color: #5b6574;
  color:#fff;
}

.nav-tabs .nav-link {
  color:#333333;
  margin-bottom: 0px;
  background-color:rgba(255,255,255,0.7);
  border: none;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  margin-right: 2px;
 
}

.nav-tabs {
  border-bottom: 0px;
}

.nav-link {
  font-size:1rem;
  color:#000000;
}
.nav-link:hover {
  background-color: #bcd049;
  color:#fff;
}
.boxtxt {
  height:inherit;
  /*padding-top: 5px;*/
  flex-grow:1;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.boxtxt:hover {
/*background-color:#bcd049;*/
}
.stoffselect {
  font-size:22px;
  height:35px;
  width:55px;
  margin:0px;
  padding:0px;
}

.drpdown {
height:45px;
width:55px;
}

.drpdownzahl {
/*  height:45px; */
  width:65px;
   }

.sort {
  padding:5px;
  width:230px;
}

.login {
  max-width: 450px;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin: 40px auto;
}

.login h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #dee0e4;
}

.inline {
  display:inline-block;
}


/************************************************ Card *************************************************************/
.cardrow {
  border-bottom:1px solid #000;
  width: 100% !important;
  color: #212529 !important;
  padding-left: .25rem !important;
  background-color: #f8f9fa !important;
}

/* Style inputs, select elements and textareas  */
input[type=text], select, textarea{
  /*width: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  */
}


 input[type=file] {
  
 /* padding: 0px;
  padding-bottom:0px;
  margin:0px;
  /*margin-right:25px;
  background:#fff;
  box-sizing: border-box;
  height:auto;
  width:100%;
  */
} 
.input {
  padding: 5px;
  margin-right:25px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
}

.w-90 {
  width:90%;
}

input[type=date] {
  padding: 8px;
  margin-right:25px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
input[type=time] {
  padding: 8px;
  margin-right:25px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*
.login form input[type="password"], .login form input[type="text"] {
  width: 310px;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}

input[type=text], select, textarea{
  width: 95%;
  padding: 12px;
  margin-right:25px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
*/
/* Style the label to display next to the inputs 
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-weight: bold;
}
*/
/* Style the submit button 
input[type=button] {
  background-color: #bcd049;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size:25px;
  justify-content: center;
  align-items: center;
  display:flex;
  margin:5px;
  
} */

#submitbutton {
  
  background-color: #fff;;
  border:1px solid #000000;
  border-radius: 5px;
  cursor: pointer;
  /* font-size:25px; */
  justify-content: center;
  align-items: center;
  display:flex;
  flex-wrap: nowrap;
  margin-top:3px;
  margin-bottom:3px;
  margin-left:0px;
  margin-right:5px; 
  padding-right:5px;
  /*padding-left:5px;*/
  color: #000;
  /*box-shadow:2px 2px 2px #000000;*/
  box-shadow:-2px -2px 2px #c0c0c0 inset;
}
#submitbutton:hover {
  box-shadow:2px 2px 2px #000 inset;
  position:relative;
  top:2px;
  left:2px;
}

#iconbutton {
  color:#000000;
  background-color: #ffff;
  border:0px solid #000000;
  border-radius: 5px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display:flex;
  flex-wrap: nowrap;
  margin-top:3px;
  margin-bottom:3px;
  margin-left:0px;
  margin-right:5px; 
  color: #000;
  box-shadow:-1px -1px 2px #c0c0c0 inset;
  height:auto;
  aspect-ratio:1/1 !important;
}
#iconbutton:hover {
  box-shadow:1px 1px 2px #000 inset;
  position:relative;
  top:1px;
  left:1px;
}
.iconbutton {
  height: auto; /* Höhe wird durch den Padding-Trick festgelegt */
  width: auto;  /* Breite passt sich durch das Seitenverhältnis an */
  padding-top: calc(100% / 1.2); /* Höhe wird durch den Padding-Trick definiert, um ein Seitenverhältnis von 1.2:1 zu erzielen */
  position: relative; /* Damit der Inhalt innerhalb des Containers positioniert werden kann */
  padding:0px;
  padding-left:5px;
  padding-right:5px;
  text-align:center;
  /*color:#ffffff;*/
  
}

.submit {
  font-family: 'NewAmsterdam-Regular';
  font-weight:normal;
  padding-right:5px;
  padding-left:5px;
  /*white-space: nowrap;*/
  flex-grow: 1;

}
.submiticon {
  /*height:100%;
  width:50px;
  aspect-ratio:1.2/1 !important;*/

  height: auto; /* Höhe wird durch den Padding-Trick festgelegt */
  width: auto;  /* Breite passt sich durch das Seitenverhältnis an */
  padding-top: calc(100% / 1.2); /* Höhe wird durch den Padding-Trick definiert, um ein Seitenverhältnis von 1.2:1 zu erzielen */
  position: relative; /* Damit der Inhalt innerhalb des Containers positioniert werden kann */
  padding:0px;
  padding-left:4px;
  padding-right:4px;
  text-align:center;
  color:#ffffff;
  background-color: #000000;
  border-radius:4px 0px 0px 4px;
}

.input-group-text {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

/* Rahmen + Layout wie Bootstrap-Input */
.checkline{
  --h: calc(1.5em + .75rem + 2px);
  display: grid;
  grid-template-columns: var(--h) 1fr; /* links Quadrat, rechts Text */
  align-items: stretch;
  height: var(--h);
  border: 1px solid #ced4da;
  border-radius: .25rem;
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
}

/* Linkes Feld: weiß & Checkbox mittig */
.checkline-box{
  background: #fff;                 /* wirklich weiß */
  display: flex;
  align-items: center;              /* vertikal mittig */
  justify-content: center;          /* horizontal mittig */
}

/* Checkbox selbst (native) */
.checkline-box input[type=checkbox]{
  margin: 0;
  width: 1.1rem;                    /* Größe nach Wunsch */
  height: 1.1rem;
  accent-color: #007bff;            /* Bootstrap-Primary */
  cursor: pointer;
}

/* Rechter Bereich: grau + klickbar */
.checkline > label{
  margin: 0;
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  background: #e9ecef;
  text-overflow: clip;
}

.navarrow {
  color:#c0c0c0;
}
/*.submiticon:hover {
  color:#000000;
  background-color:#bcd049;
}*/

.col {
  float:left;
  width:100%;
  margin-top: 6px;
}
.col-12 {
  float: left;
  width: 12%;
  margin-top: 6px;
}

.col-25a {
  float: left;
  width: 25%;
  margin-top: 6px;
  min-width:240px;
    
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;   
}

.col-50 {
  display:inline-block;
  width: 48%;
  margin-top: 6px;
  
}
.col-70 {
  display:inline-block;
  width:68%;
  margin-top:6px;
}
.col-30 {
  display:inline-block;
  width:30%;
  margin-top:6px;
}

.col-50a {
  float: left;
  width: 50%;
  margin-top: 6px;
  min-width:500px;
}


/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.rowa:after {
  content: "";
  display: table;
  clear: both;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/* ================================================================================================== 
               Dokumente                                                                               */
#bkgrdblock { 
    
    background-position:0px;
    background-repeat:no-repeat;
    background-size:contain;
    }

.mbig {
    font-size:28px;
    font-weight:bolder;
    }
    
.docimg {
    width:150px;
    aspect-ratio: 1.85/1;
    border:thin  solid #000;
    }

.dociconbox {
      height:inherit;
      aspect-ratio: 1/1;
/*      display:inline-block; */
      justify-content: center;
      align-items: center;
      background-color: #bcd049; 
      text-align:center;
    }

.docboxtxt {
      height:inherit;
      display:flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
    }    

.docbox {
    height:50px;
    font-size:25px;
    display:flex;
    width:auto;
    justify-content: center;
    align-items: center;
    text-align:center;
    background-color: #fff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none;
    }
    
.docbox:hover {
    background-color: #5b6574;
    color:#fff;
    }    

.block {
    display:flex;
    flex-wrap: wrap;
    vertical-align: top;
    margin-left:auto;
    margin-right: auto;
    background-color: #f2f2f2;
    padding: 5px;
    border:5px solid #131313;
  }

.docinfobox {
    display:inline-block;
    width:100%;
    margin-left:10px;
    margin-right:10px;
    flex-grow:1;
    min-width:190px;
  }


  /*=================================== SCREEN ANPASSUNG ==============================*/
  @media (max-width: 576px) {

  }
 
 
 @media (min-width: 576px) {
   .block {
     max-width: 540px;
   }
 }
 
 @media (min-width: 768px) {
   .block {
     max-width: 720px;
   }
 }
 
 @media (min-width: 992px) {
   .block {
     max-width: 960px;
   }
   
 }
 
 @media (min-width: 1200px) {
   .block {
     max-width: 1140px;
   }

 }

 @media screen and (max-width: 992px) {

  .rowcol {
   flex-direction: column;
 }
 }

@media screen and (max-width: 1200px) {
     .modal-xl {
   max-width: 95%;
   width: 95%;
  }
}

 @media (max-width: 1024px) {
.rowcol1  {
   flex-direction: column;
}
.btn-responsive {
  padding: .4rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
  }

 }

 /*=================================== MOBIL ANPASSUNG ==============================*/
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
/* Bootstrap Klasse MD */
@media (max-width: 760px) {
.btn-responsive {
  padding: .25rem .3rem;
  font-size: 1rem;
  line-height: 1.3;
  border-radius: .2rem;
  }

  .btn-rms { 
box-shadow: -1px -1px 1px #111111 inset;
gap:.2rem; /* etwas kleiner auf sehr kleinen Screens */
}
.btn-rms:hover { 
box-shadow: 1px 1px 1px #111111 inset;
position:relative;
top: 1px;
left:1px;
}
.btn-rms:focus {
box-shadow: -1px -1px 1px #111111 inset;
box-shadow: 0 0 0 .1rem rgba(188,208,73,.5);
}
   /*992*/
button#navbutton,
.navbutton { 
  max-height:32px !important;
}
  .sbig {
    font-size: 18px;
    font-weight: bold;
  }
    .big {
    font-size: 30px;
    font-weight: bold;
  }

  .iconL {
  width:40px;float:left;
  border:0px solid #000;
  border-radius:2px;
  margin:2px;
  margin-top:0px;
  margin-bottom:0px;
  background:none;
}
}

@media screen and (max-width: 480px) { /*992*/

  .iconL {
  width:30px;float:left;
  border:0px solid #000;
  border-radius:2px;
  margin:2px;
  margin-top:0px;
  margin-bottom:0px;
  background:none;
}

  .col-25, .col-75, .col-25a,  .col-50a {
    flex-direction: column;
    width: 90%;
    margin: 0px;
    padding:0px;
    margin-bottom:0px;
    }

#systemmsg {
  display:none;
}

#headbox {
      width:60%;
      max-width:350px;
      margin-bottom:25px;
    }

#titlekurz {
      max-width:220px;
    }

#gamebutton {
      display:none;
    }
    h1 { font-size:1.8rem; margin-bottom:0.2rem; font-family: 'BeVietnamPro-Bold', sans-serif;}
    h2 { font-size:1.2rem; margin-bottom:0.2rem; font-family: 'BeVietnamPro-Regular', sans-serif;}
    h3 { font-size:1rem; margin-bottom:0.2rem; font-family: 'BeVietnamPro-Regular', sans-serif;}
    span.big { font-size:24px; font-family: 'BeVietnamPro-Bold', sans-serif;}
    span.sbig { font-size:18px; font-family: 'BeVietnamPro-Bold', sans-serif; }
    span.mid { font-size:16px; font-family: 'BeVietnamPro-Regular', sans-serif;}
    span.mmid { font-size:16px; font-family: 'BeVietnamPro-Regular', sans-serif;}
    span.smal { font-size:14px; font-family: 'BeVietnamPro-Regular', sans-serif;}
    span.msmal { font-size:14px; font-family: 'BeVietnamPro-Regular', sans-serif;}
    .big { font-size:20px;font-weight:bold; }
    .max {
      font-size:50px;font-weight:bold;
    }
    .sbig {font-size:18px;font-weight: bold; }
    .mid { font-size:15px; }
    .smal { font-size:13px; }
    .nav {  color:#ccc;font-size:26px; }
    
    .boxtxt {
    height:inherit;
    padding-top: 2px;
    flex-grow:1;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
  }

.rowcol {
  flex-direction: column;
}
.icon {
  width:35px;float:left;
  border:1px dotted #000;
  border-radius:6px;
  margin:3px;
}
.stofficon {
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  height:35px;
  box-shadow:1px 1px 2px #444;
}

input[type=date] { max-width:120px; }  
input[type=time] { max-width:100px; }   


.input {
  padding-top: 5px;
  padding-bottom:5px;
  padding-left:6px;
  margin-right:15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;  
}

 /* #objblock {
  display:grid; */
      /* flex-direction: column; 
    }*/

.navinbox {
      height:40px;
      font-size:20px;
      display:flex;
      width:auto;
      justify-content: center;
      align-items: center;
      text-align:center;
      background:none;
      box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
      margin-right:15px;
      margin-left:15px;
      }



.box {
  height:40px;
  font-size:20px;
  display:flex;
  width:auto;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-right:15px;
  margin-left:15px;
  }

  #untermenuenav {
    top:40px;
    min-width:210px;
    z-index:12;
    width:100%;
    height:calc(100% - 40px);
  }

#navigation {
  height:42px;
}

.navsymbol {
  height:40px;
  font-size:20px;
  display:inline-block;
  margin-right:5px;
}

.hovernav {
  height:30px;
}

.navbox {
  height:40px;
  font-size:1.5em;
  display:inline-flex;
  width:auto;
  justify-content: center;
  align-items: center;
  text-align:left;
  background-color: #000;
  color:#ccc;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-right:15px;
    }

.navboxu {
      font-size:1.3em;
    }



.boxx {
  height:40px;
  font-size:20px;
  display:inline-block;
  width:auto;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin-right:15px;
  margin-left:15px;
  }

.statusselect {
    width:110px;
    font-size:16px;
    height:30px;
    }

.auftragbox  {
      font-size:16px;
      /* display:inline-block; */
      width:auto;
      min-width:170px;
      justify-content: center;
      align-items: center;
      text-align:center;
      background-color: #fff;
      box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
      margin-right:15px;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
      user-select: none;
      cursor:pointer;
    }  

 .statusbox  {
    height:30px;
    font-size:16px;
    display:inline-block;
    width:auto;
    min-width:150px;
    justify-content: center;
    align-items: center;
    text-align:center;
    background-color: #fff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin-right:15px;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none;
    cursor:pointer;
  }

  .kundenblock {
    white-space:nowrap;
    overflow:clip;
    flex-grow:1;width: calc(100% - 115px);
    display:inline-block;
    border:0px solid red;
  }
  
  .statusblock {
    width:200px;display:inline-block;
  }
  
  .datumblock {
    width:110px;display:inline-block;overflow:clip;border:0px solid yellow;
  }
  
  .infoblock {
    flex-direction: column;
  }
  
  .hiddenstatus {
    width:150px; 
    float:left;
  }
  
  .iconprofil {
    height:40px;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-size:25px;
    float:right;
    color:#666;
    cursor:pointer;
  }
.naehicon {
  min-width:155px;
  min-height:155px;
}
.iconXL {
  width:50px;float:left;
  border:0px solid #000;
  border-radius:2px;
  margin:2px;
  margin-top:0px;
  margin-bottom:0px;
  background:none;
}

.starticon {
    min-width:50px;
    font-size:45px;
    line-height:50px;
  }

#untermenue {
/*        top:40px;
          left:5px;
          position:fixed;
          z-index:1; */
          flex-direction: column;
          max-width:50%;
    }

#profilnav {
  top:40px;
  min-width:210px;
  z-index:12;
  width:100%;
  height:calc(100% - 40px);
      /*z-index: 90;*/
    }

.stoffselect {
    font-size:18px;
    height:25px;
    width:45px;
}
.drpdown {
  height:30px;
  width:40px;
}

.sort {
  padding:5px;
      
      width:140px;
    }
 .searchblock {
  border-radius:5px;
  height:30px;
  max-width:150px;
 }

#search {
      height:30px;
    } 
#searchfield {
    position:fixed;
    z-index:50;
    top:45px;
    left:45%;
}
    
    .col-50 {
      display:block;
      width:100%;
    }
    .col-70 {
      display:block;
      width:100%;
      margin-top:6px;
    }
    .col-30 {
      display:block;
      width:100%;
      margin-top:6px;
    }
 /* ================================================================================================== 
               Dokumente                                                                               */


            
.mbig {
    font-size:25px;
    font-weight:bolder;
    }
            
.docinfobox {
    display:block;
    width:auto;
    margin-left:10px;
    margin-right:10px;
    min-width:230px;
    }

.docbox {
      height:40px;
      font-size:20px;
      display:inline-block;
      width:auto;
      justify-content: center;
      align-items: center;
      text-align:center;
      background-color: #fff;
      box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
      margin-right:15px;
      }




  }

/*================================ Tablett Style ========================================= */

@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Anpassungen für Tablets */
  .mid {
    font-size:24px;
  }

}