html, body {
    height: 100%;
    margin: 0;
    background-color: #009f00; /* Eclipse-Hintergrundfarbe */
  }
  .container-fluid {
    height: 94%;
    margin: 0;
  }
  .CodeMirror {
    height: 100%; /* Nimmt die Höhe des Containers ein */
    margin: 0;
    padding: 0
  }
  .editor-html-container,
  .editor-css-container {
    height: 94%; /* Feste Höhe für die Container */
    overflow: auto; /* Scrollen innerhalb der Container erlauben */
  }
    .editor-html-container{
        font-family: monospace;
        font-size: 0.85rem;
    }
  .output-container {
    background-color: #fff; /* Sanfte Hintergrundfarbe für die Ausgabe */
    height: 94%;
		margin: 0;
		padding: 0;
  }
  iframe {
    width: 100%;
    height: 100%; /* Höhe des iframes auf 100% setzen */
		padding: 0;
  }

/* ############################################################ */
/* Farbanpassung CodeMirror Theme: eclipse */
.cm-s-eclipse span.cm-meta{color: #538cc6 !important;}
.cm-s-eclipse span.cm-tag{color:#9a2087 !important;}
.cm-s-eclipse span.cm-comment{color:#8f9b95 !important;}
.cm-s-eclipse span.cm-attribute{color:#308B38 !important;}


  /* ==================================== */
  .btn-copy::before {
    font-size: 3rem;
    font: var(--fa-font-solid);
    content: "\f0c7";
    padding: 0.5rem;
    background-color: #CECECE;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .btn-copy:hover::before {
    background-color: #ea9b03; /* Erfolgsfarbe */
    color: #ffefca; /* Textfarbe bei Hover */
  }

  .btn-copy.clicked::before {
    background-color: #267326; /* Erfolgsfarbe */
    color: #d9f2d9; /* Textfarbe nach dem Klick */
  }

  /* ==================================== */
  .btn-download::before {
    font-size: 3rem;
    font: var(--fa-font-solid);
    content: "\f019";
    padding: 0.5rem;
    background-color: #CECECE;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .btn-download:hover::before {
    background-color: #ea9b03; /* Farbe bei Hover */
    color: #ffefca; /* Textfarbe bei Hover */
  }

  .btn-download.clicked::before {
    background-color: #267326; /* Erfolgsfarbe */
    color: #d9f2d9; /* Textfarbe nach dem Klick */
  }
    
 /* ==================================== */
/* input download-name */
.html-name {
border-radius: 7px;
border: none;
padding: 0.15rem;
outline: none;
text-align: center;
}

.css-name {
border-radius: 7px;
border: none;
padding: 0.15rem;
outline: none;
text-align: center;
}