@font-face {
    font-family: BebasNeueRegular;
    src: url(BebasNeue.woff) format('woff'),
         url(BebasNeue.woff2) format('woff2'),

}

@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(roboto-v30-latin-100.woff2) format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(roboto-v30-latin-300.woff2) format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(roboto-v30-latin-regular.woff2) format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(roboto-v30-latin-700.woff2) format('woff2'); 
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
} 


body 	{
  display: grid;
  grid-template-columns: auto 0px; 
	width:100vw;
 /* height: 100%; */
  margin: 0;
  padding: 0;
  font-size: 1rem;
  background-color: rgb(54, 54, 57, 1) !important; 
  color: #ebac00;
  font-family:  Roboto, sans-serif;
  overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
}

/* ###########   SCHRIFTEN   ######################   */


h1 {
	font-size:		40px;
	color:			#eadabb;
  font-family:  Roboto, sans-serif;
  font-weight: 200;
  letter-spacing: 1px;
  word-spacing: 5px;
  margin-bottom:	0px; 
}


/* Unterüberschriften */
h2 {
  font-size: 45px;
  font-weight: 400;
  font-family: Roboto, sans-serif;
  margin-top: 5px;
  margin-bottom: 3px;
  color: #eadabb;
}
/* kleinste Unterüberschriften */
h3 {
  font-size: 30px;
  font-weight: 400;
  font-family: Roboto, Sans-Serif;
  margin-top: 5px;
  margin-bottom: 6px;
  letter-spacing: 2px;
  color:			#eadabb;
}

h4 		{
  font-size:		13px;
	color:			  #8f8572;;
	font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  word-spacing: 4px;
}


h5 		{
	font-size:		20px;
	color:			#ebac00;
	font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  word-spacing: 4px;
  margin-bottom:	3px;
}

h6 		{
	font-size:		20px;
	color:			#eadabb;
	font-family: Roboto, sans-serif;
	font-weight: 400;
  letter-spacing: 1px;
  word-spacing: 5px;
  margin-bottom: 8px;
}

b {
  color:#8f8572;
}

li {
  margin-left:10px;
}

p, 
li
{
  font-size: 14px;
  color:#8f8572;
  font-family: Roboto, sans-serif;
  font-weight: 400;
}
.dklgrau {
  color: #696865;
}
strong{
  font-size: 13px;
  color: #eadabb;
  font-family: Roboto, sans-serif;
  font-weight: 400;
}

span {
  color:	#ebac00;
}

.txt-orange {
  color:	#ebac00;
}
/* unterstrichene links text */
a {
 /* color:#eadabb;  */
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-weight: 400;
}

a:hover   {
  color: #ffffff;
}

table, tr {
  width: 100% !important;
}
td {
  width: auto !important;
  min-width: 50%;
}

.txt-left {
  text-align: left;
  vertical-align:middle;
  line-height: 20px; 
}
.txt-right {
  text-align: right;
  vertical-align:middle;
  line-height: 20px; 
}
.txt-center {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.titel-b {
  color: #eadabb;
}

textarea:focus, input:focus{ border: none; outline: none; }

*:focus {
  outline: none;
}

.warning {
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color:#c27070 !important;
  line-height: 1.5;
  padding: 0px;
  margin-bottom: 10px;
}
.none {
  display: none;
}
/* #############################################################################
Neu ab 2024 aus Mustervorlage  */

.main-page {
  display: flex;
  justify-content:center;
  flex-direction: column;
  align-items: center;
  max-width: 1500px;
}

div {
  padding: 0px 0px;
  width: 100%;
  height: 100%;
  /* boder auf 1px stellen um die Strukltur zu sehen  */
  border: 0px solid white;
  background-color: transparent;
  color: white;
 }
 .center {
  display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
}
.vertical-center {
  display: flex;
	align-items: center;
	justify-content: center;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-3 {
  opacity: 0.3;
}
  
.logo { 
  position: sticky;
  top: 0;
  grid-area: logo;
  z-index:600;
}

.header-title {
  position: sticky; 
  top: 0;
  grid-area: header-title;
  display: flex;
  align-items: center;
  flex-direction: row; 
  z-index:601;
  font-weight: 300;
}

.title1 {
  color: rgb(54, 54, 57, 1);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-weight: 600;
  background-color: #ebac00;
  padding: 5px 40px;
  margin: 10px 5px 5px 5px;
  border-radius: 2px;
  word-spacing: 2px;
}
.title2 {
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 1px;
  font-weight: 300;
  word-spacing: 2px;
}


.menu-toggle {
  position: sticky;
  top: 0;
  grid-area: menu-toggle;
  display: flex;
  justify-content: right;
  
}  


.menu-left {
  grid-area: menu-left;
  display: flex;
  justify-content: center;
 /* z-index: -1; */
}

.upload-image {
  grid-area: upload-image;
  padding: 10px 40px 40px 20px;
  background-color: #2D2D2E;
  min-height: 900px;
}


.container-big {
  display: flex;
  flex-direction: row;
}

.conainer-upload{
  display: flex;
  flex-direction: column;
}

.upload-window {
  min-width: 90%;
  min-height: 450px;
  background-repeat:no-repeat;

}

#pageContentTD {
  height: 100%;
}

.top {
  place-self:end;
  position:sticky;
  bottom:70px;
  margin-right:20px;
  margin-top:120vh;
  
  /* visual styling */

 
  text-decoration: none;
  padding: 2px;
  font-family: sans-serif;
  color: #fff;
  background: transparent;
  border-radius: 100px;
  white-space:nowrap;
  transition: all .3s ease-in-out;
}


.grid-container {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(40px, auto);
  gap: 0px;
  left: 0;
  grid-template-areas:
    "logo header-title header-title header-title header-title menu-toggle"
    "menu-left menu-left menu-left menu-left menu-left menu-left"
    "upload-image upload-image upload-image upload-image upload-image upload-image"
}

.image-holder {
  grid-area: image-holder;
  /* aspect-ratio: 1 / 1; */
  background-image: url("../images/no_image_bg.png");
  background-repeat: repeat;
  display: flex;
  height: 410px;
 /* align-items: center;
  justify-content: center; */
}
.imageHolder-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.pfeil-left {
  width:20px; 
  height: auto; 
/*  position:relative; 
  z-index:0; */
}
.pfeil-right {
  width:20px; 
  height: auto; 
  /* position:relative; 
 z-index:21; */
}
.image-editmenu {
  grid-area: image-editmenu;
  margin:0px;
  height: 100%;
}

.image-uploaded {
  grid-area: image-uploaded;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}
.uploaded-table {
  display: flex;
  flex-direction: column;
 /* justify-content: flex-end; */
  align-items: center;
  margin-right: 20px;
  height: auto;
  margin-top: 40px;
}

.image-title {
  grid-area: image-title;
  padding: 2px 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 28px;
  max-width: 95%;
  width: auto;
 /* background-color: rgba(160, 150, 120, 0.2);
  border-radius: 5px; */
  margin-top: -200px;
}


.grid-imagecontainer {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: repeat(auto-fit,minmax(20px,1fr));
 /* grid-auto-rows: minmax(40px, auto); */
  gap: 0px;
  left: 0;
  grid-template-areas:
    "image-uploaded image-holder image-holder image-editmenu"
    "image-uploaded image-title image-title image-editmenu";
}

p.imageTitle {
  font-size: 13px;
  /* color: #8f8572; */
  color:#000000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#activeImageHolder {
  background-color:transparent;
  transform: scale(0.8);
  
}

@media screen and (max-width: 1200px) {
  .grid-container {
    margin-top: 12px;
    max-width: 100%;
  } 
  .header-title {
    padding-top: 0px;
  }
} 

@media screen and (max-width: 930px) {
  .grid-container {
    margin-top: 12px;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(40px, auto);
    grid-template-areas:
      "logo header-title header-title header-title header-title menu-toggle"
      "menu-left menu-left menu-left menu-left menu-left menu-left"
      "upload-image upload-image upload-image upload-image upload-image upload-image";
  }
  .header-title {
    position: unset;
  }

 /* .upload-window {
    min-width: 96%;
  } */
  .container-upload{
    flex-direction: column;
  }
  .upload-image {
    padding: unset;
  }

  .grid-imagecontainer {
    display: grid;
    width: 100%;
    height: 1000px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: repeat(auto-fit,minmax(20px,1fr));
    /*grid-auto-rows: minmax(40px, auto); */
    grid-template-areas:
      "image-uploaded image-holder image-holder image-holder"
      "image-uploaded image-title image-title image-title"
      "image-uploaded image-editmenu image-editmenu image-editmenu"
  }
 #activeImageHolder {
    transform: scale(0.7);
  }  
  .image-holder {
    height: 350px;
  }
  .image-title {
    margin-top: -150px;
  }
} 

