/* Globale Styles & Overrides für Option B Editor-Fähigkeit */
* {
    word-break: break-word !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 50px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Modulare Bento Cards */
.bento-card {
    /* Hardware-Acceleration Zwang für Safari/WebKit. 
       Verhindert das harte "Einrasten" oder Verschlucken von 
       Tailwind hover:shadow Transitionen. */
    transform: translateZ(0);
    will-change: transform, box-shadow;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease !important;
}

/* Magnetischer Button Effekt (wird via JS im Zusammenspiel behandelt, hier CSS-Basis) */
.btn-magnetic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    will-change: transform;
}

/* Noise Overlay - Pointer Events None ensures it doesn't block interaction */
svg filter feTurbulence {
    mix-blend-mode: multiply;
}

/* --- Lightbox System --- */
#lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#lightbox-overlay.active #lightbox-image {
    transform: scale(1);
}

#lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

#lightbox-close:hover {
    color: #2ebd59;
    transform: scale(1.1) rotate(90deg);
}

/* Background image classes mapped from index.php inline styles 
   so GrapesJS does not strip them during serialization */
.bg-it-support {
    background-image: url('/assets/img/it-support.jpeg');
}

.bg-security {
    background-image: url('/assets/img/security.jpeg');
}

.bg-privatkunden-bg {
    background-image: url('/assets/img/privatkunden-bg.jpeg');
}

.bg-mittelstand-bg {
    background-image: url('/assets/img/mittelstand-bg.jpeg');
}

.bg-sponsoring-bg {
    background-image: url('/assets/img/sponsoring-bg.jpeg');
}

.bg-it-support-cta {
    background-image: url('/assets/img/it-support-cta.jpeg');
}

/* S-Tier Apple Glassmorphism Effect for Webentwicklung Bento Boxes 
   Isolated here to protect it from GrapesJS serialization bugs and ensure 
   Safari/WebKit hardware-accelerates the backdrop-filter natively. */
.apple-glass-bento {
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.apple-glass-bento:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}