/* 🎨 GTK Farbpalette – basierend auf #00a8d7 */
.gtk-bg-100 { background-color: #ccf2fb; }
.gtk-bg-200 { background-color: #99e5f7; }
.gtk-bg-300 { background-color: #66d8f3; }
.gtk-bg-400 { background-color: #00a8d7; } /* default */
.gtk-bg-500 { background-color: #008cbf; } /* etwas dunkler */
.gtk-bg-600 { background-color: #00719f; }
.gtk-bg-700 { background-color: #00587f; }
.gtk-bg-800 { background-color: #003f5f; }
.gtk-bg-900 { background-color: #00263f; }

.gtk-text-100 { color: #ccf2fb; }
.gtk-text-200 { color: #99e5f7; }
.gtk-text-300 { color: #66d8f3; }
.gtk-text-400 { color: #00a8d7; } /* default */
.gtk-text-500 { color: #008cbf; } /* etwas dunkler */
.gtk-text-600 { color: #00719f; }
.gtk-text-700 { color: #00587f; }
.gtk-text-800 { color: #003f5f; }
.gtk-text-900 { color: #00263f; }

/* Hover-Utility */
.gtk-hover:hover { 
    background-color: #008cbf; 
    color: #fff; 
    transition: background-color 0.2s; 
}

/* GTK Buttons */
.gtk-btn {
    background-color: #00a8d7;
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.gtk-btn:hover { background-color: #008cbf; }
.gtk-btn:active { background-color: #00719f; }

/* optional custom styles */

#dropzone-container label {
    cursor: pointer;
}

#dropzone-container label {
    top: 65%;
}

#dropzone-container label span {
    padding: 0.375rem 0.75rem;
}

/* Kompaktere Textgrößen */
body {
    font-size: 0.9375rem;
    line-height: 1.5;
}

h1 { font-size: 1.875rem; line-height: 2.25rem; }
h2 { font-size: 1.5rem; line-height: 2rem; }
h3 { font-size: 1.25rem; line-height: 1.75rem; }
h4 { font-size: 1.125rem; line-height: 1.5rem; }

/* Kompaktere Abstände */
.compact-spacing > * + * {
    margin-top: 0.75rem;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    h1 { font-size: 1.5rem; line-height: 2rem; }
    h2 { font-size: 1.25rem; line-height: 1.75rem; }
    h3 { font-size: 1.125rem; line-height: 1.5rem; }
}

/* Performance Optimierungen */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduziere Repaints */
.card, .btn-primary, .btn-secondary, .gtk-btn {
    will-change: auto;
    transform: translateZ(0);
}

/* Lazy Loading Images */
/* img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
} */

/* img[loading="lazy"].loaded {
    opacity: 1;
} */

/* Optimize Scrolling */
body {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}