@media screen and (max-width: 767px) {
  .footer {
    justify-content: center;
  }
  .image-title {
    margin-top: -160px;
  }

} 

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

  .image-holder {
    height: 250px;
  }
  .grid-imagecontainer {
    grid-template-columns: 70px;
    padding-top: 20px;
    padding-left:10px;
  } 
  .image-title {
    margin-top: -250px;
  }

} 


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

  strong.imageTitle {
    position: relative;
    margin-top: -50px;
  }
}

/* ############################################################################# 
Neu ab 2024 aus Mustervorlage */

.section-1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center; 
}

.logo-img {
  width: auto;
  height: 45px;
  z-index: 603 !important;
  position: absolute;
}
.logo-placholder {
  position: absolute;
  display: flex;
  border-radius: 50% 50% 50% 50%;
  border: 0px;
  height: 3rem;
  width: 6rem;
  position: relative;
  top: 20px; 
  left:10vw;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  animation: logo-upanddown 2s alternate ease-in-out infinite;
  user-select: none;
  will-change: transform;
  z-index: 602 !important;
}
@keyframes logo-upanddown {
  0% {
    transform:translateY(-8px)
  }
  100% {
    transform:translateY(8px)
  }
}



/* ############################################################################# 
Mainpage ueberprueft*/

/* ################ Hamburger Menu ####################   */

.nav {
  background: #2D2D2E;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.7s, opacity 1s;
  transform: translateX(100%);
  opacity: 0;
  color: #eadabb;
 
  

}

.nav.show {
  display: flex;
  justify-content: center;
  align-items : flex-end;
  transform: translateX(0%);
  opacity: 1;
  padding-bottom: 100px;
}
.btn-hamburger {
  background: none;
  border: none;
  appearance: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  margin: 15px 80px 0px 40px;
}
/*
.nav1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: inherit;
}  */

.nav1 {
  display: unset;
  justify-content: unset;
  align-self: unset;
  display: grid;
  grid-template-rows:60px; 
  grid-template-columns: 25% 25% 25% 25%; 
  height: auto;
  gap:10px;
  padding-right: 15px;
}
.list-hamburger {
  width: 80%;
}
.hamburger {
  position: absolute;
  margin-left: auto;
  width: 28px;
  height: 20px;
}

.hamburger span {
  position: absolute;
  left: 0;
  background:   #96938c;
  width: inherit;
  height: 2px;
  transition: transform 0.5s, opacity 0.5s;
}

.top-line {
  top: 0px;
}

.center-line {
  top: 9px;
}

.bottom-line {
  bottom: 0px;
}

.top-line.active {
  transform: translateY(9px) rotate(45deg);
  background:   #EADABB;

}

.center-line.active {
  opacity: 0;
}

.bottom-line.active {
  transform: translateY(-9px) rotate(-45deg);
  background:   #EADABB;
}

.hamburger-items {
  padding: 30px;
  text-align: center;
  width: 80%;
  min-width: 95%;
  color: #8f8572;
  font-family: Roboto, sans-serif;
 }

