@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* Für 4K Monitore (3840x2160) */
/* Default styles (für WQHD - 2560x1440) */
/* Für Full HD Monitore (1920x1080) */
/* Für HD Monitore (1366x768) */
/* Für Tablets/Kleine Bildschirme (max-width: 1024px) */
/* Für Smartphones (max-width: 768px) */

 /* 
 justify-content: center Zentriert Elemente horizontal entlang der Hauptachse bei Verwendung von display: flex.
 align-items: center Zentriert Elemente vertikal entlang der Querachse in einem Flexbox-Container.
 text-align: center Zentriert Inline-Elemente oder Text innerhalb eines Block-Elements.
*/

/* ------------------------------------------------------
  DEBUGGING SECTION ++
------------------------------------------------------- */

/* #feedbackContainer *{
  outline: 4px solid blue !important;
} */




/* ------------------------------------------------------
  -- DEBUGGING SECTION
------------------------------------------------------- */

/* ------------------------------------------------------
   GLOBAL / RESET-EINSTELLUNGEN FÜR RESPONSIVE ++
------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------
   -- GLOBAL / RESET-EINSTELLUNGEN FÜR RESPONSIVE
------------------------------------------------------- */






/* ------------------------------------------------------
   LAYOUT HELPER ++
------------------------------------------------------- */

.flexColumnContainer{
  display: flex;
  flex-direction: column; /* Flex-Items werden untereinander in einer vertikalen Spalte angeordnet (von oben nach unten). */
  align-items: center;  /* Zentriert sie vertikal */
  justify-content: center; /* Zentriert sie horizontal */
  align-items: stretch; /* Querachse -> horizontale Ausdehnung */
}

.flexRowContainer{
  display: flex;
  flex-direction: row; /* Flex-Items werden nebeneinander in einer horizontalen Zeile angeordnet (von links nach rechts). */
  align-items: center; /* Zentriert sie horizontal */
  justify-content: center; /* Zentriert sie vertikal */
  align-items: stretch; /* Querachse -> vertikale Ausdehnung */
}

.flexColumnBox{
  display: flex;
  flex-direction: column;
  text-align: center;
  flex: 1; /* Hauptachse vertikal. Das Element wächst in die Höhe. */
}

.flexRowBox{
  display: flex;
  flex-direction: row;
  text-align: center;
  flex: 1; /* Hauptachse horizontal. Das Element dehnt sich in der Breite flexibel aus. */
}

.Right{ justify-content: flex-end; }

.Left{ justify-content: flex-start; }

.Center{ justify-content: center; }

.TextLeft{ text-align: left; }

.TextRight{ text-align: right; }

.TextCenter{ text-align: center; }

.pushDown { margin-top: auto; }  /* schiebt dieses Element ans untere Ende */

.pushUp { margin-bottom: auto; }  /* schiebt dieses Element ans untere Ende */

.fixedHeaderHeight{ flex: 0 0 auto; }

.fixedFooterHeight { flex: 0 0 auto; }

.stopFlexResizing{ flex: 0 0 auto; }

.hiddenElement { display: none !important; }

.shownElement { display: flex !important; }

.shownButton{ display: block !important; }

.hiddenButton{ display: none !important; }

.invisibleElement{ visibility: hidden !important; }

.visibleElement{ visibility: visible !important; }

.centerText{ text-align: center; }

.absoluteContainer { position:absolute; width: calc(100% - 2 * 0.313rem); }

/* ------------------------------------------------------
   -- LAYOUT HELPER
------------------------------------------------------- */

/* ------------------------------------------------------
   HTML TAGS ++
------------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable;
}

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: #1A1A2E;
  min-height: 100vh;
}

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #1A1A2E;   
  text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.2), -0.125rem -0.125rem 0.3125rem rgba(0, 0, 0, 0.2);
}

h2{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #1A1A2E;
  /* text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.2), -0.125rem -0.125rem 0.3125rem rgba(0, 0, 0, 0.2); */
}

p {
  /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
  color: #555;
}

textarea {
  font-family: inherit;
  border: 0.313rem solid #1A1A2E;
  border-radius: 0.375rem;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.5);
  overflow: auto;
  resize: none;
}

textarea:focus {
  outline: none;
  border-color: #B4918F;
}

textarea::placeholder, 
input::placeholder {
  color: #aaa;
  position: absolute;
  text-align: left;;
}

table {
  background-color: #f9f9f9;
  text-align: left;
  width: 80%;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.5);
  border-collapse: collapse; /* Zellgrenzen werden zusammengefasst (1 Linie statt doppelter Linien). */
}

/* ------------------------------------------------------
   -- HTML TAGS
------------------------------------------------------- */

/* ------------------------------------------------------
   CLASSES ++
------------------------------------------------------- */

.fixedHeaderHeightUseCase{
  flex: 0 0 auto; 
}
  
.heroHighlight {
  color: #EEE0E5;
  -webkit-text-stroke: 0.1px #B4918F; 
}

.footerHighlight {
    color: #B4918F;
    font-family: 'Pacifico', cursive;
}

.bodyContainer {
  background-color: #f0f0f8;
  border-radius: 0.5rem;
}

.customTextBox {
  min-width: 30vw;
  max-height: 40vh;
  background: #f9f9f9;
  border: 0.063rem solid #B4918F;
  border-radius: 0.5rem;
  box-shadow: 0.125rem 0.125rem 0.313rem rgba(0, 0, 0, 0.1);
  line-height: 1.5;
  text-align: left;
  overflow-y: auto;
}

.customHeader {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #1A1A2E;
  margin-bottom: 0px;
  margin-top: 0px;
  text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.2), -0.125rem -0.125rem 0.3125rem rgba(0, 0, 0, 0.2);
}

.customHeader2{
  margin:0;
}

.keyField{
  text-align: left;
}

.keyField label, 
.contactUserDataField label {
  color: #aaa;
}

