body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

.drop-area {
    margin: auto;
    width: 80%; /* Beispielbreite, passen Sie diese nach Bedarf an */
    max-width: 800px; /* Maximale Breite */
    border: 2px dashed #aaa;
    padding: 20px;
    cursor: pointer;
    text-align: center;
}

.controls {
    margin-bottom: 10px;
}

#canvasContainer {
    position: relative;
}

canvas {
    border: 1px solid black;
	pointer-events: auto;  /* Erlaubt das Empfangen von Mausereignissen */
    user-select: none;    /* Verhindert das Ziehen und Auswählen von Text beim Drag-and-Drop */
    z-index: 10;          /* Stellt sicher, dass das Canvas nicht von anderen Elementen überlagert wird */
    position: relative;
	    cursor: default; /* Standardmäßiger Cursor über dem Canvas */

}

canvas:hover {
    cursor: move; /* Cursor zum Verschieben, wenn der Mauszeiger über dem Canvas schwebt */
}

#textInput {
   display: block;
    width: 80%; /* Gleiche Breite wie .drop-area */
    max-width: 800px; /* Gleiche maximale Breite wie .drop-area */
    margin: 20px auto; /* Zentriert das Textfeld horizontal */
    height: 100px;
    resize: none;
}

#sourceInput {
    display: block;
    width: 80%; /* Gleiche Breite wie #textInput */
    max-width: 800px; /* Gleiche maximale Breite wie #textInput */
    margin: 20px auto; /* Zentriert das Textfeld horizontal */
    height: 50px; /* Höhe des Textfeldes für die Bildquelle */
    resize: none;
}