.hamburger-items:hover {
  background-color: rgb(79, 79, 82);
 } 

 /* .nav1 a {
  color:#EADABB;
  padding:  40px 0px;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: 2px;
  border-bottom: 1px solid rgb(234,218,187,0.5);
 } */

 .nav1 a {
  border: none;
  padding:  20px 0px;
  font-size: 1rem;
  letter-spacing: 1px;
  border-bottom: 0px;
  width: auto;
  /* background-color:#46464A; */
  border-radius: 8px;
  border: solid 1px;
  color: #8f8572;
 }

 .nav1 a:hover {
  color:#fdf5e5;
 }

 /* .nav1 a:last-child {
	border: none;
} */

/* ###################  Uploader 2024 ############################################## */

.upload-main {
  padding: 0px;
  margin: 0;
}
.upload-zone {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
  border-radius: 0px;
  background-color: #2D2D2E;
  padding-right: 15px;
}

.upload-filesign-container {
  display: flex;
  justify-content: right;
  padding-right: 10%;
  padding-top:5%;
  margin:  0px 0 -30px 0;
}

.upload-filesign-container img {
  width: 80px;
  height: auto;
  margin: 0px 0px;
}

#uploadBlock {
  padding: 0px;
  display: flex;
	justify-content: center;
  flex-direction: column;
}

.upload-choose {
  padding: 10px;
  margin-bottom: 30px;
}

.upload-process {
  padding: 10px;
  margin-bottom: 30px;
}

input#file-upload[type="file"] {
  display: none;
}
.file-upload {
  border: 1px solid #818181;
  border-radius: 50%;
  padding: 6px 12px;
  cursor: pointer;
  width: 300px;
  height: 300px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
  margin-left: -200px;
}

.btn-upload {
  background-color: #58585e;
  color: #ebdbbd;
  cursor: pointer; 
  height: 60px;
  border: none;
  border-radius: 35px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
  font-weight: 800;
  min-width: 250px;
  padding: 5px 20px;
  margin: 5px;
  letter-spacing: 1px;
}
.btn-upload:hover {
  background-color: #46464A;
}

.upload-btn-img {
  height: 30px;
  width: auto;
  margin-bottom: -10px;
}


/*  E N D  ###################  Uploader 2024 ############################################## */


/* ################Testuploader  3a ###############################*/
#uploadstart {
  visibility: hidden;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

#filesearch2 {
  display: none;
}

.upload-box {
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 500px;
} 
.upload-inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  /*position: absolute;*/
} 
.upload-btn {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 350px;
  height: 100px;;
  padding: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid;
  border-color: #EADABB;
  border-radius: 50px;
  background-color: rgba(45, 45, 45, 0.7);
  margin: 10px;
} 
.upload-btn:hover {
  background-color:rgb(94, 91, 89);
  color: #ffffff;
  transition: all 0.3s ease;
  border-color: #ffffff;
} 

.upload-btn p {
  font-size: 30px;
  font-weight: 200;
  color: #EADABB; 
}
.upload-btn:hover p {
  color: #ffffff; 
}
.upload-btn-box {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
} 

.upload-btn2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 350px;
  height: 100px;;
  padding: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid;
  border-color: #ebac00;
  border-radius: 50px;
  background-color: #ebac00;
  margin: 10px;
} 
.upload-btn2:hover {
  background-color:rgb(94, 91, 89);
  color: #ffffff;
  transition: all 0.3s ease;
  border-color: #ffffff;
} 

.upload-btn2 p {
  font-size: 30px;
  font-weight: 400;
  color: #2D2D2E; 
}
.upload-btn2:hover p {
  color: #ffffff; 
  font-weight: 200;
}

.upload-img-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -10px;
  align-items: center;
  margin-top:100px;
/*  position: relative; */
  /* z-index: -1; */
} 
.upload-img-box {
  width: 200px;
  padding: 0 10px;
  margin-bottom: 12px;
  background-image: url("../images/nopreview.webp");
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
} 
.upload-img-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
  visibility: hidden;
} 
.upload-img-close:after {
  content: "✖";
  font-size: 14px;
  color: white;
  visibility: hidden;
}

.img-bg-upload {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  position: relative;
  padding-bottom: 100%; 
  border: 0px solid;
  border-radius: 12px;
  box-shadow: 0 0px 6px rgba(0, 0, 0, .16), 0 0px 2px rgba(0, 0, 0, .23); 
}
/* END ################Testuploader ###############################*/



/*  ############### Hauptmenue #######################################*/

.menu-general {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  max-width: 600px;
  gap: 70px;
}
/*
.menu-btn-link {
  display: block;
  width: 90px;
  height: 90px;
}
  gross
.menu-btn-link {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
}
.menu-btn-1,
.menu-btn-2,
.menu-btn-3,
.menu-btn-4 {
  width: 50px;
  height: 50px;
  margin-bottom: 40px;
}
  gross
.menu-btn-1,
.menu-btn-2,
.menu-btn-3,
.menu-btn-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #46464A;
  box-shadow: 0 0px 6px rgba(0, 0, 0, .16), 0 0px 2px rgba(0, 0, 0, .23);
  background-image: url("../images/icon_svg/upload_dkl.webp");
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 45%;
  margin-bottom: 50px;
}

.menu-btn-label {
  font-size: 12px;
  font-size: 11px;
  letter-spacing: 1px;
  margin-top: 85px;
} 
  gross
.menu-btn-label {
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 125px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #8f8572;
}
  

*/
.menu-btn-link {
  display: block;
  width: 90px;
  height: 90px;
  position: absolute;
}

.menu-btn-0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.menu-btn-1,
.menu-btn-2,
.menu-btn-3,
.menu-btn-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #46464A;
  box-shadow: 0 0px 6px rgba(0, 0, 0, .16), 0 0px 2px rgba(0, 0, 0, .23);
  background-image: url("../images/icon_svg/upload_dkl.webp");
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 45%;
  margin-bottom: 40px;
}
.menu-btn-2 {
  background-image: url("../images/icon_svg/bearbeiten_dkl.webp");
}

.menu-btn-3 {
  background-image: url("../images/icon_svg/preis_dkl.webp");
}

.menu-btn-4 {
  background-image: url("../images/icon_svg/info_dkl.webp");
  background-size: 50%;
}