.keyField:focus-within label, 
.keyField:not(:has(textarea:placeholder-shown)) label, 
.contactUserDataField:focus-within label, 
.keyField:not(:has(textarea:placeholder-shown)) label {
  color: #B4918F;
}

/* .welcomeBox{
  border: 0.375rem solid #B4918F;
} */

@keyframes dots {
  0% { content: '...'; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}

@keyframes blinker {
  0%   { background-color: #B4918F; }
  50%  { background-color: #1A1A2E; }
  100% { background-color: #B4918F; }
}

.htmlTableButton{
  width: 1.875rem;
  height: 1.875rem;
}

.tableRowButtonFormat{
  text-align: center;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* ------------------------------------------------------
   -- CLASSES
------------------------------------------------------- */

/* ------------------------------------------------------
   IDs ++
------------------------------------------------------- */

#UseCaseSelectionContainer,
#ProcessDescriptionContainer,
#ProcessDocumentationTableContainer, 
#BPMN2GoContainer{
  border-top: 0.625rem dotted #1A1A2E;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

#overlay.overlayActive {
  display: flex !important;
}

#overlay.overlayInactive {
  display: none !important;
}

#costInfoContainer {
  text-align: left;
  color: #555;
}

#versionNo{
  text-align: right;
  font-size: smaller;
  color: #555;
  margin: 0;
}

#ratioDisplay{
  color: #555;
}

#charCountUserInput {
  color: #555;
  text-align: right;
}

#canvas {
  flex: auto;
  background-color: #fff;
  border: 0.313rem solid #1A1A2E;
  border-radius: 0.375rem;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.5);
  overflow: auto;
  resize: vertical;
}

/* #contactContainer, #thankYouContainer, */
#popupContainer, 
#responseContainer, 
#instructionContainer,
#documentationContainer {
  /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #fff;
  border-radius: 1.25rem;
  border: 0.313rem solid #B4918F;
}

#documentationContainer {
  min-width: 95vw;
  max-height: max-content;
  overflow-y: auto; 
  
}

.response::after {
  display: none;
  content: '......';
  animation: dots 1.5s steps(6, end) infinite;
}

.response.animate::after {
  display: inline-block;
}

#closeNoteX, 
#closeContactX, 
#closeInstructionX,
#closeThankYouX,
#closeDocumentationX {
  position: sticky; /* In Kombination mit Top:0 bleibt Button auch bei Scrollen rechts oben angezeigt */ 
  float: right;
  cursor: pointer;
}

#closeContactX, 
#closeInstructionX, 
#closeThankYouX,
#closeDocumentationX{
  text-align: right;
}

#closeDocumentationX{
  /* top: 0; */
  /* position: absolute; */
}

#contactMessage {
  border-radius: 0.313rem;
}

#contactName, 
#contactEmail {
  border: 0.125rem solid #1A1A2E;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.2);
}

#userInput {
  flex: auto;
  overflow: auto;
  resize: vertical;
}

#htmlTableInput, 
#xmlInput{
  resize: vertical;
}

#keyOptionSelect {
  /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
  color: #fff;
  background-color: #1A1A2E;
  text-align: left;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.5);
  animation: blinker 1s step-start infinite;
}

#keyOptionSelect:focus{
  outline: none;
}

#APIKeyOpenAI, 
#APIKeyPerplexity, 
#DebugKey {
  border: 0.125rem solid #1A1A2E;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.2);
}

#APIKeyOpenAI:focus, 
#APIKeyPerplexity:focus, 
#DebugKey:focus {
  outline: none;
  border-color: #B4918F;
}

#APIKeyOpenAI:focus::placeholder, 
#APIKeyOpenAI:not(:placeholder-shown)::placeholder,
#APIKeyPerplexity:focus::placeholder, 
#APIKeyPerplexity:not(:placeholder-shown)::placeholder,
#DebugKey:focus::placeholder, 
#DebugKey:not(:placeholder-shown)::placeholder {
  color: transparent;
}

#explorerFileInput {
  display: none;
}

#errorMessage {
  background: #B4918F;
  width: 40%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Exakte Zentrierung */
  color: #fff;
  box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.5);
  border-radius: 0.25rem;
  z-index: 1000;
  animation: blinker 1s step-start infinite;
}

#editableHTMLTable {
  width: 100%;
}

#editableHTMLTable th {
  color: #f2f2f2;
  background-color: #1A1A2E;
  border-top: 0.188rem solid #f0f0f8; 
  border-left: 0.188rem solid #f0f0f8; 
  border-right: 0.188rem solid #f0f0f8; 
  text-align: center;
}

#editableHTMLTable td{
  border: 0.188rem solid black;
  text-align: left; 
}

/* #documentationWelcome{
  margin-top: 0;
} */

#constructionImage {
  max-width: 30%;
  display: block;
  margin: 0 auto; /* Automatische Zentrierung */

}

/* ------------------------------------------------------
   -- IDs
------------------------------------------------------- */

/* ------------------------------------------------------
   BUTTONS ++
------------------------------------------------------- */

button {
  /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
  color: #fff;
  background-color: #1A1A2E;
  text-align: center;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0.25rem 0.25rem 0.625rem 0.25rem rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

button:hover {
  background-color: #B4918F;
}

.animatedButton {
  animation: bounce 1s;
}

#donationButtonPayPal, 
#donationButtonBuyMeACoffe, 
#contactButton,
#clearButton {
  background-color: #B4918F;
}

#donationButtonPayPal:hover, 
#donationButtonBuyMeACoffe:hover, 
#contactButton:hover,
#clearButton {
  background-color: #1A1A2E;
}

/* ------------------------------------------------------
   -- BUTTONS
------------------------------------------------------- */

/* ------------------------------------------------------
   MEDIA QUERIES FÜR RESPONSIVE DESIGN
------------------------------------------------------- */


