.page-loader {
    position: fixed; /* Bleibt an Ort und Stelle, auch beim Scrollen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Leicht transparenter Hintergrund */
    display: flex;
    flex-direction: column; /* Spinner und Text untereinander */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Stellt sicher, dass es über allem anderen liegt */
    transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; /* Für sanftes Ausblenden */
    opacity: 1;
    visibility: visible;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #0d6efd; /* Bootstrap Primary Blue (oder deine Akzentfarbe) */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px; /* Abstand zum Text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Klasse, um den App-Inhalt einzublenden */
.app-content.visible {
    display: block !important; /* display:none überschreiben */
}

.drop-zone {
    background-color: #f8f9fa; /* Leicht grauer Hintergrund */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.drop-zone.dragover {
    background-color: #e9ecef; /* Dunklerer Hintergrund beim Darüberziehen */
    border-color: #0d6efd !important; /* Bootstrap Primary Farbe für den Rand */
}

/* Anpassung für den versteckten File-Input, wenn er per Label ausgelöst wird */
#imageUpload {
    /* display: none; ist schon durch d-none gesetzt, aber zur Sicherheit */
}

/* Optional: Cursor für den "Datei auswählen"-Link */
label[for="imageUpload"] {
    cursor: pointer;
}

.progress-container {
    /* Hier könntest du noch Höhe etc. festlegen, falls nötig */
}
canvas {
    border: 1px solid #ccc;
    /* touch-action: none; <--- ENTFERNEN oder ANPASSEN */
    touch-action: pan-y;
    /* Erlaubt vertikales Scrollen, unterbindet horizontales Scrollen/Pinch-Zoom der Seite DURCH DAS ELEMENT */
    display: block;
    margin-bottom: 10px;
    width: 100%;
}

#layerSelect {
    /* margin-bottom: 10px; */
}

#layerList {
    margin-bottom: 10px;
}

.layer-list-item {
    cursor: pointer;
    padding: 5px;
}

.layer-list-item.active {
    background-color: #0d6efd;
    color: white;
    font-weight: bold;
}

.layer-coordinates {
    font-size: 0.8em;
    color: #555;
    display: block; /*FÜR DEBUG*/
    display: none; /*FÜR DEBUG*/
    /* Stellt sicher, dass es unter dem Namen steht */
}

.layer-list-item.active .layer-coordinates {
    color: #eee;
    /* Heller für besseren Kontrast auf blauem Hintergrund */
}

.layer-list-item {
    cursor: pointer;
    padding: 5px 10px; /* Etwas mehr Padding für die Buttons */
    display: flex; /* Flexbox für Ausrichtung von Name und Aktionen */
    justify-content: space-between; /* Name links, Aktionen rechts */
    align-items: center; /* Vertikal zentrieren */
}

.layer-item-name-coords {
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
}

.layer-item-actions {
    display: flex;
    gap: 8px; /* Abstand zwischen den Aktionsbuttons */
}

.layer-item-actions .btn-action {
    background: none;
    border: none;
    padding: 2px 5px; /* Kleineres Padding für Icon-Buttons */
    cursor: pointer;
    color: #6c757d; /* Standard-Textfarbe, anpassbar */
    font-size: 1.1rem; /* Etwas größere Icons */
}
.layer-list-item.active .layer-item-actions .btn-action {
    color: #f8f9fa; /* Hellere Farbe auf aktivem Hintergrund */
}

.layer-item-actions .btn-action:hover {
    color: #0d6efd; /* Bootstrap Primary bei Hover */
}

.layer-item-actions .btn-action.layer-hidden .material-icons {
    /* Optional: Icon ändern, wenn Layer versteckt ist, z.B. durchgestrichenes Auge */
    /* Oder einfach die Farbe ändern */
    opacity: 0.5;
}
.layer-list-item.drag-over-target {
    border-top: 2px dashed #0d6efd; /* Beispiel: Linie oben anzeigen */
    /* Oder: background-color: #e9ecef; */
}
.layer-list-item:dragstart { /* Manchmal wird dies vom Browser nicht gut unterstützt, opacity ist besser */
    /* border: 2px dashed red; */
}

.position-button-grid .btn {
    flex-basis: calc(100% / 3);
    /* Jeder Button nimmt 1/3 der Breite ein */
    border-radius: 0;
    /* Entfernt abgerundete Ecken für einen Block-Look */
    /* Wichtig: Bootstrap setzt Ränder für benachbarte Buttons in btn-group.
       Da wir keine btn-group mehr direkt verwenden, müssen wir das ggf. selbst steuern.
       Die outline-Buttons haben aber typischerweise Ränder, die sich überlappen.
       Wenn du normale Buttons (z.B. btn-secondary) verwendest, müsstest du Ränder anpassen. */
}

/* Optional: Um sicherzustellen, dass die Ränder korrekt überlappen und es keine doppelten Ränder gibt */
.position-button-grid .btn:not(:first-child):not(:nth-child(3n+1)) {
    margin-left: -1px;
    /* Lässt linke Ränder überlappen, außer beim ersten Element jeder Zeile */
}

.position-button-grid .btn:nth-child(n+4) {
    /* Alle Buttons ab der zweiten Zeile */
    margin-top: -1px;
    /* Lässt obere Ränder überlappen */
}

/* Optional: Wenn die Icons zu groß für btn-sm sind oder du die Größe anpassen willst */
.position-button-grid .material-icons {
    font-size: 18px;
    /* Anpassen nach Bedarf */
    display: block;
    /* Hilft bei der Zentrierung, wenn Button Padding hat */
    margin: auto;
    /* Zentriert das Icon horizontal, falls es kleiner als der Button ist */
}

.material-icons {
    font-size: 20px;
    /* Oder eine andere passende Größe */
    vertical-align: middle;
    /* Kann helfen, das Icon im Button besser auszurichten */
}


.notification-container {
    position: fixed;
    top: 20px; /* Abstand vom oberen Rand */
    right: 20px; /* Abstand vom rechten Rand */
    z-index: 10000; /* Über dem Page-Loader, falls mal eine Meldung währenddessen käme (unwahrscheinlich hier) */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Abstand zwischen Benachrichtigungen */
}

.notification {
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Startet unsichtbar für Animation */
    transform: translateX(100%); /* Startet außerhalb des sichtbaren Bereichs rechts */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    min-width: 250px; /* Mindestbreite */
    max-width: 400px; /* Maximalbreite */
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background-color: #28a745; /* Bootstrap Success Green */
}

.notification.error {
    background-color: #dc3545; /* Bootstrap Danger Red */
}

.notification.info {
    background-color: #17a2b8; /* Bootstrap Info Cyan */
}

.notification.warning {
    background-color: #ffc107; /* Bootstrap Warning Yellow */
    color: #212529; /* Dunklerer Text für gelben Hintergrund */
}

/* Optional: Schließen-Button (X) */
.notification .close-btn {
    float: right;
    margin-left: 15px;
    color: inherit; /* Nimmt Farbe von .notification an, kann angepasst werden */
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1; /* Wichtig für vertikale Ausrichtung */
    padding: 0;
}