.menu-btn-1:hover,
.menu-btn-2:hover,
.menu-btn-3:hover,
.menu-btn-4:hover  {
  background-color:rgb(94, 91, 89);
 /* box-shadow: inset 2px 2px 3px 3px rgba(0,0,0,0.65); */
  background-image: url("../images/icon_svg/upload_hell.webp");
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 54%;
}

.menu-btn-2:hover {
  background-image: url("../images/icon_svg/bearbeiten_hell.webp");
}

.menu-btn-3:hover {
  background-image: url("../images/icon_svg/preis_hell.webp");
}

.menu-btn-4:hover {
  background-image: url("../images/icon_svg/info_hell.webp");
  background-size: 59%;
}

.menu-btn-label {
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 90px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #8f8572;
}

 .menu-btn-unset {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: 0;
}  

/* BIS HIER Menue ############################################*/

/* ################# Preis kalkulator 2024 ##################### */

.calculator {
  padding:50px 0px;
}

.price-zone {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
  border-radius: 30px;
  background-color: #2D2D2E;
  padding: 60px 20%;
}

.price-calc-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.price-calc-menu {
  margin-bottom: 15px;
}
#input_media,
#input_mounting,
#input_lamination
 {
  background-color: #4b4946;
  width: 250px;
  height: 32px;
  font-size: 16px;
  color:			#eadabb;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 8px;
  margin-right: 10px;
  padding:5px 10px;
  border: 0px;
}
#input_size_1,
.input_size_1
 {
  background-color: #4b4946;
  font-size: 16px;
  color:			#eadabb;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  width: 90px !important;
  height: 32px;
  border-radius: 8px;
  margin-right: 10px;
  padding:5px 10px;
  text-align: right;
  border: 0px;
}

#input_size_2,
.input_size_2
 {
  background-color: #4b4946;
  font-size: 16px;
  color:			#eadabb;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  width: 90px !important;
  height: 32px;
  border-radius: 8px;
  margin-right: 10px;
  margin-left:12px;
  padding:5px 10px;
  text-align: right;
  border: 0px;
}

#infoBlock {
  display: none;
  height: 111px; 
  width: 220px;
  margin: 0 40px 0 40px;
  background-color:transparent;
  display: block; 
}
#outputTable {
  background-color: #46464A;
  display: none;
  height: 150px; 
  width: 200px;
  border-radius: 16px;
  text-align: center;
  margin: 0 40px 0 40px;
  padding-top: 40px;
}
/* #notAvailable {
  background-color: #2D2D2E;
  display: none;
  height: 200px; 
  width: 220px;
  border-radius: 16px;
  text-align: center;
  margin: 0 40px 0 40px;
} */
.notavailable-title {
  font-size: 15px;
  color:			rgb(248, 197, 197);
  font-family:  Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#reasonText {
  font-size: 14px;
  color:			rgb(247, 219, 219);
  font-family:  Roboto, sans-serif;
  font-weight: 400;
}
/* END  Preis kalkulator 2024 ##################### */

/* ####### Image Edit Block ################## */

.quantity-txt {
  grid-area: AA;
  padding-left: 10px;
}
.quantity-number {
  grid-area: BB;
}
.paper-txt {
  grid-area: DD;
  padding-top: 0.5em;
  padding-left: 10px;
}
.paper-choose {
  grid-area: EE;
}
.size-txt {
  grid-area: FF;
  padding-top: 0.5em;
  padding-left: 10px;
}
.size-choose {
  grid-area: GG;
}
.breite-number {
  grid-area: HH ;
}
.breite-units {
  grid-area: II;
  height: 100%;
} 
.hoehe-number {
  grid-area: JJ ;
}.hoehe-units {
  grid-area: KK;
  height: 100%;
}
.resolution-txt { 
  grid-area: LL;
} 
.resolution-number {
  grid-area: MM;
} 
.resolution-unit {
  grid-area: NN;
} 
.only-price {
  grid-area: OO;
  display: flex;
  gap:10px;
  padding-left: 10px;
}
.mounting-txt { 
  grid-area: PP;
  padding-top: 0.5em;
  padding-left: 10px;
}
.mounting-choose { 
  grid-area: RR;
} 
.suspension-txt { 
  grid-area: SS;
  padding-top: 0.5em;
  padding-left: 10px;
} 
.suspension-choose { 
  grid-area: TT;
}
.notavailable { 
  grid-area: UU;
  background-color: #D53617 ;
  height: 50px;
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  margin-top: 0rem;
}
#notAvailable {
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #c27070;
  line-height: 1.5;
  padding: 0px;
  margin-bottom: 10px;
}
.icc-txt {
  grid-area: VV;
  padding-top: 0.5em;
  padding-left: 10px;
}
.icc-profil {
  grid-area: WW;
  text-align: left !important;
}

.print-block {
  padding: 2rem 0.6rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(16, 26px);
    grid-template-areas:
      "AA AA AA BB BB BB"
      "DD DD DD DD DD DD"
      "EE EE EE EE EE EE"
      "FF FF FF FF FF FF"
      "GG GG GG GG GG GG"
      "HH HH II JJ JJ KK"
      "LL LL LL MM MM NN"
      "PP PP PP PP PP PP"
      "RR RR RR RR RR RR"
      "SS SS SS SS SS SS"
      "TT TT TT TT TT TT"
      "VV VV VV VV VV VV"
      "WW WW WW WW WW WW"  
      "UU UU UU UU UU UU"
      "UU UU UU UU UU UU"
      "OO OO OO OO OO OO";
    gap: 4px;
    width: 100%;
    min-width: 220px;
  }

