/* KI-Assistent (HSL), aus hsl-chatbot.php ausgelagert am 08.10.2026. Wird nachgeladen, ohne den Seitenaufbau aufzuhalten. */
:root {
                --hsl-accent: var(--wp--preset--color--petrol,#0F6F73);
                --hsl-accent-2: #3F8A8A;
                --hsl-surface: var(--wp--preset--color--weiss,#FFFFFF);
                --hsl-surface-2: #F7F4EE;
                --hsl-ink: var(--wp--preset--color--tinte,#2E2A24);
                --hsl-muted: var(--wp--preset--color--tinte-soft,#5F5A50);
                --hsl-border: var(--wp--preset--color--petrol-soft,#E8F0ED);
            }

            #hsl-chatbot-button,
            #hsl-chatbot-widget,
            #hsl-chatbot-widget * {
                box-sizing: border-box;
            }

            #hsl-chatbot-button {
                position: fixed;
                right: 20px;
                bottom: 20px;
                width: 60px;
                height: 60px;
                border: 0;
                border-radius: 999px;
                background: linear-gradient(135deg, var(--hsl-accent) 0%, var(--hsl-accent-2) 100%);
                color: #fff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 99998;
                box-shadow: 0 14px 30px rgba(15, 111, 115, 0.26);
                gap: 10px;
                padding: 0 16px;
            }

            #hsl-chatbot-button img {
                width: 34px;
                height: 34px;
                object-fit: contain;
                display: block;
                flex: 0 0 34px;
            }

            #hsl-chatbot-button .label {
                display: none;
                font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                letter-spacing: 0.01em;
                white-space: nowrap;
            }

            #hsl-chatbot-button.has-label {
                width: auto;
                min-width: 60px;
            }

            #hsl-chatbot-button.has-label .label {
                display: inline-block;
            }

            #hsl-chatbot-widget {
                position: fixed;
                right: 20px;
                bottom: 92px;
                width: 380px;
                height: 600px;
                max-width: calc(100vw - 20px);
                background: var(--hsl-surface);
                border-radius: 22px;
                overflow: hidden;
                display: none;
                flex-direction: column;
                z-index: 99999;
                box-shadow: 0 18px 50px rgba(29, 29, 29, 0.20);
            }

            #hsl-chatbot-widget.open {
                display: flex;
            }

            .hsl-chatbot-header {
                background: linear-gradient(135deg, var(--hsl-accent) 0%, var(--hsl-accent-2) 100%);
                color: #fff;
                padding: 18px 20px;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 12px;
            }

            .hsl-chatbot-header h3 {
                font: 600 18px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                margin: 0;
            }

            .hsl-chatbot-header p {
                margin: 4px 0 0;
                font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                opacity: 0.92;
            }

            #hsl-chatbot-close {
                border: 0;
                background: transparent;
                color: #fff;
                font-size: 28px;
                line-height: 1;
                cursor: pointer;
                padding: 0;
                width: 32px;
                height: 32px;
            }

            .hsl-chatbot-messages {
                flex: 1;
                overflow-y: auto;
                padding: 18px;
                background: linear-gradient(180deg, var(--wp--preset--color--papier,#F7F4EE) 0%, var(--hsl-surface-2) 100%);
            }

            .hsl-message {
                display: flex;
                gap: 10px;
                margin: 0 0 14px;
                align-items: flex-end;
            }

            .hsl-message.user {
                flex-direction: row-reverse;
            }

            .hsl-avatar {
                width: 36px;
                height: 36px;
                border-radius: 999px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 36px;
                overflow: hidden;
                background: #fff;
            }

            .hsl-message.bot .hsl-avatar {
                background: linear-gradient(135deg, var(--hsl-accent) 0%, var(--hsl-accent-2) 100%);
            }

            .hsl-message.user .hsl-avatar {
                background: var(--wp--preset--color--petrol-soft,#E8F0ED);
                border: 1px solid var(--hsl-border);
            }

            .hsl-avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .hsl-bubble {
                max-width: 78%;
                border-radius: 14px;
                padding: 12px 14px;
                font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                color: var(--hsl-ink);
                white-space: pre-wrap;
                word-wrap: break-word;
            }

            .hsl-message.bot .hsl-bubble {
                background: #fff;
                border-bottom-left-radius: 4px;
                box-shadow: 0 1px 0 rgba(29, 29, 29, 0.04);
            }

            .hsl-message.user .hsl-bubble {
                background: var(--wp--preset--color--petrol-soft,#E8F0ED);
                color: var(--hsl-ink);
                border-bottom-right-radius: 4px;
                border: 1px solid rgba(15, 111, 115, 0.18);
            }

            .hsl-chatbot-input {
                border-top: 1px solid #e9ecef;
                background: #fff;
                padding: 14px;
            }

            .hsl-input-row {
                display: flex;
                gap: 8px;
            }

            #hsl-chatbot-input {
                flex: 1;
                border: 1px solid #d1d5db;
                border-radius: 22px;
                padding: 12px 16px;
                font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                outline: none;
            }

            #hsl-chatbot-input:focus {
                border-color: var(--hsl-accent);
                box-shadow: 0 0 0 3px rgba(15, 111, 115, 0.16);
            }

            #hsl-chatbot-send {
                min-width: 104px;
                height: 44px;
                border-radius: 999px;
                border: 0;
                background: linear-gradient(135deg, var(--hsl-accent) 0%, var(--hsl-accent-2) 100%);
                color: #fff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 0 16px;
                flex: 0 0 auto;
                font: 600 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            }

            #hsl-chatbot-send span {
                display: inline-block;
            }

            #hsl-chatbot-send:disabled {
                opacity: 0.55;
                cursor: not-allowed;
            }

            .hsl-typing {
                display: inline-flex;
                gap: 4px;
                padding: 12px 14px;
            }

            .hsl-typing span {
                width: 8px;
                height: 8px;
                border-radius: 999px;
                background: #b9a58c;
                animation: hsl-typing 1.2s infinite ease-in-out;
            }

            .hsl-typing span:nth-child(2) { animation-delay: 0.18s; }
            .hsl-typing span:nth-child(3) { animation-delay: 0.36s; }

            @keyframes hsl-typing {
                0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
                40% { transform: translateY(-6px); opacity: 1; }
            }

            .hsl-ai-badge {
                display: inline-block;
                vertical-align: middle;
                margin-left: 8px;
                padding: 2px 8px;
                font: 700 10px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                background: rgba(255, 255, 255, 0.22);
                border: 1px solid rgba(255, 255, 255, 0.4);
                border-radius: 999px;
                color: #fff;
            }

            #hsl-chatbot-button .ai-dot {
                position: absolute;
                top: -4px;
                right: -4px;
                min-width: 20px;
                height: 20px;
                padding: 0 5px;
                border-radius: 999px;
                background: #fff;
                color: var(--hsl-accent);
                font: 700 9px/20px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                letter-spacing: 0.02em;
                text-align: center;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
                border: 1px solid rgba(15, 111, 115, 0.15);
            }

            @media (max-width: 480px) {
                #hsl-chatbot-button {
                    width: auto;
                    min-width: 120px;
                    padding: 0 14px;
                    gap: 8px;
                }

                #hsl-chatbot-button .label {
                    display: inline-block;
                    font-size: 11px;
                }

                #hsl-chatbot-widget {
                    top: 12px;
                    right: 12px;
                    left: 12px;
                    bottom: auto;
                    width: auto;
                    height: auto;
                    max-height: none;
                    border-radius: 22px;
                }

                #hsl-chatbot-button {
                    right: 14px;
                    bottom: 14px;
                }

                .hsl-chatbot-header {
                    padding: 14px 16px;
                }

                .hsl-chatbot-header h3 {
                    font-size: 16px;
                }

                .hsl-chatbot-messages {
                    padding: 14px;
                }

                .hsl-chatbot-input {
                    padding: 12px;
                }

                .hsl-input-row {
                    gap: 8px;
                }

                #hsl-chatbot-send {
                    min-width: 44px;
                    width: 44px;
                    padding: 0;
                }

                #hsl-chatbot-send span {
                    display: none;
                }
            }

/* Sichtbar erst, wenn diese Datei da ist (Gegenstück zur kleinen Sperre im Seitenquelltext). */
#hsl-chatbot-button{visibility:visible}