/* ############################################## */
/* GLOSSAR */
        .mein-glossar-design .glossary-index-navigation,
        .mein-glossar-design .ln-letters {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 5px !important;
            margin-bottom: 30px !important;
            justify-content: center !important;
        }

        .mein-glossar-design .glossary-index-navigation a,
        .mein-glossar-design .ln-letters a {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 30px !important;
            height: 30px !important;
            background: #f8f9fa !important;
            border: 1px solid #dee2e6 !important;
            border-radius: 4px !important;
            color: #004a99 !important;
            font-size: 14px !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
        }

        .mein-glossar-design .glossary-index-navigation a:hover {
            background: #004a99 !important;
            color: #ffffff !important;
            border-color: #004a99 !important;
        }

        .mein-glossar-design ul, 
        .mein-glossar-design ol {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 15px !important;
            padding: 0 !important;
            list-style: none !important;
        }

        .mein-glossar-design ul li {
            flex: 1 1 calc(25% - 15px) !important;
            min-width: 200px !important;
            margin: 0 !important;
        }

        .mein-glossar-design ul li a {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            background: #ffffff !important;
            color: #333333 !important;
            border: 1px solid #e0e0e0 !important;
            border-left: 5px solid #004a99 !important;
            border-radius: 4px !important;
            padding: 10px 15px !important;
            min-height: 80px !important;
            font-size: 14px !important; 
            line-height: 1.3 !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            overflow: hidden !important;
            word-wrap: break-word !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
            transition: all 0.2s ease-in-out !important;
        }

        .mein-glossar-design ul li a:hover {
            background: #f0f7ff !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
            color: #004a99 !important;
        }

        @media (max-width: 1024px) {
            .mein-glossar-design ul li {
                flex: 1 1 calc(50% - 15px) !important;
            }
        }

        @media (max-width: 600px) {
            .mein-glossar-design ul li {
                flex: 1 1 100% !important;
            }
            .mein-glossar-design ul li a {
                font-size: 15px !important;
            }
        }

        /* ============================================================
           2. RATGEBER-HUB 
           ============================================================ */
        .ratgeber-hub { max-width: 1200px; margin: 0 auto; font-family: sans-serif; }

        .hub-header { 
            background: #2c2e30;
            padding: 60px 20px; 
            border-radius: 24px; 
            text-align: center; 
            margin-bottom: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .hub-header h2 { color: #ffffff !important; font-size: 32px !important; font-weight: 700 !important; margin-bottom: 15px !important; }
        .hub-header p { color: #bdc3c7 !important; font-size: 18px; max-width: 700px; margin: 0 auto; }

        #hubSearch { 
            margin-top: 25px;
            color: #333 !important; 
            background: #ffffff !important; 
            padding: 14px 30px !important; 
            border-radius: 50px !important; 
            border: none !important; 
            width: 80%; max-width: 450px; 
            font-size: 16px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .category-nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 45px; flex-wrap: wrap; }

        .cat-pill { 
            padding: 10px 24px; 
            background: #004a99; 
            border: 1px solid #ffffff; 
            border-radius: 50px; 
            cursor: pointer; 
            font-weight: 600; 
            color: #ffffff; 
            transition: all 0.3s ease;
        }

        .cat-pill:hover { background: #004a99; border-color: #f39c12; color: #f39c12; }
        .cat-pill.active { background: #f39c12 !important; color: #004a99 !important; border-color: #f39c12; box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3); }

        .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }

        .post-card { 
            background: #ffffff; 
            border-radius: 20px; 
            padding: 30px; 
            display: flex; 
            flex-direction: column; 
            justify-content: space-between;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid #f0f0f0;
        }

        .post-card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            border-color: #004a99;
        }

        .badge-elegant { 
            display: inline-block;
            color: #004a99;
            border: 1px solid #004a99;
            padding: 5px 14px; 
            font-size: 11px; 
            font-weight: 700; 
            border-radius: 50px; 
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .post-card h4 { font-size: 20px !important; color: #222 !important; margin-bottom: 15px !important; line-height: 1.4 !important; }
        .post-card p { color: #666 !important; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }

        .read-more-link { 
            text-decoration: none; 
            color: #004a99; 
            font-weight: 700; 
            font-size: 13px; 
            display: flex; 
            align-items: center; 
            gap: 8px;
            transition: gap 0.3s;
        }

        .read-more-link:hover .arrow { margin-left: 5px; color: #F19D28}
        .read-more-link:hover {text-decoration: none;}

        .load-more-container { text-align: center; margin-top: 60px; }

        .btn-elegant { 
            background: #ffffff; 
            color: #004a99; 
            padding: 16px 40px; 
            border-radius: 50px; 
            border: 2px solid #004a99; 
            font-weight: 700; 
            cursor: pointer; 
            transition: all 0.3s;
        }

        .btn-elegant:hover { background: #f39c12; color: #fff; box-shadow: 0 5px 20px rgba(243, 156, 18, 0.4); }

        .post-card.is-hidden { display: none !important; }

        mark, .highlight {
            background-color: transparent !important;
            display: inline !important;
        }

        .ratgeber-hub span[style*="background-color"], 
        .ratgeber-hub mark.highlight {
            display: inline !important; 
            background-color: #f1f1f1 !important; 
            color: #000000 !important;
            padding: 0 2px !important;
            margin: 0 !important;
            width: auto !important;
            box-shadow: none !important;
        }

        .ratgeber-hub h4, 
        .ratgeber-hub p,
        .post-card {
            background-image: none !important;
        }

        .ratgeber-hub .search-wrap input#hubSearch {
            border: 2px solid #e0e0e0 !important;
            border-radius: 50px !important;
            padding: 12px 25px !important;
            font-size: 16px !important;
            width: 100% !important;
            max-width: 500px !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
            display: block !important;
            margin: 0 auto !important;
        }

        .ratgeber-hub .search-wrap input#hubSearch:focus {
            border-color: #ff9800 !important; 
            outline: none !important;
            box-shadow: 0 4px 20px rgba(255, 152, 0, 0.2) !important;
            transform: scale(1.02);
        }

        .ratgeber-hub .read-more-link {
            display: inline-flex !important;
            align-items: center !important;
            color: #ff9800 !important; 
            font-weight: 700 !important;
            text-decoration: none !important;
            transition: all 0.3s ease !important;
            margin-top: 15px !important;
        }

        .ratgeber-hub .read-more-link:hover {
            color: #e68a00 !important;
            padding-left: 5px !important;
        }

        .ratgeber-hub .read-more-link .arrow {
            margin-left: 8px !important;
            transition: transform 0.3s ease !important;
        }

        .ratgeber-hub .read-more-link:hover .arrow {
            transform: translateX(5px) !important;
        }

        .ratgeber-hub .btn-elegant {
            background-color: #ff9800 !important;
            border: none !important;
            color: #ffffff !important;
            border-radius: 50px !important;
            padding: 12px 30px !important;
            font-weight: 600 !important;
            cursor: pointer !important;
            transition: background 0.3s ease !important;
        }

        .ratgeber-hub .btn-elegant:hover {
            background-color: #e68a00 !important;
            box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
        }

        #security-quiz-app {
            max-width: 800px;
            margin: 20px auto;
            background: #ffffff;
            padding: 35px;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
            font-family: sans-serif;
            color: #1f2a37;
            border: 1px solid rgba(229, 231, 235, 0.5);
        }
        #security-quiz-app h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: #0f172a; }
        #security-quiz-app p { font-size: 15px; color: #64748b; margin-bottom: 24px; }
        .progress { height: 8px; background: #f1f5f9; border-radius: 100px; overflow: hidden; margin-bottom: 12px; }
        #bar { height: 100%; width: 0%; background: #2563eb; transition: width 0.5s; }
        #counter { font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 25px; }
        .question { font-size: 18px; font-weight: 700; margin-bottom: 24px; color: #1e293b; }
        .answers button {
            display: block; width: 100%; padding: 16px 20px; margin: 12px 0;
            background: #ffffff; border-radius: 12px; cursor: pointer;
            font-weight: 500; color: #334155; border: 1.5px solid #f1f5f9;
            text-align: center; box-sizing: border-box;
        }
        .answers button:hover { background: #f8faff; border-color: #2563eb; color: #2563eb; }
        #result { display: none; margin-top: 30px; padding: 24px; border-radius: 16px; text-align: center; }
        .low { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
        .medium { background: #fffbeb; color: #92400e; border: 1px solid #fef3c7; }
        .high { background: #fef2f2; color: #991b1b; border: 1px solid #fee2e2; }
        .print-btn {
            margin-top: 20px; width: 100%; padding: 14px; border: none;
            border-radius: 12px; background: #0f172a; color: white;
            font-weight: 600; cursor: pointer;
        }

        /* ============================================================
           3. HOVER EFFEKT BEI PRODUKTGRID
           ============================================================ */