.uploadedImages {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  height: auto;
  margin-bottom: 10px;
  max-width: 180px;
  gap: 2px;
}
/*.uploadedImages {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  height: auto;
  margin-bottom: 12px;
  max-width: 714px;
  gap: 12px;
}*/



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

  .resolution-txt { 
    visibility: hidden;
  } 

  .print-block {
  padding: 2rem 1rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, 30px);
    grid-template-areas:
      "AA AA BB XX XX XX"
      "DD DD EE EE EE EE"
      "FF FF GG GG GG GG"
      "HH II JJ KK MM NN"
      "PP PP RR RR RR RR"
      "SS SS TT TT TT TT"
      "VV VV WW WW WW WW"
      "UU UU UU UU UU UU"
      "UU UU UU UU UU UU"
      "OO OO OO OO LL LL";
    gap: 6px;
    min-width: 220px;
    max-width: 70%;
    margin-left: -20px;
  } 
  .paper-txt {
    padding-top: unset;
  }
  .size-txt {
    padding-top: unset;
  }
  .mounting-txt { 
    padding-top: unset;
    line-height: 30px;
  }
  .suspension-txt { 
    padding-top: unset;
    line-height: 30px;
  } 
  .icc-txt {
    padding-top: unset;
    line-height: 30px;
  }
  .breite-units {
    text-align: center !important;
  }
  .uploaded-table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0px;
    padding: 10Px;
  }
  .uploadedImages {
    max-width: 930px;
    gap: 2px;
    margin-left: -2px;
  }
  .upload-zone {
    height: auto;
  }

}  

/* ################  Pricebox unter fixed bei Step2 ####################  */
.pricebox-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  height: auto;
  width: 100%;
  bottom: 0px;
  left: 0px;
  padding: 10px 80px;
  position: fixed;
  background-color:  rgb(0, 0, 0, 0.7);
  z-index: 300;
  border: 0px !important;
}
.pricebox-btninner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  height: auto;
  width: 100%;
  max-width: 1300px;
}
.shoppingBasket2 {
  height: auto;
  width: 400px !important;
 /* display: grid;
  grid-template-columns: repeat(4, 1fr); */
  display: flex;
 /* flex-direction: row;
  justify-content: flex-start;
  align-content: center; 
  gap: 10px; */
}
.shoppingBasket-part1,
  .shoppingBasket-part2 {
  display: flex;
  flex-direction: row;
  }
  .shoppingbasket-h5 {
    letter-spacing: 0px;
    word-spacing: 1px;
  }
@media screen and (max-width: 767px) {
  .pricebox-bottom {
    padding: 10px 20px;
  }
  .shoppingBasket2 {
    max-width: 200px;
  }
  .shoppingbasket-h4 {
    font-size: 12px;
  }
  .shoppingbasket-h5 {
    font-size: 14px;
  }
  .shoppingBasket2 {
    flex-direction: column;
  }
  .uploadedImages {
    max-width: 100%;
    gap: 8px;
    margin-left: -2px;
  }
}
@media screen and (max-width: 400px) {
  .pricebox-bottom {
    padding: 10px 5px;
  }
  .shoppingBasket2 {
    max-width: 160px;
  }
 
}

/* END ##########  Pricebox unter fixed bei Step2 ####################  */


#nextStepImg {
  cursor: pointer;
  visibility: hidden;
  background-color: #ebac00;
  padding:  7px 20px 8px 45px;
  width: auto;
  height: auto;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  word-spacing: 5px;
  font-size: 18px;
  color: #2D2D2E;;
}
.next-step {
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: center;
}
.next-arrow {
  line-height: 3px;
  margin-left: 25px;
}



.input-size,
.readAndWrite
 {
  background-color: #4b4946;
  width: 100%;
  height: 25px;
  font-size: 13px;
  color:			#eadabb;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 5px;
  margin-right: 10px;
  padding:5px 10px;
  border: 0px;
  text-align: right;
}

.readOnly {
  background-color: #4b4946;
  width: 100%;
  height: 25px;
  font-size: 13px;
  color:			#18181a;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 5px;
  margin-right: 10px;
  padding:5px 10px;
  border: 0px;
  text-align: right;
} 
.readOnly2 {
 /* background-color: #4b4946; */
  width: 100%;
  height: 25px;
  font-size: 13px;
  color:			#18181a;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 5px;
  margin-right: 0px;
  padding:5px 10px;
  border: 0px;
  text-align: right;
} 


.select-media-1
 {
  background-color: #4b4946;
  width: 100%;
  height: 25px;
  font-size: 12px;
  color:			#eadabb;
  font-family:  Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 5px;
  margin-right: 0px;
  padding:5px 10px;
  border: 0px;
}


/* END  Image Edit Block ##################### */

/* ############# Image Holder - Edit ################*/

.image-aktuell {
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
}


/* END - Image Holder - Edit ################*/

/* ########### Image Edit Accordion MENU ############ */

.acc { width: 300px; margin: 0px; }
.acc .choice {
   display: grid;
   grid-template-columns: 9fr 1fr;
   grid-template-areas: "name action"
						"panel panel";
  height: auto;
}

.acc label:nth-child(odd) { grid-area: name;}
.acc label:nth-child(even) { grid-area: action;}
.acc .panel { grid-area: panel; }
.acc input[name="ac"] { display:none }

.acc .panel {
  margin: 0;
  height: 0;
  overflow:hidden;
  background-color: rgb(54, 54, 57, 1);
  line-height: 1.5;
  padding: 1rem 0.2rem;
  box-sizing: border-box;
  transition: 0.5s;
}

.acc .panel p { margin-top:0 }

.acc input.open:checked~.panel {
  height: auto;
  padding: 1rem;
  transition: 0.5s;
}


.acc label {
  cursor: pointer;
  background-color: rgb(54, 54, 57, 1);
  border-bottom: 2px solid #2D2D2E;
  padding: 1em;
  width: 100%;
  font-weight: 400;
  font-size: 1.2em;
  box-sizing: border-box;
  z-index: 100;
  color: #8f8572;
}

.acc input.open:checked ~ label { background-color:  #ebac00; color: #2D2D2E; }
.acc label:nth-child(odd)::after  { 
   content: "+";
   color: white;
   float:right;
   font-size: 1.2em;
   margin-top:0;
}
.acc input.open:checked ~ label:nth-child(odd)::after { content: ""; }
.acc input.open:checked ~ label.close::after { content: "– "; font-size: 1.2em; }

/* END - Image Edit Accordion MENU  ################*/

/* ####################- User Registration ################*/

.step3 {
  padding-right: 30px;
}

.registerBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#userRegisterBlock,
#deliveryAndSummeryBlock  { 
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #2D2D2E;
  border:0px;
  border-radius: 30px;
  padding: 20px;
  width: auto;
  margin: 0 0px 20px 30px;
  }