/* Für Smartphones (max-width: 768px) */
@media only screen and (max-width: 768px) {
  h1{ font-size: 2.5rem; margin: 0.3125rem; }
  h2{ font-size: 2rem; margin-bottom: 0.3125rem; margin-top: 0.3125rem; }
  p{ font-size: 0.8rem; }
  textarea{ font-size: 0.8rem; padding: 0.3125rem; }
  textarea::placeholder, input::placeholder{ font-size: 0.8rem; padding-left: 0.0625rem; }
  .fixedHeaderHeight{ height: 5rem; }
  .fixedFooterHeight { height: 2rem; }
  .fixedHeaderHeightUseCase{ height: 8rem; }
  .heroTitle{ font-size: 2.5rem; }
  .footerHighlight{ font-size: 1.2rem; }
  .mainMarginLeftRight{ margin-left: 0.8rem; margin-right: 0.8rem; }
  .bodyContainer{ min-width: 38.438rem; min-height: 43.75rem; margin: 0.15625rem; }
  .customTextBox{ padding: 0.8rem; margin: 0.3125rem; }
  .customHeader{ font-size: 1.6rem; }
  .customHeader2{ font-size: 1.2rem; }
  .customParagraph{ margin-top: 0.15625rem; margin-right: 1rem; margin-bottom: 0.5rem; margin-left: 1rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.6rem; margin-top: 0.3125rem; }
  .contactUserDataField label{ font-size: 0.8rem; margin-top: 0.094rem; }
  .documentationBox{ margin-left: 1.6rem; margin-right: 1.6rem; margin-top: 1.6rem; }
  /* .workflowBox{ min-height: 20rem; } */
  /* .importantNotesBox{ min-height: 7rem; } */
  /* .welcomeBox{ min-height: 17rem; } */
  .htmlTableButton{ margin: 0.03125rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.15625rem; }
  .img2525Bot375{ width: 0.8rem; height: 0.8rem; margin-bottom: -0.1875rem; }
  .img3535Top313{ width: 1.1rem; height: 1.1rem; margin-top: -0.15625rem; }
  .img3535Top375{ width: 1.1rem; height: 1.1rem; margin-top: -0.1875rem; }
  .img3535Bot625{ width: 1.1rem; height: 1.1rem; margin-bottom: -0.3125rem; }
  .img3535Bot688{ width: 1.1rem; height: 1.1rem; margin-bottom: -0.34375rem; }
  .img3535Bot5{ width: 1.1rem; height: 1.1rem; margin-bottom: -0.25rem; }
  .img4040{ width: 1.25rem; height: 1.25rem; }
  .img4545Bot625{ width: 1.4rem; height: 1.4rem; margin-bottom: -0.3125rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 1.6rem; }
  #costInfoContainer { font-size: 0.8rem; margin-left: 0.8rem; }
  #versionNo{ margin-right: 0.3125rem; }
  #licenseLinks{ margin-left: 0.3125rem; }
  #keyContainer{ margin: 0.15625rem; }
  #canvas { min-height: 22rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 1.1rem; font-size: 0.8rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 1.1rem; margin-top: -0.9375rem; margin-right: -0.78125rem; }
  #contactMessage { /*min-width: 31rem; min-height: 12.5rem;*/ margin-top: 0.625rem; }
  #contactName, #contactEmail { font-size: 0.8rem; padding: 0.15625rem; margin-top: 0.15625rem; margin-right: 0.8rem; margin-left: 0.8rem; }
  #userInput { min-height: 12.5rem; }
  #htmlTableInput,  #xmlInput{ min-height: 6.25rem; }
  #keyOptionSelect { font-size: 1em; width: 3.9rem; padding: 0.3125rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 9.375rem; height: 0.78rem; font-size: 0.875rem; padding-top: 0.15625rem; padding-left: 0.3125rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 4.688rem; }
  #DebugKeyData{ margin-top: 0.3125rem; }
  #errorMessage { font-size: 1.875rem; padding: 0.625rem; margin-top: 0.3125rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.15625rem; }
  #editableHTMLTable th { font-size: 1em; height: 1.6rem; }
  #editableHTMLTable td{ font-size: 0.8rem; }
  button { font-size: 0.75em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.2rem; width: 18.75rem; height: 4.6875rem; margin: 0.3125rem; }
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton { font-size: 0.8rem; width: 5.625rem; height: 2.1875rem; margin: 0.15625rem; }
  #addHtmlTableRowButton { height: 1.40625rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton { margin: 0.0625rem; }
  #zoomIn, #zoomOut, #resetZoom { width: 1.5625rem; height: 1.875rem; margin: 0.0625rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton { font-size: 0.8rem; width: 5.625rem; height: 2.1875rem; margin: 0.15625rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton #submitBoostUpTextButton, #submitProcessModelToTextButton { font-size: 0.8rem; width: 6.25rem; height: 2.1875rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitProcessModelToTextButton { margin: 0.15625rem; }
  #clearButton { font-size: 0.8rem; width: 6.25rem; margin: 0.15625rem; }
  #openDocumentationButton, #donationButtonPayPal, #donationButtonBuyMeACoffe{ width: 6.875rem; }
}

