@media print {
    /* Size and margin for all pages ------------- */
    
    @page {
        size: 594mm 841mm;
        margin: 0;
        font-family: 'Faunces-variable', serif;
        marks: crop;
        background-image: var(--bg-gradient) !important;
        background-size: 10px 10px !important;
    }  


/* CONTENT --------------------------------------- */

body{
    text-align: left;
    text-align-last: left;
}

.text-im-hintergrund {
    display: none;
}
.text-im-hintergrund-print {
    font-family: Gloridot, sans-serif;
    font-size: 32rem;
    z-index: -5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7mm;
    line-height: 0.8;
    margin-top: 0;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000000;
    color: transparent;
    margin-left: 27mm;
    margin-top: 11mm;
}


#textField {
    position: absolute;
    top: 31mm;
    left: 27mm;
    width: 93.5%;
    height: 89.5%;
    padding: 10px;
    /*border: 1px solid red;*/
    background-color: transparent;
    resize: none;
    overflow: hidden;
    visibility: visible;
    font-family: Fraunces-variable;
    font-style: italic;
}

#changeTextButton {
    position: absolute; 
    top: 1mm;
    left: 1mm;
    width: 20mm; 
    height: 20mm;   
    background-color: #000000; 
    border: 2px solid #000000; 
    border-radius: 50%; 
    z-index: 20;
}
#sliderContainer {
    display: none;
}
#toggleSlidersButton {
    position: absolute;
    top: 410.5mm;
    left: 1px;
    width: 20mm;
    height: 20mm;
    background: black;
    border: 2px solid #000000;
    border-radius: 50%;
    z-index: 20;
}
#colorSchemeButton {
    position: absolute;
    bottom: 1mm;
    left: 1mm;
    width: 20mm;
    height: 20mm;
    background: black;
    border: 2px solid #000000;
    border-radius: 50%;
    z-index: 20;
}
#aboutButton {
    position: absolute;
    top: 1mm;
    right: 1mm;
    width: 20mm;
    height: 20mm;
    background: black;
    border: 2px solid #000000;
    border-radius: 50%;
    z-index: 20;
}
#aboutPopup {
    display: none;
}
#webtoprintButton {
    position: absolute;
    bottom: 1mm;
    right: 1mm;
    width: 20mm;
    height: 20mm;
    background: black;
    border: 2px solid #000000;
    border-radius: 50%;
    z-index: 20;
}
#webtoprintPopup {
    display: none;
}

#sliderContainer,
#button-screen,
#button-print-preview,
#button-print,
.popup {
  display: none !important;
}

#grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 20mm); /* Gleiche Zellengröße */
    grid-template-rows: repeat(auto-fill, 20mm);
    gap: 2mm; /* Falls du zwischen den Kreisen Abstand willst */
    position: absolute;
    left: 1mm;
    top: 1mm;
    width: 592mm;
    height: 839mm; 
  }

  .cell {
    visibility: hidden; /* Standardmäßig unsichtbar */
  }

  .cell.visible {
    visibility: visible !important; /* Nur bereits gescrollte Kreise zeigen */
    background: transparent; /* Kein ausgefüllter Kreis */
    border: 2px solid #000000; /* Schwarze Umrandung */
    width: 20mm !important;  /* Gleiche Größe wie im Grid */
    height: 20mm !important;
    border-radius: 50% !important;
  }
}

#button-screen:hover {
    background-color: #fdfcf9;
}
#button-print:hover {
    background-color: #fdfcf9;
}