#logInBlock {
  height: auto;
  max-width: 600px;
}
#logInBlock h6,
#deliveryOptionContainer h6,
#payOptionContainer h6,
#endSummaryTableContainer h6 {
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(54, 54, 57, 1);
}
#endSummaryTableContainer h3 {
  color: #ebac00;
  font-size: 25px;
  font-weight: 800;
}
#loginTable {
  width: auto;
}
#loginTable input {
  background-color: #4b4946;
  width: 100%;
  height: 30px;
  font-size: 14px;
  color: #eadabb;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 8px;
  margin: 0px 10px 8px 0px;
  padding: 5px 10px;
  border: 0px;
  text-align: right;
}
.smallText {
  font-size: 15px;
  color: #8f8572;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  word-spacing: 4px;
  line-height: 30px;
}

/* END -  User Registration  ################*/


/* ################## Step 4 Lieferoption usw. ###################### */
#deliveryOptionsBlock,
#endSummaryTableContainer {
  max-width: 600px;
  margin-top: 20px;
}
#deliveryOptionContainer td,
#payOptionContainer td {
  color:#8f8572;
  padding: 5px;
  min-width: unset;
  font-size: 15px;
  /* line-height: 30px; */
  vertical-align: middle;
}
#deliveryOptionContainer h4,
#payOptionContainer h4 {
  margin-top: 20px;
  margin-bottom: 14px;
  color: #eadabb;
}

#extraFldTable {
  padding: 17px 5px 0px 5px;
  border-radius: 8px;
  margin-bottom: 15px;
}
#extra_messageToLab,
#extra_messageToLab,
#extra_extraName,
#extra_extraAdress,
#extra_extraPostadress,
#extra_extraPostadress,
#extra_courierAddress,
#extra_courierName {
width: auto;
float: right;
width: 100%;
min-width: 320px;
background-color: #4b4946;
/* background-color: rgb(70, 70, 80, 1); */
height: 32px;
font-size: 14px;
color:			#eadabb;
font-family:  Roboto, sans-serif;
font-weight: 400;
border-radius: 8px;
margin-right: 10px;
margin-left: 10px;
padding:5px 10px;
border: 0px;
}

#extra_messageToLab {
  display:inline-block;
}


/* END -  Step 4 Lieferotion ###################### */

/* ###############  Step 4  confirmBlock ###################### */
.confirmTable {
  display: flex;
  align-items: center;
  width: 100%;  
  margin: 0px 0px 20px 20px;
  padding: 10px 10px 10px 20px;
  gap: 0px;
  width: auto;
}

.confirmBlock {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%; 
  padding: 2rem; 
  gap: 0px;
}
.confirmHeader1 {
  grid-area: A1;
}
.confirmHeader2 {
  grid-area: B1;
}
.confirmHeader3 {
  grid-area: C1;
  text-align: right;
}
.confirmHeader4 {
  grid-area: D1;
  text-align: right;
}
.confirmHeader5 {
  grid-area: E1;
  text-align: right;
}
.confirmHeaders {
  padding: 0rem;
  display: grid;
  grid-template-columns: 30% 40% 10% 10% 10%;
  grid-template-rows: repeat(1, 30px);
  grid-template-areas:
    "A1 B1 C1 D1 E1";
  /*  "A1 B1 B1 B1 B1 C1 D1 E1";  */
  gap: 0px;
  width: 100%;
  margin-bottom: 5px;
  border-bottom: 1px dotted #5c5549;
}
.confirmDataA2 {
  grid-area: A2;
  white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
  padding-right: 5px;
}
.confirmDataB2 {
  grid-area: B2;
  visibility: hidden;
  height: 1px;
  font-size: 1px !important;
  padding: 0px;
  margin: 0px;
}
.confirmDataC2 {
  grid-area: C2;
}
.confirmDataD2 {
  grid-area: D2;
  visibility: hidden;
  height: 1px;
  font-size: 1px !important;
  padding: 0px;
  margin: 0px;
}
.confirmDataE2 {
  grid-area: E2;
}
.confirmDataF2 {
  grid-area: F2;
  text-align: right;
}
.confirmDataG2 {
  grid-area: G2;
  text-align: right;
}
.confirmDataH2 {
  grid-area: H2;
  text-align: right;
}
.confirmDataI2 {
  grid-area: I2;
  visibility: hidden;
  height: 1px;
  font-size: 1px !important;
  padding: 0px;
  margin: 0px;
}
.confirmDataJ2 {
  grid-area: J2;
}
.confirmDataK2 {
  grid-area: K2;
  text-align: right;
}
.confirmDataL2 {
  grid-area: L2;
  text-align: right;
}
.confirmDataM2 {
  grid-area: M2;
  text-align: right;
}
.confirmDataN2 {
  grid-area: N2;
  visibility: hidden;
  height: 1px;
  font-size: 1px !important;
  padding: 0px;
  margin: 0px;
}
.confirmDataO2 {
  grid-area: O2;
}
.confirmDataP2 {
  grid-area: P2;
  text-align: right;
}
.confirmDataQ2 {
  grid-area: Q2;
  text-align: right;
}
.confirmDataR2 {
  grid-area: R2;
  text-align: right;
}

.confirmData {
  padding: 0rem;
  display: grid;
  grid-template-columns: 30% 40% 10% 10% 10%;
  grid-template-rows: repeat(4, 20px);
  grid-template-areas:
    "A2 C2 F2 G2 H2"
    "A2 E2 F2 G2 H2"
    "A2 J2 K2 L2 M2"
    "A2 O2 P2 Q2 R2"; 
  gap: 0px;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 3px;
  border-bottom: 1px dotted #5c5549;
}
.confirmText {
  font-size: 15px;
  color: #8f8572;
  font-family: Roboto, sans-serif;
  font-weight: 400;
}
.confirmTextRed {
  font-size: 15px;
  color: #e20303;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  text-align: left;
  overflow: visible;
}
.priceTotal1 {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  display: none;
}
.priceTotal2 h4 {
  text-align: right;
  line-height: 28px;
}
.priceTotal3 h6 {
  text-align: left;
  padding-left: 25px;
}