/* Für Tablets/Kleine Bildschirme (min-width: 769px) */
@media only screen and (min-width: 769px) and (max-width: 1023px) {
  h1{ font-size: 2.5rem; margin: 0.3125rem; }
  h2{ font-size: 2rem; margin-bottom: 0.3125rem; margin-top: 0.3125rem; }
  p{ font-size: 0.8rem; }
  textarea{ font-size: 0.8rem; padding: 0.3125rem; }
  textarea::placeholder, input::placeholder{ font-size: 0.8rem; padding-left: 0.0625rem; }
  .fixedHeaderHeight{ height: 5rem; }
  .fixedFooterHeight { height: 2rem; }
  .fixedHeaderHeightUseCase{ height: 8rem; }
  .heroTitle{ font-size: 3.125rem; }
  .footerHighlight{ font-size: 1.2rem; }
  .mainMarginLeftRight{ margin-left: 0.8rem; margin-right: 0.8rem; }
  .bodyContainer{ margin: 0.15625rem; }
  .customTextBox{ padding: 0.8rem; margin: 0.3125rem; }
  .customHeader{ font-size: 1.6rem; }
  .customHeader2{ font-size: 1.2rem; }
  .customParagraph{ margin-top: 0.15625rem; margin-right: 1rem; margin-bottom: 0.5rem; margin-left: 1rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.6rem; margin-top: 0.3125rem; }
  .contactUserDataField label{ font-size: 0.8rem; margin-top: 0.094rem; }
  .documentationBox{ margin-left: 1.6rem; margin-right: 1.6rem; margin-top: 1.6rem; }
  /* .workflowBox{ min-height: 20rem; } */
  /* .importantNotesBox{ min-height: 7rem; } */
  /* .welcomeBox{ min-height: 17rem; } */
  .htmlTableButton{ margin: 0.03125rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.15625rem; }
  .img2525Bot375{ width: 0.8rem; height: 0.8rem; margin-bottom: -0.1875rem; }
  .img3535Top313{ width: 1.1rem; height: 1.1rem; margin-top: -0.15625rem; }
  .img3535Top375{ width: 1.1rem; height: 1.1rem; margin-top: -0.1875rem; }
  .img3535Bot625{ width: 1.1rem; height: 1.1rem; margin-bottom: -0.3125rem; }
  .img3535Bot688{ width: 1.1rem; height: 1.1rem; margin-bottom: -0.34375rem; }
  .img3535Bot5{ width: 1.1rem; height: 1.1rem; margin-bottom: -0.25rem; }
  .img4040{ width: 1.25rem; height: 1.25rem; }
  .img4545Bot625{ width: 1.4rem; height: 1.4rem; margin-bottom: -0.3125rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 1.6rem; }
  #costInfoContainer { font-size: 0.8rem; margin-left: 0.8rem; }
  #versionNo{ margin-right: 0.3125rem; }
  #licenseLinks{ margin-left: 0.3125rem; }
  #keyContainer{ margin: 0.15625rem; }
  #canvas { min-height: 22rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 1.1rem; font-size: 0.8rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 1.1rem; margin-top: -0.9375rem; margin-right: -0.78125rem; }
  #contactMessage { min-width: 31rem; min-height: 12.5rem; margin-top: 0.625rem; }
  #contactName, #contactEmail { font-size: 0.8rem; padding: 0.15625rem; margin-top: 0.15625rem; margin-right: 0.8rem; margin-left: 0.8rem; }
  #userInput { min-height: 12.5rem; }
  #htmlTableInput,  #xmlInput{ min-height: 6.25rem; }
  #keyOptionSelect { font-size: 1em; width: 3.9rem; padding: 0.3125rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 9.375rem; height: 0.78rem; font-size: 0.875rem; padding-top: 0.15625rem; padding-left: 0.3125rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 4.688rem; }
  #DebugKeyData{ margin-top: 0.3125rem; }
  #errorMessage { font-size: 1.875rem; padding: 0.625rem; margin-top: 0.3125rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.15625rem; }
  #editableHTMLTable th { font-size: 1em; height: 1.6rem; }
  #editableHTMLTable td{ font-size: 0.8rem; }
  button { font-size: 0.75em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.2rem; width: 18.75rem; height: 4.6875rem; margin: 0.3125rem; }
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton { font-size: 0.8rem; width: 5.625rem; height: 2.1875rem; margin: 0.15625rem; }
  #addHtmlTableRowButton { height: 1.40625rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton { margin: 0.0625rem; }
  #zoomIn, #zoomOut, #resetZoom { width: 1.5625rem; height: 1.875rem; margin: 0.0625rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton { font-size: 0.8rem; width: 5.625rem; height: 2.1875rem; margin: 0.15625rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton #submitBoostUpTextButton, #submitProcessModelToTextButton { font-size: 0.8rem; width: 6.25rem; height: 2.1875rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton #submitProcessModelToTextButton { margin: 0.15625rem; }
  #clearButton { font-size: 0.8rem; width: 6.25rem; margin: 0.15625rem; }
  #openDocumentationButton, #donationButtonPayPal, #donationButtonBuyMeACoffe{ width: 6.875rem; }
}

