/* ==========================================================================
   WapsterBase Data-Engine Widget Styling (db_widget.css)
   ========================================================================== */

/* Haupt-Wrapper */
.wapster-db-widget-wrapper {
    margin: 24px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Card Container */
.wapster-db-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.01) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Buttons Interaktion & Animation */
.wapster-open-modal-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wapster-open-modal-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12) !important;
    background: #ffffff !important;
}

.wapster-open-modal-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Modal Overlay & PopIn Keyframe Animation */
.wapster-db-modal-overlay {
    animation: wapsterFadeIn 0.25s ease-out forwards;
}
/* Paragraph */
#band-template .head div p{
    color:#0b0909 !important;

}
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes wapsterFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Input-Felder und Textareas */
.wapster-db-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
}

.wapster-db-input:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    background: #ffffff !important;
}

/* Eintrags-Karten Hover-Effekte */
.wapster-db-card div[style*="border:1px solid #e2e8f0"],
.wapster-db-card div[style*="border: 1px solid #e2e8f0"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.wapster-db-card div[style*="border:1px solid #e2e8f0"]:hover,
.wapster-db-card div[style*="border: 1px solid #e2e8f0"]:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
}

/* Schließen-Button im Modal */
.wapster-close-modal-btn {
    transition: color 0.15s ease, transform 0.15s ease !important;
}

.wapster-close-modal-btn:hover {
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 640px) {
    .wapster-db-card {
        border-radius: 12px !important;
    }
    .wapster-db-modal-overlay > div {
        width: 95% !important;
        padding: 18px !important;
    }
    /* Paragraph */
    .band-template .head div p{
        color:#0b0909 !important;
    }
}