#endSummaryTableContainer td,
.contfirmationTableHeaderRow td {
  min-width: 80px !important;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  color: #8f8572;
  font-size: 15px;
}

#acceptBlock { 
  padding: 30px 40px 50px 30px;
  min-height: 500px; 
}

.thanksBlock {
  max-width: 600px;
}
.thanksBlock h3 {
  margin-bottom: 30px;;
}
.thanksBlock h5 {
  margin-bottom: 15px;
  margin-top: 30px;
}
/* END -  Step 4  confirmBlock ###################### */


@media screen and (max-width: 600px) {
  .menu-btn-label {
    margin-top: 85px;
  }
  .step3 {
    padding-right: 10px;
  }
  #userRegisterBlock,
  #deliveryAndSummeryBlock  { 

  border-radius: 0px;
  padding: 10px;
  width: auto;
  margin: 0 0px 0px 0px;
  }
  #extraFldTable {
    padding: 0px;
    border-radius: 0px;
    margin-bottom: 0px;
  }
  #extra_messageToLab,
  #extra_messageToLab,
  #extra_extraName,
  #extra_extraAdress,
  #extra_extraPostadress,
  #extra_extraPostadress,
  #extra_courierAddress,
  #extra_courierName {
  width: 100%;
  min-width: 200px;
  margin: 0px;
  padding:5px 10px;
  border: 0px;
  }
}

/*END Delivery Block kpl. 600px */
/* Darker background on mouse-over */


.menu-1 {
  position: sticky;
  top: 20px;
}


/* kleiner dunkler Text */


c {
  color:#4f4f4f;
  font-size: 11px;
  font-weight: normal;
}



#uploaderDiv {
  font-size: 11px;
  background: #000000;
    border: 2px dotted #1e1e1e;
    color: #ea7400;
    width: 300px ;
    height: 430px;
    padding: 10px;
    margin: 0px 0px 50px 10px;
    
  
}



.upload-loader {
  display:flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.7);
}


@media screen and (max-width: 1200px) {
 .title1 {
  font-size: 1rem;
  }
 .title2 {
  font-size: 1.5rem;
  }
  .price-zone {
    padding: 40px 10%;
  }
  #outputTable {
    margin: 0 40px 40px 40px;
  }

  .upload-image {
    padding: 10px 20px 40px 0px;
  }
  .print-block {
    padding: 1.2rem 0.2rem;
  }
  .upload-zone {
    padding-right: 0px;
  }
}
@media screen and (max-width: 930px) {


  .price-calc-main {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
  .image-editmenu {
    display: flex;
    justify-content: center;
    align-items: flex-s;
    margin-top: -260px;
  } 
  .upload-zone {
    margin-left:0px;
  }
  .confirmTable { 
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
  }
  .confirmBlock {
    padding: 2rem 0.5rem; 
    margin: 0.5rem 0.5rem 0.5rem 2rem;
  }
}
@media screen and (max-width: 767px) {
  .menu-general {
    gap: 50px;
    padding-top: 20px;
  }
  .title1 {
  font-size: 1rem;
  letter-spacing: 1px;
  }
  .title2 {
  font-size: 1.5rem;
  letter-spacing: 1px;
  }
  .logo-img {
    height: 30px;
  }
  .logo-placholder {
    height: 3rem;
    width: 4rem;
    top: 5px;
  }
  .menu-btn-link {
    display: block;
    width: 90px;
    height: 90px;
  }
  .menu-btn-1,
  .menu-btn-2,
  .menu-btn-3,
  .menu-btn-4 {
    width: 50px;
    height: 50px;
    margin-bottom: 40px;
  }
  .menu-btn-label {
    font-size: 12px;
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 85px;
  }
  .upload-filesign-container img {
    width: 60px;
  }
  .upload-btn,
  .upload-btn2 {
    width: 250px;
    height: 80px;;
    padding: 5px;
    margin: 10px;
    border-radius: 40px;
  }
  .upload-btn-box {
    margin-bottom: 0px;
  }
  .upload-btn p
  .upload-btn2 p {
    font-size: 25px;
  }
  .upload-img-box {
    width: 120px;
    padding: 0 6px;
  } 

  .upload-img-wrap {
    margin-top:35px;
  }
  .upload-zone,
  .price-zone {
    margin-top:0px;
    border-radius: unset;
  }

  .btn-hamburger {
    margin: 15px 20px 0 0 ;
  }

  .nav1 a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
  }
  .upload-image {
    padding: 0px;
  }
  
  #activeImageBorder {
    max-width: 83%;
  
  }
  .print-block {
    padding: 2rem 1rem;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(10, 30px);
      grid-template-areas:
        "AA AA BB XX XX XX"
        "DD DD EE EE EE EE"
        "FF FF GG GG GG GG"
        "HH II JJ KK MM NN"
        "PP PP RR RR RR RR"
        "SS SS TT TT TT TT"
        "VV VV WW WW WW WW"
        "UU UU UU UU UU UU"
        "UU UU UU UU UU UU"
        "OO OO OO OO LL LL";
      gap: 4px;
      min-width: 300px;
      max-width: 85%;
      margin-left: -10px;
    }
    .grid-imagecontainer {
    min-height: 1000px;
    }
    .image-editmenu {
      margin-top: -320px;
    }
}