/* Für Tablets/Kleine Bildschirme (max-width: 1024px) */
@media only screen and (min-width: 1024px) and (max-width: 1365px) {
  h1{ font-size: 3rem; margin: 0.5rem; }
  h2{ font-size: 2.5rem; margin-bottom: 0.5rem; margin-top: 0.5rem; }
  p{ font-size: 1rem; }
  textarea{ font-size: 1rem; padding: 0.5rem; }
  textarea::placeholder, input::placeholder{ font-size: 1rem; padding-left: 0.1rem; }
  .fixedHeaderHeight{ height: 7rem; }
  .fixedFooterHeight { height: 2.5rem; }
  .fixedHeaderHeightUseCase{ height: 12rem; }
  .heroTitle{ font-size: 3.75rem; }
  .footerHighlight{ font-size: 1.5rem; }
  .mainMarginLeftRight{ margin-left: 1rem; margin-right: 1rem; }
  .bodyContainer{ margin: 0.25rem; }
  .customTextBox{ padding: 1rem; margin: 0.5rem; }
  .customHeader{ font-size: 2rem; }
  .customHeader2{ font-size: 1.5rem; }
  .customParagraph{ margin-top: 0.25rem; margin-right: 1.5rem; margin-bottom: 0.75rem; margin-left: 1.5rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.8rem; margin-top: 0.5rem; }
  .contactUserDataField label{ font-size: 1rem; margin-top: 0.2rem; }
  .documentationBox{ margin-left: 2rem; margin-right: 2rem; margin-top: 2rem; }
  /* .workflowBox{ min-height: 30rem; } */
  /* .importantNotesBox{ min-height: 10rem; } */
  /* .welcomeBox{ min-height: 24rem; } */
  .htmlTableButton{ margin: 0.05rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.25rem; }
  .img2525Bot375{ width: 1.25rem; height: 1.25rem; margin-bottom: -0.25rem; }
  .img3535Top313{ width: 1.75rem; height: 1.75rem; margin-top: -0.25rem; }
  .img3535Top375{ width: 1.75rem; height: 1.75rem; margin-top: -0.3rem; }
  .img3535Bot625{ width: 1.75rem; height: 1.75rem; margin-bottom: -0.5rem; }
  .img3535Bot688{ width: 1.75rem; height: 1.75rem; margin-bottom: -0.55rem; }
  .img3535Bot5{ width: 1.75rem; height: 1.75rem; margin-bottom: -0.4rem; }
  .img4040{ width: 2rem; height: 2rem; }
  .img4545Bot625{ width: 2.25rem; height: 2.25rem; margin-bottom: -0.5rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 2rem; }
  #costInfoContainer { font-size: 1rem; margin-left: 1rem; }
  #versionNo{ margin-right: 0.5rem; }
  #licenseLinks{ margin-left: 0.5rem; }
  #keyContainer{ margin: 0.25rem; }
  #canvas { min-height: 32rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 1.5rem; font-size: 1.2rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 1.5rem; margin-top: -1.5rem; margin-right: -1.2rem; }
  #contactMessage { min-width: 45rem; min-height: 18rem; margin-top: 1rem; }
  #contactName, #contactEmail { font-size: 1rem; padding: 0.25rem; margin-top: 0.25rem; margin-right: 1rem; margin-left: 1rem; }
  #userInput { min-height: 18rem; }
  #htmlTableInput,  #xmlInput{ min-height: 9rem; }
  #keyOptionSelect { font-size: 1em; width: 5rem; padding: 0.5rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 14rem; height: 1.2rem; font-size: 0.875rem; padding-top: 0.25rem; padding-left: 0.5rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 7rem; }
  #DebugKeyData{ margin-top: 0.5rem; }
  #errorMessage { font-size: 1.5rem; padding: 1rem; margin-top: 0.5rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.25rem; }
  #editableHTMLTable th { font-size: 1.1em; height: 2.5rem; }
  #editableHTMLTable td{ font-size: 1rem; }
  button { font-size: 1em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.5rem; width: 30rem; height: 7.5rem; margin: 0.5rem; }
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton { font-size: 1rem; width: 9rem; height: 3rem; margin: 0.25rem; }
  #addHtmlTableRowButton { height: 2rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton { margin: 0.125rem; }
  #zoomIn, #zoomOut, #resetZoom { width: 2.5rem; height: 3rem; margin: 0.125rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton { font-size: 1rem; width: 9rem; height: 3rem; margin: 0.25rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitBoostUpTextButton, #submitProcessModelToTextButton { font-size: 1.2rem; width: 10rem; height: 3rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitProcessModelToTextButton { margin: 0.25rem; }
  #clearButton { font-size: 1.2rem; width: 10rem; margin: 0.25rem; }
}

/* Für HD Monitore (1366x768) */
@media only screen and (min-width: 1366px) and (max-width: 1919px) {
  h1{ font-size: 3.65rem; margin: 0.56rem; }
  h2{ font-size: 2.8rem; margin-bottom: 0.56rem; margin-top: 0.56rem; }
  p{ font-size: 1.125rem; }
  textarea{ font-size: 1.125rem; padding: 0.56rem; }
  textarea::placeholder, input::placeholder{ font-size: 1.125rem; padding-left: 0.14rem; }
  .fixedHeaderHeight{ height: 8.44rem; }
  .fixedFooterHeight { height: 2.81rem; }
  .fixedHeaderHeightUseCase{ height: 14.06rem; }
  .heroTitle{ font-size: 4.6875rem; }
  .footerHighlight{ font-size: 1.69rem; }
  .mainMarginLeftRight{ margin-left: 1.125rem; margin-right: 1.125rem; }
  .bodyContainer{ margin: 0.35rem; }
  .customTextBox{ padding: 1.41rem; margin: 0.56rem; }
  .customHeader{ font-size: 2.25rem; }
  .customHeader2{ font-size: 1.69rem; }
  .customParagraph{ margin-top: 0.35rem; margin-right: 1.69rem; margin-bottom: 0.94rem; margin-left: 1.69rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.94rem; margin-top: 0.56rem; }
  .contactUserDataField label{ font-size: 1.125rem; margin-top: 0.21rem; }
  .documentationBox{ margin-left: 2.81rem; margin-right: 2.81rem; margin-top: 2.81rem; }
  /* .workflowBox{ min-height: 33.47rem; } */
  /* .importantNotesBox{ min-height: 11.53rem; } */
  /* .welcomeBox{ min-height: 27.56rem; } */
  .htmlTableButton{ margin: 0.06rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.31rem; }
  .img2525Bot375{ width: 1.75rem; height: 1.75rem; margin-bottom: -0.31rem; }
  .img3535Top313{ width: 2.44rem; height: 2.44rem; margin-top: -0.31rem; }
  .img3535Top375{ width: 2.44rem; height: 2.44rem; margin-top: -0.38rem; }
  .img3535Bot625{ width: 2.44rem; height: 2.44rem; margin-bottom: -0.63rem; }
  .img3535Bot688{ width: 2.44rem; height: 2.44rem; margin-bottom: -0.66rem; }
  .img3535Bot5{ width: 2.44rem; height: 2.44rem; margin-bottom: -0.5rem; }
  .img4040{ width: 2.75rem; height: 2.75rem; }
  .img4545Bot625{ width: 3.09rem; height: 3.09rem; margin-bottom: -0.63rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 2.81rem; }
  #costInfoContainer { font-size: 1.125rem; margin-left: 1.125rem; }
  #versionNo{ margin-right: 0.56rem; }
  #licenseLinks{ margin-left: 0.56rem; }
  #keyContainer{ margin: 0.35rem; }
  #canvas { min-height: 39.38rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 2rem; font-size: 1.41rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 2rem; margin-top: -1.69rem; margin-right: -1.41rem; }
  #contactMessage { min-width: 55rem; min-height: 21.88rem; margin-top: 1.125rem; }
  #contactName, #contactEmail { font-size: 1.125rem; padding: 0.35rem; margin-top: 0.35rem; margin-right: 1.125rem; margin-left: 1.125rem; }
  #userInput { min-height: 21.88rem; }
  #htmlTableInput,  #xmlInput{ min-height: 10.94rem; }
  #keyOptionSelect { font-size: 1em; width: 6.56rem; padding: 0.56rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 16.88rem; height: 1.41rem; font-size: 0.875rem; padding-top: 0.35rem; padding-left: 0.56rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 8.44rem; }
  #DebugKeyData{ margin-top: 0.56rem; }
  #errorMessage { font-size: 1.69rem; padding: 1.41rem; margin-top: 0.56rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.35rem; }
  #editableHTMLTable th { font-size: 1.125em; height: 2.81rem; }
  #editableHTMLTable td{ font-size: 1.125rem; }
  button { font-size: 1.125em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.69rem; width: 33.75rem; height: 8.44rem; margin: 0.56rem; }
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton { font-size: 1.125rem; width: 10.125rem; height: 3.38rem; margin: 0.35rem; }
  #addHtmlTableRowButton { height: 2.53rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton { margin: 0.125rem; }
  #zoomIn, #zoomOut, #resetZoom { width: 2.81rem; height: 3.38rem; margin: 0.125rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton { font-size: 1.125rem; width: 10.125rem; height: 3.38rem; margin: 0.35rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitBoostUpTextButton, #submitProcessModelToTextButton { font-size: 1.41rem; width: 11.25rem; height: 3.38rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitProcessModelToTextButton { margin: 0.35rem; }
  #clearButton { font-size: 1.41rem; width: 11.25rem; margin: 0.35rem; }
}

