/**
 * Info-Block Styles
 * Version 3.0
 */

/* ===== Desktop-Ansicht (> 781px) ===== */
@media (min-width: 782px) {
    .formular-info-block {
        /* Desktop: Normaler Block-Inhalt wird angezeigt */
    }
    
    .formular-info-desktop-content {
        display: block;
    }
    
    .formular-info-lightbox-content {
        display: none !important;
    }
    
    /* Info-Icons in Text werden ausgeblendet */
    .formular-info-icon {
        display: none !important;
    }
}

/* ===== Mobile/Tablet-Ansicht (≤ 781px) ===== */
@media (max-width: 781px) {
    /* Block-Container auf Mobile verstecken - Desktop-Content ausblenden */
    .formular-info-block .formular-info-desktop-content {
        display: none !important;
    }
    
    /* Info-Icon im Text */
    .formular-info-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin: 0 4px;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        position: relative;
        top: -1px;
    }
    
    .formular-info-icon:hover {
        opacity: 1;
    }
    
    .formular-info-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    
    /* Lightbox Overlay */
    .formular-info-lightbox-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        animation: fadeIn 0.3s ease forwards;
    }
    
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
    
    /* Lightbox Content Container */
    .formular-info-lightbox-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        max-width: 600px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        padding: 24px;
        position: relative;
        transform: scale(0.95);
        animation: scaleIn 0.3s ease forwards;
    }
    
    @keyframes scaleIn {
        to {
            transform: scale(1);
        }
    }
    
    /* Close Button */
    .formular-info-lightbox-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f0f0f0;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 32px;
        color: #666;
        transition: all 0.2s ease;
        z-index: 10;
        padding: 0;
    }
    
    .formular-info-lightbox-close:hover {
        background: #e0e0e0;
        color: #333;
    }
    
    /* Lightbox Content Styling */
    .formular-info-lightbox-container h1,
    .formular-info-lightbox-container h2,
    .formular-info-lightbox-container h3,
    .formular-info-lightbox-container h4,
    .formular-info-lightbox-container h5,
    .formular-info-lightbox-container h6 {
        margin-top: 0;
        margin-bottom: 0.75em;
    }
    
    .formular-info-lightbox-container p {
        margin-bottom: 1em;
        line-height: 1.6;
    }
    
    .formular-info-lightbox-container ul,
    .formular-info-lightbox-container ol {
        margin-bottom: 1em;
        padding-left: 1.5em;
    }
    
    .formular-info-lightbox-container li {
        margin-bottom: 0.5em;
    }
    
    .formular-info-lightbox-container img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    
    /* Scrollbar Styling für Lightbox */
    .formular-info-lightbox-container::-webkit-scrollbar {
        width: 8px;
    }
    
    .formular-info-lightbox-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    .formular-info-lightbox-container::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }
    
    .formular-info-lightbox-container::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
}

/* Body Lock beim Lightbox öffnen */
body.formular-info-lightbox-open {
    overflow: hidden;
}