@media screen and (max-width: 600px) {
  h3 {
    font-size: 22px;
  }
  #pageContentTD {
    height: 120%;
  }
  #endSummaryTableContainer h3 {
    font-size: 22px;
  }
  .grid-container {
    margin-top: 0px;
  }
  
  .title1 {
  font-size: 0.7rem;
  margin-top: 12px;
  padding: 4px 15px;
  font-weight: 600;
  }
  .title2 {
  font-size: 1rem;
  margin-bottom: 14px;
  }
  .menu-left {
    margin-bottom: -10px;
  }
  .logo-img {
    height: 25px;
    margin-right: 20px;
  }
  .logo-placholder {
    left: 5vw;
  }
  .menu-general {
    padding-top: 5px;
    margin: 0 10px;
  }

  #acceptBlock {
    padding: 15px !important;
    min-height: 200px;
  }

  #activeImageHolder {
    transform: unset;
    transform: scale(0.5) !important;
  }
  
  .price-zone {
    padding: 20px 15%;
  }
  .calculator {
    padding:20px 0px;
  }
  #infoBlock {
    height: auto;
  }
  .print-block {
    max-width: 100%;
    padding: 0px 20px 20px 5px;
    margin: 0px;
  }

  .grid-imagecontainer {
    grid-template-columns: repeat(auto-fit,minmax(20px,1fr));

    padding-top: 10px;
    padding-left: 0px;
  }
  .uploaded-table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0px;
    padding: 10px 0px;
  }
  .pfeil-left,
  .pfeil-right {
    width: 10px;
  } 
  .nav.show {
    padding-top: 70px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top:95%;
    display: unset;
  }
  .list-hamburger {
    width: 100%;
  }
  .hamburger-items {
    padding: 10px;
    text-align: center;
    width: auto;
   /* min-width: 120px;*/
   }
  .nav1 {
   /* display: unset;
    justify-content: unset;
    align-self: unset;
    display: grid; */
    grid-template-rows:40px; 
   /* grid-template-columns: 50% 50%; */
    height: auto;
    gap:5px;
  }

  .nav1 a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0px;
    padding: unset;
     } 
     .confirmBlock {
      padding: 2rem 0.5rem; 
      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
    .confirmText,
    .smallText {
      font-size: 12px;
    }
    .confirmHeaders {
      grid-template-columns: 30% 40% 15% 15%;
      grid-template-areas:
        "A1 B1 C1 E1";
    }
    .confirmData {
      grid-template-columns: 30% 40% 15% 15%;
      grid-template-areas:      
        "A2 C2 F2 H2"
        "A2 E2 F2 H2"
        "A2 J2 K2 M2"
        "A2 O2 P2 R2"; 
    }
    .confirmHeader4,
    .confirmDataG2,
    .confirmDataL2 {
      visibility: hidden;
    }
    .image-editmenu {
      margin-top: -450px;
      padding-right: 10px;
    }
    
.input-size,
.readAndWrite {
  letter-spacing: 0px;
  margin-right: 10px;
  padding:5px 5px;
}
.readOnly {
  letter-spacing: 0px;
  margin-right: 10px;
  padding:5px 5px;
  border: 0px;
} 
.readOnly2 {
  letter-spacing: 1px;
  border-radius: 5px;
  margin-right: 0px;
  padding:5px 5px;
} 
}

@media screen and (max-width: 400px) {
  .image-editmenu {
    width: 100%;
  }
  .menu-general {
    gap: 32px;
  }
  .print-block {
    max-width: 98%;
  }
  .image-title {
    margin-top: -250px;
  }
  .image-editmenu {
    margin-top: -450px;
  }

}
/* #######################  loader Page Dimmer ##############  */
.loader {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  background: #ebac00;
  border-radius: 50%;
  animation: l1 3s infinite linear;
}
@keyframes l1{
  12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
  25%   {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
  37.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
  50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
  62.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
  75%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
  87.5% {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
}
.loader-txt {
  margin-bottom: 4rem;
}
.loader-div {
  padding: 3rem;
  height: 50px;
  width: 100%;
  text-align: center;
}
.nothing {
  height: 1px !important;
  width: 1px !important;
  padding: 0px;
  margin: 0px;  
}


/* ############   Accordion Beginn ##############################*/
/* Das Accordion */
.accordion article {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 0 auto;
  padding: 0px 0 0 0;
}

.accordion h4 {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  line-height: 25px;
  font-size: 16px;
  word-spacing: 3px;
  color: #8f8572;
}

  
.accordion div {
  width: 60%;
  max-width: 1000px;
  margin: 4% auto 6% auto;
  padding: 0px 0 0 0;
}

.left-space {
  margin: 10px 0 0 15px;
}

.ud_active {
  background: #ebac00;
  padding: 5% 0 5% 11%;
  color: #2D2D2E;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 1.0em;
}
dt {
  transition: all 300ms;
  -webkit-transition: all 300ms;
}

dt,
dd {
  width: 100%;
  float: left;
  padding: 3% 2% 3% 9%;
  margin: 0;
}
dt {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  background: #2D2D2E;
  color: #8f8572;
  text-transform: uppercase;
  border-top: 1px solid rgb(58, 58, 58);
  cursor: pointer;
}
dt:first-child {
  border-top: none;
}
dt:hover {
  background: #ebac00;
  color:#2D2D2E;
  letter-spacing: 2px;
}

dt:before {
  font-family: Roboto, sans-serif;
  font-weight: 200;
  color: #ebac00;
  font-size: 40px;
  position: absolute;
  margin-top: -17px;
  content: '+ ';
  margin-left: -35px;
  content: '+ '; /* Instead of Triangle closed */
}
.ud_active:before {
  display: none;
  }
dd {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  background: #2D2D2E;
  line-height: 25px;
  font-size: 16px;
  word-spacing: 3px;
  color: #999;
  display: none;
  padding: 5% 7%;
}

@media screen and (max-width: 600px) {
  .accordion h4 {
    font-size: 14px;
    letter-spacing: unset;
    word-spacing: unset;
  }
  .accordion div {
    width: 70%;
  }

}

@media screen and (max-width: 400px) {
  .accordion div {
    width: 70%;
    margin: 5% auto 10% auto;
  }
  dt,
  dd {
  padding: 5% 2% 4% 4%;
}
}

 /* End Accordion ######################################################## */

 .test { 
  color: red;
 }

 @media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box {background:url('images/box-bg@2x.png') no-repeat top left;}
}