/* Für Full HD Monitore (1920x1080) */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  h1{ font-size: 4.0625rem; margin: 0.625rem; }
  h2{ font-size: 3.125rem; margin-bottom: 0.625rem; margin-top: 0.625rem; }
  p{ font-size: 1.25rem; }
  textarea{ font-size: 1.25rem; padding: 0.625rem; }
  textarea::placeholder, input::placeholder{ font-size: 1.25rem; padding-left: 0.125rem; }
  .fixedHeaderHeight{ height: 9.375rem; }
  .fixedFooterHeight { height: 3.125rem; }
  .fixedHeaderHeightUseCase{ height: 15.625rem; }
  .heroTitle{ font-size: 5.625rem; }
  .footerHighlight{ font-size: 1.875rem; }
  .mainMarginLeftRight{ margin-left: 1.25rem; margin-right: 1.25rem; }
  .bodyContainer{ margin: 0.3125rem; }
  .customTextBox{ padding: 1.563rem; margin: 0.625rem; }
  .customHeader{ font-size: 2.5rem; }
  .customHeader2{ font-size: 1.875rem; }
  .customParagraph{ margin-top: 0.313rem; margin-right: 1.875rem; margin-bottom: 0.938rem; margin-left: 1.875rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.9375rem; margin-top: 0.625rem; }
  .contactUserDataField label{ font-size: 1.25rem; margin-top: 0.188rem; }
  .documentationBox{ margin-left: 3.125rem; margin-right: 3.125rem; margin-top: 3.125rem; }
  /* .workflowBox{ min-height: 37.188rem; } */
  /* .importantNotesBox{ min-height: 12.813rem; } */
  /* .welcomeBox{ min-height: 30.625rem; } */
  .htmlTableButton{ margin: 0.063rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.313rem; }
  .img2525Bot375{ width: 1.563rem; height: 1.563rem; margin-bottom: -0.375rem; }
  .img3535Top313{ width: 2.188rem; height: 2.188rem; margin-top: -0.313rem; }
  .img3535Top375{ width: 2.188rem; height: 2.188rem; margin-top: -0.375rem; }
  .img3535Bot625{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.625rem; }
  .img3535Bot688{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.688rem; }
  .img3535Bot5{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.5rem; }
  .img4040{ width: 2.5rem; height: 2.5rem; }
  .img4545Bot625{ width: 2.813rem; height: 2.813rem; margin-bottom: -0.625rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 3.125rem;}
  #costInfoContainer { font-size: 1.25rem; margin-left: 1.25rem; }
  #versionNo{ margin-right: 0.625rem; }
  #licenseLinks{ margin-left: 0.625rem; }
  #keyContainer{ margin: 0.313rem; }
  #canvas { min-height: 43.75rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 2.188rem; font-size: 1.563rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 2.1875rem; margin-top: -1.875rem; margin-right: -1.563rem; }
  #contactMessage { min-width: 62.5rem; min-height: 25rem; margin-top: 1.25rem; }
  #contactName, #contactEmail { font-size: 1.25rem; padding: 0.313rem; margin-top: 0.313rem; margin-right: 1.25rem; margin-left: 1.25rem; }
  #userInput { min-height: 25rem; }
  #htmlTableInput,  #xmlInput{ min-height: 12.5rem; }
  #keyOptionSelect { font-size: 1em; width: 7.813rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 18.75rem; height: 1.5625rem; font-size: 0.875rem; padding-top: 0.313rem; padding-left: 0.625rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 9.375rem; }
  #DebugKeyData{ margin-top: 0.625rem; }
  #errorMessage { font-size: 1.875rem; padding: 1.25rem; margin-top: 0.625rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.313rem; }
  #editableHTMLTable th { font-size: 1.25em; height: 3.125rem; }
  #editableHTMLTable td{ font-size: 1.25rem; }
  button { font-size: 1.125em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.875rem; width: 37.5rem; height: 9.375rem;  margin: 0.625rem;}
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton{ font-size: 1.25rem; width: 11.25rem; height: 3.75rem; margin: 0.313rem; }
  #addHtmlTableRowButton{ height: 2.813rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton{ margin: 0.125rem; }
  #zoomIn, #zoomOut, #resetZoom{ width: 3.125rem; height: 3.75rem; margin: 0.125rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton{ font-size: 1.25rem; width: 11.25rem; height: 3.75rem; margin: 0.313rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitBoostUpTextButton, #submitProcessModelToTextButton{ font-size: 1.563rem; width: 12.5rem; height: 3.75rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitProcessModelToTextButton{ margin: 0.313rem; }
  #clearButton{ font-size: 1.563rem; width: 12.5rem; margin: 0.313rem; }
}

/* Für WQHD Monitore (2560x1440) */
@media only screen and (min-width: 2560px) and (max-width: 3840px) {
  h1{ font-size: 4.0625rem; margin: 0.625rem; }
  h2{ font-size: 3.125rem; margin-bottom: 0.625rem; margin-top: 0.625rem; }
  p{ font-size: 1.25rem; }
  textarea{ font-size: 1.25rem; padding: 0.625rem; }
  textarea::placeholder, input::placeholder{ font-size: 1.25rem; padding-left: 0.125rem; }
  .fixedHeaderHeight{ height: 9.375rem; }
  .fixedFooterHeight { height: 3.125rem; }
  .fixedHeaderHeightUseCase{ height: 15.625rem; }
  .heroTitle{ font-size: 7.5rem; }
  .footerHighlight{ font-size: 1.875rem; }
  .mainMarginLeftRight{ margin-left: 1.25rem; margin-right: 1.25rem; }
  .bodyContainer{ margin: 0.3125rem; }
  .customTextBox{ padding: 1.563rem; margin: 0.625rem; }
  .customHeader{ font-size: 2.5rem; }
  .customHeader2{ font-size: 1.875rem; }
  .customParagraph{ margin-top: 0.313rem; margin-right: 1.875rem; margin-bottom: 0.938rem; margin-left: 1.875rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.9375rem; margin-top: 0.625rem; }
  .contactUserDataField label{ font-size: 1.25rem; margin-top: 0.188rem; }
  .documentationBox{ margin-left: 3.125rem; margin-right: 3.125rem; margin-top: 3.125rem; }
  /* .workflowBox{ min-height: 37.188rem; } */
  /* .importantNotesBox{ min-height: 12.813rem; } */
  /* .welcomeBox{ min-height: 30.625rem; } */
  .htmlTableButton{ margin: 0.063rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.313rem; }
  .img2525Bot375{ width: 1.563rem; height: 1.563rem; margin-bottom: -0.375rem; }
  .img3535Top313{ width: 2.188rem; height: 2.188rem; margin-top: -0.313rem; }
  .img3535Top375{ width: 2.188rem; height: 2.188rem; margin-top: -0.375rem; }
  .img3535Bot625{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.625rem; }
  .img3535Bot688{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.688rem; }
  .img3535Bot5{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.5rem; }
  .img4040{ width: 2.5rem; height: 2.5rem; }
  .img4545Bot625{ width: 2.813rem; height: 2.813rem; margin-bottom: -0.625rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 3.125rem;}
  #costInfoContainer { font-size: 1.25rem; margin-left: 1.25rem; }
  #versionNo{ margin-right: 0.625rem; }
  #licenseLinks{ margin-left: 0.625rem; }
  #keyContainer{ margin: 0.313rem; }
  #canvas { min-height: 43.75rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 2.188rem; font-size: 1.563rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 2.1875rem; margin-top: -1.875rem; margin-right: -1.563rem; }
  #contactMessage { min-width: 62.5rem; min-height: 25rem; margin-top: 1.25rem; }
  #contactName, #contactEmail { font-size: 1.25rem; padding: 0.313rem; margin-top: 0.313rem; margin-right: 1.25rem; margin-left: 1.25rem; }
  #userInput { min-height: 25rem; }
  #htmlTableInput,  #xmlInput{ min-height: 12.5rem; }
  #keyOptionSelect { font-size: 1em; width: 7.813rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 18.75rem; height: 1.5625rem; font-size: 0.875rem; padding-top: 0.313rem; padding-left: 0.625rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 9.375rem; }
  #DebugKeyData{ margin-top: 0.625rem; }
  #errorMessage { font-size: 1.875rem; padding: 1.25rem; margin-top: 0.625rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.313rem; }
  #editableHTMLTable th { font-size: 1.25em; height: 3.125rem; }
  #editableHTMLTable td{ font-size: 1.25rem; }
  button { font-size: 1.125em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.875rem; width: 37.5rem; height: 9.375rem;  margin: 0.625rem;}
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton{ font-size: 1.25rem; width: 11.25rem; height: 3.75rem; margin: 0.313rem; }
  #addHtmlTableRowButton{ height: 2.813rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton{ margin: 0.125rem; }
  #zoomIn, #zoomOut, #resetZoom{ width: 3.125rem; height: 3.75rem; margin: 0.125rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton{ font-size: 1.25rem; width: 11.25rem; height: 3.75rem; margin: 0.313rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitBoostUpTextButton, #submitProcessModelToTextButton{ font-size: 1.563rem; width: 12.5rem; height: 3.75rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitProcessModelToTextButton{ margin: 0.313rem; }
  #clearButton{ font-size: 1.563rem; width: 12.5rem; margin: 0.313rem; }
}

/* Für sehr große Monitore (min-width: 3840px) */
@media only screen and (min-width: 3840px) {
  h1{ font-size: 4.0625rem; margin: 0.625rem; }
  h2{ font-size: 3.125rem; margin-bottom: 0.625rem; margin-top: 0.625rem; }
  p{ font-size: 1.25rem; }
  textarea{ font-size: 1.25rem; padding: 0.625rem; }
  textarea::placeholder, input::placeholder{ font-size: 1.25rem; padding-left: 0.125rem; }
  .fixedHeaderHeight{ height: 9.375rem; }
  .fixedFooterHeight { height: 3.125rem; }
  .fixedHeaderHeightUseCase{ height: 15.625rem; }
  .heroTitle{ font-size: 9.375rem; }
  .footerHighlight{ font-size: 1.875rem; }
  .mainMarginLeftRight{ margin-left: 1.25rem; margin-right: 1.25rem; }
  .bodyContainer{ margin: 0.3125rem; }
  .customTextBox{ padding: 1.563rem; margin: 0.625rem; }
  .customHeader{ font-size: 2.5rem; }
  .customHeader2{ font-size: 1.875rem; }
  .customParagraph{ margin-top: 0.313rem; margin-right: 1.875rem; margin-bottom: 0.938rem; margin-left: 1.875rem; }
  .keyField label, .contactUserDataField label{ font-size: 0.9375rem; margin-top: 0.625rem; }
  .contactUserDataField label{ font-size: 1.25rem; margin-top: 0.188rem; }
  .documentationBox{ margin-left: 3.125rem; margin-right: 3.125rem; margin-top: 3.125rem; }
  /* .workflowBox{ min-height: 37.188rem; } */
  /* .importantNotesBox{ min-height: 12.813rem; } */
  /* .welcomeBox{ min-height: 30.625rem; } */
  .htmlTableButton{ margin: 0.063rem; }
  .HTMLtableButtonImg{ margin-bottom:-0.313rem; }
  .img2525Bot375{ width: 1.563rem; height: 1.563rem; margin-bottom: -0.375rem; }
  .img3535Top313{ width: 2.188rem; height: 2.188rem; margin-top: -0.313rem; }
  .img3535Top375{ width: 2.188rem; height: 2.188rem; margin-top: -0.375rem; }
  .img3535Bot625{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.625rem; }
  .img3535Bot688{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.688rem; }
  .img3535Bot5{ width: 2.188rem; height: 2.188rem; margin-bottom: -0.5rem; }
  .img4040{ width: 2.5rem; height: 2.5rem; }
  .img4545Bot625{ width: 2.813rem; height: 2.813rem; margin-bottom: -0.625rem; }
  #ProcessDescriptionContainer, #ProcessDocumentationTableContainer { margin-bottom: 3.125rem;}
  #costInfoContainer { font-size: 1.25rem; margin-left: 1.25rem; }
  #versionNo{ margin-right: 0.625rem; }
  #licenseLinks{ margin-left: 0.625rem; }
  #keyContainer{ margin: 0.313rem; }
  #canvas { min-height: 43.75rem; }
  #popupContainer, #responseContainer, #contactContainer, #instructionContainer, #thankYouContainer, #documentationContainer { padding: 2.188rem; font-size: 1.563rem; }
  #closeNoteX, #closeContactX, #closeInstructionX, #closeThankYouX, #closeDocumentationX { font-size: 2.1875rem; margin-top: -1.875rem; margin-right: -1.563rem; }
  #contactMessage { min-width: 62.5rem; min-height: 25rem; margin-top: 1.25rem; }
  #contactName, #contactEmail { font-size: 1.25rem; padding: 0.313rem; margin-top: 0.313rem; margin-right: 1.25rem; margin-left: 1.25rem; }
  #userInput { min-height: 25rem; }
  #htmlTableInput,  #xmlInput{ min-height: 12.5rem; }
  #keyOptionSelect { font-size: 1em; width: 7.813rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; }
  #APIKeyOpenAI, #APIKeyPerplexity, #DebugKey { width: 18.75rem; height: 1.5625rem; font-size: 0.875rem; padding-top: 0.313rem; padding-left: 0.625rem; }
  #APIKeyOpenAI::placeholder, #APIKeyPerplexity::placeholder, #DebugKey::placeholder { font-size: 0.875rem; }
  #DebugKey{ width: 9.375rem; }
  #DebugKeyData{ margin-top: 0.625rem; }
  #errorMessage { font-size: 1.875rem; padding: 1.25rem; margin-top: 0.625rem; }
  #editableHTMLTable th, #editableHTMLTable td { padding: 0.313rem; }
  #editableHTMLTable th { font-size: 1.25em; height: 3.125rem; }
  #editableHTMLTable td{ font-size: 1.25rem; }
  button { font-size: 1.125em; }
  #useCaseText2Model, #useCaseModel2Text { font-size: 1.875rem; width: 37.5rem; height: 9.375rem;  margin: 0.625rem;}
  #openDocumentationButton, #openInstructionButton, #demoDataButton, #sendContactMessageButton, #exportToDocxButton, 
  #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, #saveSvgButton, #fileUploadButton{ font-size: 1.25rem; width: 11.25rem; height: 3.75rem; margin: 0.313rem; }
  #addHtmlTableRowButton{ height: 2.813rem; }
  #exportToDocxButton, #exportToExcelButton, #openCloseHTMLButton, #openCloseXMLButton, #saveButton, 
  #saveSvgButton, #fileUploadButton, #resetZoom, #addHtmlTableRowButton{ margin: 0.125rem; }
  #zoomIn, #zoomOut, #resetZoom{ width: 3.125rem; height: 3.75rem; margin: 0.125rem; }
  #donationButtonPayPal, #donationButtonBuyMeACoffe, #contactButton{ font-size: 1.25rem; width: 11.25rem; height: 3.75rem; margin: 0.313rem; }
  #submitTextToModelButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitBoostUpTextButton, #submitProcessModelToTextButton{ font-size: 1.563rem; width: 12.5rem; height: 3.75rem; }
  #submitTextToModelButton, #submitBoostUpTextButton, #submitTableToModelHTMLTableButton,#submitTableToTextHTMLTableButton, #submitProcessModelToTextButton{ margin: 0.313rem; }
  #clearButton{ font-size: 1.563rem; width: 12.5rem; margin: 0.313rem; }
}