html {
                scroll-behavior: smooth;
            }
            body {
                color: #0b1f33;
                background: #ffffff;
                -webkit-font-smoothing: antialiased;
            }
            ::selection {
                background: #bfe4ff;
                color: #05243b;
            }

            .font-display {
                font-family: "Plus Jakarta Sans", Inter, sans-serif;
            }
            .font-800 {
                font-weight: 800;
            }
            .font-700 {
                font-weight: 700;
            }

            /* Gradients & surfaces */
            .grad-hero {
                background: linear-gradient(rgba(0, 114, 207, 0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 114, 207, 0.035) 1px, transparent 1px),
                    radial-gradient(900px 600px at 82% 0%, rgba(0, 114, 207, 0.18), transparent 62%),
                    radial-gradient(700px 500px at 0% 15%, rgba(61, 191, 204, 0.12), transparent 58%),
                    linear-gradient(180deg, #f6fafd 0%, #ffffff 78%);
                background-size:
                    48px 48px,
                    48px 48px,
                    auto,
                    auto,
                    auto;
            }
            .grad-navy {
                background: radial-gradient(700px 400px at 85% 10%, rgba(0, 114, 207, 0.3), transparent 60%),
                    radial-gradient(600px 500px at 10% 90%, rgba(0, 90, 166, 0.38), transparent 60%),
                    linear-gradient(160deg, #073457 0%, #05243b 100%);
            }
            .text-grad {
                background: linear-gradient(100deg, #073457 0%, #0072cf 100%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }
            .glass {
                background: rgba(255, 255, 255, 0.72);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.6);
            }
            .ring-hair {
                box-shadow: inset 0 0 0 1px rgba(10, 37, 64, 0.08);
            }

            /* Scroll reveal */
            .reveal {
                opacity: 0;
                transform: translateY(18px);
                transition:
                    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .reveal.in {
                opacity: 1;
                transform: none;
            }

            /* Nav */
            .nav-link {
                position: relative;
            }
            .nav-link::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -4px;
                height: 2px;
                width: 0;
                background: linear-gradient(90deg, #0072cf, #005aa6);
                transition: width 0.25s ease;
            }
            .nav-link:hover::after,
            .nav-link:focus-visible::after {
                width: 100%;
            }

            /* Buttons */
            .btn-primary {
                background: linear-gradient(100deg, #005aa6, #0072cf);
                transition:
                    transform 0.2s ease,
                    filter 0.2s ease,
                    box-shadow 0.2s ease;
            }
            .btn-primary:hover {
                filter: brightness(1.06);
                transform: translateY(-2px);
                box-shadow: 0 16px 30px -16px rgba(0, 90, 166, 0.75);
            }
            .product-frame {
                transform: perspective(1400px) rotateY(-2.5deg) rotateX(1deg);
                transform-origin: center;
            }
            .micro-grid {
                background-image: radial-gradient(rgba(0, 114, 207, 0.18) 0.8px, transparent 0.8px);
                background-size: 14px 14px;
            }

            /* Cards */
            .lift {
                transition:
                    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.28s ease,
                    border-color 0.28s ease,
                    background-color 0.28s ease;
            }
            .lift:hover {
                transform: translateY(-4px);
            }

            /* Accordion */
            .faq-panel {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.35s ease;
            }
            .faq-chevron {
                transition: transform 0.3s ease;
            }

            @keyframes pulseDot {
                0%,
                100% {
                    opacity: 0.35;
                }
                50% {
                    opacity: 1;
                }
            }
            .pulse-dot {
                animation: pulseDot 2.4s ease-in-out infinite;
            }

            @keyframes floatY {
                0%,
                100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-8px);
                }
            }
            .float {
                animation: floatY 6s ease-in-out infinite;
            }

            :focus-visible {
                outline: 2px solid #0072cf;
                outline-offset: 2px;
                border-radius: 6px;
            }

            @media (prefers-reduced-motion: reduce) {
                html {
                    scroll-behavior: auto;
                }
                .reveal {
                    opacity: 1 !important;
                    transform: none !important;
                    transition: none !important;
                }
                .float,
                .pulse-dot {
                    animation: none !important;
                }
                .btn-primary:hover,
                .lift:hover {
                    transform: none !important;
                }
                * {
                    transition: none !important;
                }
            }
            @media (max-width: 1023px) {
                .product-frame {
                    transform: none;
                }
            }

            .doc-timeline {
                --timeline-duration: 10s;
                --timeline-blue: #0072cf;
                --timeline-navy: #073457;
                --timeline-muted: rgba(7, 52, 87, 0.14);
            }

            /* ---------- Desktop ---------- */

            .doc-timeline-track {
                position: relative;
                padding-top: 56px;
            }

            .doc-timeline-line {
                position: absolute;
                top: 81px;
                left: 10%;
                right: 10%;
                height: 3px;
                overflow: hidden;
                border-radius: 999px;
                background: rgba(7, 52, 87, 0.10);
            }

            .doc-timeline-progress {
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(
                    90deg,
                    #005aa6 0%,
                    #0072cf 55%,
                    #4da6ee 100%
                );
                transform: scaleX(0);
                transform-origin: left center;
            }

            /* Bewegtes Dokument */

            .doc-timeline-document {
                position: absolute;
                z-index: 20;
                top: 45px;
                left: calc(10% - 21px);
                display: flex;
                align-items: center;
                gap: 8px;
                white-space: nowrap;
                pointer-events: none;
            }

            .doc-timeline-document-icon {
                position: relative;
                display: grid;
                place-items: center;
                width: 42px;
                height: 42px;
                color: #ffffff;
                border: 3px solid #ffffff;
                border-radius: 13px;
                background: linear-gradient(135deg, #005aa6, #0072cf);
                box-shadow:
                    0 12px 30px -12px rgba(0, 90, 166, 0.75),
                    0 0 0 1px rgba(0, 114, 207, 0.12);
            }

            .doc-timeline-document-icon::after {
                content: "";
                position: absolute;
                inset: -7px;
                z-index: -1;
                border-radius: 17px;
                background: rgba(0, 114, 207, 0.13);
                opacity: 0;
            }

            .doc-timeline-document-label {
                padding: 6px 10px;
                color: #073457;
                font-size: 11px;
                font-weight: 600;
                border: 1px solid rgba(7, 52, 87, 0.08);
                border-radius: 9px;
                background: rgba(255, 255, 255, 0.96);
                box-shadow: 0 10px 24px -14px rgba(7, 52, 87, 0.45);
            }

            /* Stationen */

            .doc-timeline-steps {
                position: relative;
                z-index: 10;
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }

            .doc-timeline-step {
                position: relative;
                min-width: 0;
                padding: 0 12px;
                text-align: center;
            }

            .doc-timeline-node {
                position: relative;
                display: grid;
                place-items: center;
                width: 54px;
                height: 54px;
                margin: 0 auto;
                color: #0072cf;
                border: 5px solid #ffffff;
                border-radius: 18px;
                background: #ffffff;
                box-shadow:
                    0 0 0 1px rgba(7, 52, 87, 0.10),
                    0 12px 28px -18px rgba(7, 52, 87, 0.45);
                transition:
                    color 0.35s ease,
                    background-color 0.35s ease,
                    transform 0.35s ease,
                    box-shadow 0.35s ease;
            }

            .doc-timeline-node::after {
                content: "";
                position: absolute;
                inset: -9px;
                z-index: -1;
                border-radius: 23px;
                background: rgba(0, 114, 207, 0.13);
                opacity: 0;
            }

            .doc-timeline-number {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 24px;
                height: 24px;
                margin-top: 26px;
                color: #0072cf;
                font-size: 11px;
                font-weight: 700;
                border-radius: 999px;
                background: rgba(0, 114, 207, 0.09);
            }

            .doc-timeline-content {
                max-width: 220px;
                margin: 12px auto 0;
            }

            .doc-timeline-content h3 {
                color: #073457;
            }

            .doc-timeline-content p {
                color: #5b6b7b;
            }

            /* Animation startet erst, wenn reveal.in gesetzt wurde */

            .doc-timeline.reveal.in .doc-timeline-progress {
                animation: docTimelineProgress var(--timeline-duration)
                    cubic-bezier(0.42, 0, 0.2, 1) forwards;
            }

            .doc-timeline.reveal.in .doc-timeline-document {
                animation: docTimelineMove var(--timeline-duration)
                    cubic-bezier(0.42, 0, 0.2, 1) forwards;
            }

            .doc-timeline.reveal.in .doc-timeline-document-icon {
                animation: docTimelineDocumentPulse 1.25s ease-in-out infinite;
            }

            .doc-timeline.reveal.in .doc-timeline-step:nth-child(1) .doc-timeline-node {
                animation: docTimelineActivate 1.4s ease 0.2s both;
            }

            .doc-timeline.reveal.in .doc-timeline-step:nth-child(2) .doc-timeline-node {
                animation: docTimelineActivate 1.4s ease 2.4s both;
            }

            .doc-timeline.reveal.in .doc-timeline-step:nth-child(3) .doc-timeline-node {
                animation: docTimelineActivate 1.4s ease 4.6s both;
            }

            .doc-timeline.reveal.in .doc-timeline-step:nth-child(4) .doc-timeline-node {
                animation: docTimelineActivate 1.4s ease 6.8s both;
            }

            .doc-timeline.reveal.in .doc-timeline-step:nth-child(5) .doc-timeline-node {
                animation: docTimelineActivate 1.4s ease 8.8s both;
            }

            @keyframes docTimelineProgress {
                0% {
                    transform: scaleX(0);
                }

                8% {
                    transform: scaleX(0);
                }

                100% {
                    transform: scaleX(1);
                }
            }

            @keyframes docTimelineMove {
                0%,
                8% {
                    left: calc(10% - 21px);
                }

                25% {
                    left: calc(30% - 21px);
                }

                47% {
                    left: calc(50% - 21px);
                }

                69% {
                    left: calc(70% - 21px);
                }

                91%,
                100% {
                    left: calc(90% - 21px);
                }
            }

            @keyframes docTimelineActivate {
                0% {
                    color: #0072cf;
                    background: #ffffff;
                    transform: scale(1);
                }

                30%,
                75% {
                    color: #ffffff;
                    background: linear-gradient(135deg, #005aa6, #0072cf);
                    box-shadow:
                        0 0 0 7px rgba(0, 114, 207, 0.10),
                        0 18px 35px -18px rgba(0, 90, 166, 0.85);
                    transform: scale(1.08);
                }

                100% {
                    color: #0072cf;
                    background: #ffffff;
                    transform: scale(1);
                }
            }

            @keyframes docTimelineDocumentPulse {
                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-3px);
                }
            }

            /* ---------- Mobile Timeline ---------- */

            .doc-mobile-timeline {
                position: relative;
                padding-left: 60px;
            }

            .doc-mobile-timeline-line {
                position: absolute;
                top: 26px;
                bottom: 26px;
                left: 25px;
                width: 3px;
                overflow: hidden;
                border-radius: 999px;
                background: rgba(7, 52, 87, 0.10);
            }

            .doc-mobile-timeline-progress {
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(180deg, #005aa6, #0072cf, #4da6ee);
                transform: scaleY(0);
                transform-origin: top center;
            }

            .doc-mobile-document {
                position: absolute;
                z-index: 20;
                top: 4px;
                left: 4px;
                display: grid;
                place-items: center;
                width: 44px;
                height: 44px;
                color: #ffffff;
                border: 3px solid #ffffff;
                border-radius: 14px;
                background: linear-gradient(135deg, #005aa6, #0072cf);
                box-shadow: 0 12px 28px -12px rgba(0, 90, 166, 0.75);
            }

            .doc-mobile-step {
                position: relative;
                min-height: 154px;
                padding-bottom: 28px;
            }

            .doc-mobile-step:last-child {
                min-height: auto;
                padding-bottom: 0;
            }

            .doc-mobile-node {
                position: absolute;
                top: 0;
                left: -59px;
                display: grid;
                place-items: center;
                width: 48px;
                height: 48px;
                color: #0072cf;
                border: 4px solid #ffffff;
                border-radius: 15px;
                background: #ffffff;
                box-shadow:
                    0 0 0 1px rgba(7, 52, 87, 0.10),
                    0 12px 24px -16px rgba(7, 52, 87, 0.5);
            }

            .doc-timeline.reveal.in .doc-mobile-timeline-progress {
                animation: docMobileTimelineProgress var(--timeline-duration)
                    cubic-bezier(0.42, 0, 0.2, 1) forwards;
            }

            .doc-timeline.reveal.in .doc-mobile-document {
                animation:
                    docMobileTimelineMove var(--timeline-duration)
                        cubic-bezier(0.42, 0, 0.2, 1) forwards,
                    docTimelineDocumentPulse 1.25s ease-in-out infinite;
            }

            @keyframes docMobileTimelineProgress {
                from {
                    transform: scaleY(0);
                }

                to {
                    transform: scaleY(1);
                }
            }

            @keyframes docMobileTimelineMove {
                0%,
                8% {
                    top: 4px;
                }

                25% {
                    top: 24%;
                }

                47% {
                    top: 48%;
                }

                69% {
                    top: 72%;
                }

                91%,
                100% {
                    top: calc(100% - 48px);
                }
            }

            /* Reduzierte Bewegung */

            @media (prefers-reduced-motion: reduce) {
                .doc-timeline-progress,
                .doc-mobile-timeline-progress {
                    transform: scale(1) !important;
                    animation: none !important;
                }

                .doc-timeline-document,
                .doc-mobile-document {
                    animation: none !important;
                }

                .doc-timeline-document {
                    left: calc(90% - 21px);
                }

                .doc-mobile-document {
                    top: calc(100% - 48px);
                }

                .doc-timeline-node,
                .doc-mobile-node {
                    animation: none !important;
                }
            }


                    .legal-content {
            color: #334a5f;
            line-height: 1.8;
        }

        .legal-content h2 {
            margin-top: 2.75rem;
            margin-bottom: 1rem;
            color: #073457;
            font-family: "Plus Jakarta Sans", Inter, sans-serif;
            font-size: 1.65rem;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.02em;
        }

        .legal-content h3 {
            margin-top: 2rem;
            margin-bottom: 0.75rem;
            color: #073457;
            font-family: "Plus Jakarta Sans", Inter, sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1.4;
        }

        .legal-content h4 {
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            color: #073457;
            font-weight: 700;
        }

        .legal-content p {
            margin-top: 0.9rem;
            margin-bottom: 0.9rem;
        }

        .legal-content ul,
        .legal-content ol {
            margin-top: 1rem;
            margin-bottom: 1rem;
            padding-left: 1.4rem;
        }

        .legal-content ul {
            list-style: disc;
        }

        .legal-content ol {
            list-style: decimal;
        }

        .legal-content li {
            margin: 0.45rem 0;
            padding-left: 0.25rem;
        }

        .legal-content a {
            color: #0063b4;
            font-weight: 600;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

        .legal-content a:hover {
            color: #073457;
        }

        .legal-content strong {
            color: #0b1f33;
            font-weight: 700;
        }

        .legal-content blockquote {
            margin: 1.5rem 0;
            border-left: 3px solid #0072cf;
            border-radius: 0 0.75rem 0.75rem 0;
            background: #f4f8fc;
            padding: 1rem 1.25rem;
        }

        .legal-content table {
            display: block;
            width: 100%;
            margin: 1.5rem 0;
            overflow-x: auto;
            border-collapse: collapse;
        }

        .legal-content th,
        .legal-content td {
            border: 1px solid rgba(7, 52, 87, 0.12);
            padding: 0.75rem;
            text-align: left;
            vertical-align: top;
        }

        .legal-content th {
            background: #f4f8fc;
            color: #073457;
            font-weight: 700;
        }

        .legal-content > :first-child {
            margin-top: 0;
        }

        .legal-content > :last-child {
            margin-bottom: 0;
        }

        .float-delay-negative-2 {
            animation-delay: -2s;
        }

        /* Eingangskanäle – an die Funktionskarten angeglichen */
        .capture-grid > div {
            min-height: 230px;
            padding: 1.5rem;
            border-color: transparent;
            box-shadow:
                inset 0 0 0 1px rgba(10, 37, 64, 0.08),
                0 10px 30px -22px rgba(7, 52, 87, 0.38);
            transition:
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;
        }
        .capture-grid > div:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 114, 207, 0.2);
            box-shadow: 0 22px 52px -28px rgba(7, 52, 87, 0.5);
        }
        .capture-grid > div > span:first-child {
            width: 3rem;
            height: 3rem;
            color: #fff;
            background: linear-gradient(100deg, #005aa6, #0072cf);
            box-shadow: 0 10px 24px -12px rgba(0, 90, 166, 0.7);
        }
        .capture-grid > div > span:first-child svg {
            width: 1.5rem;
            height: 1.5rem;
        }
        .capture-grid h3 {
            color: #073457;
            font-family: "Plus Jakarta Sans", Inter, sans-serif;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.45;
        }
        .capture-grid h3 + p {
            margin-top: 0.5rem;
            color: #526579;
            font-size: 0.875rem;
            line-height: 1.65;
        }
        .capture-grid > div > span:last-child {
            width: fit-content;
            margin-top: auto;
            padding: 0.35rem 0.65rem;
            color: #526579;
            font-size: 0.7rem;
            font-weight: 600;
            border-radius: 999px;
            background: #f4f8fc;
        }

        /* AI product showcase */
        .ai-section {
            position: relative;
            background:
                radial-gradient(800px 600px at 82% 35%, rgba(0, 114, 207, 0.26), transparent 62%),
                radial-gradient(550px 440px at 10% 90%, rgba(61, 191, 204, 0.12), transparent 64%),
                linear-gradient(145deg, #041b2d 0%, #052d4b 52%, #06233a 100%);
        }
        .ai-section::before {
            position: absolute;
            inset: 0;
            content: "";
            pointer-events: none;
            opacity: 0.22;
            background-image: radial-gradient(rgba(255, 255, 255, 0.2) 0.7px, transparent 0.7px);
            background-size: 18px 18px;
            mask-image: linear-gradient(to right, black, transparent 48%);
        }
        .ai-section::after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, transparent, rgba(126, 225, 236, 0.55), transparent);
        }
        .ai-circuit {
            position: absolute;
            top: 8%;
            right: -8rem;
            width: 32rem;
            height: 32rem;
            opacity: 0.13;
            border: 1px solid #60d2df;
            border-radius: 50%;
            box-shadow: 0 0 0 4rem rgba(96, 210, 223, 0.08), 0 0 0 8rem rgba(96, 210, 223, 0.04);
        }
        .ai-circuit::before, .ai-circuit::after {
            position: absolute;
            content: "";
            background: #60d2df;
        }
        .ai-circuit::before { top: 50%; left: -20rem; width: 24rem; height: 1px; }
        .ai-circuit::after { top: -8rem; left: 50%; width: 1px; height: 14rem; }
        .ai-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.45rem 0.8rem;
            color: #86e5ed;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            border: 1px solid rgba(134, 229, 237, 0.18);
            border-radius: 999px;
            background: rgba(61, 191, 204, 0.08);
        }
        .ai-heading-accent {
            color: #83dce8;
        }
        .ai-feature-card {
            position: relative;
            overflow: hidden;
            padding: 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.055);
            backdrop-filter: blur(8px);
            transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
        }
        .ai-feature-card::after {
            position: absolute;
            inset: 0;
            content: "";
            pointer-events: none;
            opacity: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08), transparent 70%);
            transform: translateX(-70%);
            transition: opacity 0.3s ease, transform 0.55s ease;
        }
        .ai-feature-card:hover { transform: translateY(-3px); border-color: rgba(134, 229, 237, 0.25); background: rgba(255,255,255,0.075); }
        .ai-feature-card:hover::after { opacity: 1; transform: translateX(70%); }
        .ai-usecases {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1.25rem;
        }
        .ai-usecases span {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.4rem 0.65rem;
            color: rgba(255,255,255,0.58);
            font-size: 0.68rem;
            font-weight: 600;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 999px;
            background: rgba(3,23,38,0.26);
        }
        .ai-usecases svg { width: 0.8rem; height: 0.8rem; color: #76d9e3; }
        .ai-feature-icon {
            display: grid;
            place-items: center;
            width: 2.5rem;
            height: 2.5rem;
            color: #8de7ed;
            border-radius: 0.75rem;
            background: rgba(61, 191, 204, 0.12);
        }
        .ai-product-window {
            position: relative;
            z-index: 2;
            overflow: hidden;
            color: #0b1f33;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 1.25rem;
            background: #f7fafc;
            box-shadow: 0 36px 90px -28px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(255, 255, 255, 0.035);
            transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
        }
        .ai-product-window::before {
            position: absolute;
            z-index: 4;
            top: 3rem;
            bottom: 0;
            left: 35%;
            width: 1px;
            content: "";
            pointer-events: none;
            opacity: 0.32;
            background: linear-gradient(transparent, #62d4df, transparent);
            animation: aiScan 4.8s ease-in-out infinite;
        }
        .ai-window-bar {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 1rem;
            min-height: 3rem;
            padding: 0 1rem;
            border-bottom: 1px solid rgba(7, 52, 87, 0.08);
            background: #fff;
        }
        .ai-window-bar > div:first-child span {
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 999px;
            background: rgba(7, 52, 87, 0.16);
        }
        .ai-window-title { display: flex; align-items: center; gap: 0.4rem; color: #526579; font-size: 0.66rem; font-weight: 600; }
        .ai-live { display: flex; align-items: center; gap: 0.35rem; color: #16816f; font-size: 0.6rem; font-weight: 700; }
        .ai-live span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #27b69c; box-shadow: 0 0 0 4px rgba(39, 182, 156, 0.1); }
        .ai-interface { display: grid; grid-template-columns: 35% 65%; min-height: 31rem; }
        .ai-document-preview { display: grid; place-items: center; padding: 1.6rem 1rem; background: #e8eef3; border-right: 1px solid rgba(7, 52, 87, 0.08); }
        .ai-page { width: 100%; max-width: 11rem; min-height: 16rem; padding: 1.3rem 1rem; background: white; box-shadow: 0 8px 24px rgba(7, 52, 87, 0.1); }
        .ai-page-label { color: #0072cf; font-size: 0.42rem; font-weight: 800; letter-spacing: 0.12em; }
        .ai-page-title, .ai-page-subtitle, .ai-page-line { border-radius: 999px; background: #dbe4eb; }
        .ai-page-title { width: 74%; height: 0.55rem; margin: 0.7rem 0 1.2rem; background: #173d5c; }
        .ai-page-subtitle { width: 42%; height: 0.34rem; margin: 1.2rem 0 0.7rem; background: #6e8293; }
        .ai-page-line { width: 86%; height: 0.22rem; margin: 0.48rem 0; }
        .ai-page-line.wide { width: 100%; } .ai-page-line.short { width: 62%; }
        .ai-page-highlight { margin: 1rem -0.35rem 0.8rem; padding: 0.55rem 0.4rem; color: #0564aa; font-size: 0.45rem; font-weight: 700; background: #e7f5ff; border-left: 2px solid #1591e8; }
        .ai-panel { display: flex; flex-direction: column; min-width: 0; padding: 1rem; background: #fbfdff; }
        .ai-tabs { display: flex; gap: 0.35rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(7, 52, 87, 0.08); }
        .ai-tabs span { display: flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.55rem; color: #718293; font-size: 0.58rem; font-weight: 700; border-radius: 0.5rem; }
        .ai-tabs span.active { color: #0068b9; background: #eaf5fd; }
        .ai-summary-card { margin-top: 0.8rem; padding: 0.85rem; border: 1px solid rgba(0, 114, 207, 0.1); border-radius: 0.75rem; background: white; }
        .ai-answer-label { display: flex; align-items: center; gap: 0.4rem; color: #0069ba; font-size: 0.58rem; font-weight: 800; }
        .ai-answer-label span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 0.42rem; background: #eaf6ff; }
        .ai-summary-card > p { margin-top: 0.65rem; color: #53697c; font-size: 0.61rem; line-height: 1.6; }
        .ai-summary-card ul { margin-top: 0.55rem; }
        .ai-summary-card li { display: flex; gap: 0.4rem; margin-top: 0.32rem; color: #526579; font-size: 0.58rem; }
        .ai-summary-card li svg { width: 0.75rem; height: 0.75rem; flex: none; color: #16a085; }
        .ai-question { align-self: flex-end; max-width: 82%; margin-top: 0.8rem; padding: 0.55rem 0.7rem; color: white; font-size: 0.6rem; border-radius: 0.7rem 0.7rem 0.15rem 0.7rem; background: #096ebc; }
        .ai-answer { display: flex; gap: 0.45rem; margin-top: 0.55rem; color: #53697c; font-size: 0.6rem; line-height: 1.5; }
        .ai-answer > span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; flex: none; color: #0072cf; border-radius: 0.5rem; background: #e9f5fd; }
        .ai-input { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0.65rem 0.75rem; color: #91a0ad; font-size: 0.57rem; border: 1px solid rgba(7, 52, 87, 0.12); border-radius: 0.65rem; background: white; }
        .ai-input svg { padding: 0.2rem; color: white; border-radius: 0.3rem; background: #0072cf; box-sizing: content-box; }
        .ai-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
        .ai-orb-one { width: 11rem; height: 11rem; top: -3rem; right: -3rem; background: rgba(31, 157, 225, 0.2); }
        .ai-orb-two { width: 8rem; height: 8rem; bottom: -2rem; left: -2rem; background: rgba(61, 191, 204, 0.15); }
        .ai-floating-badge {
            position: absolute;
            z-index: 6;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.7rem 0.85rem;
            color: #0b1f33;
            border: 1px solid rgba(255,255,255,0.75);
            border-radius: 0.85rem;
            background: rgba(255,255,255,0.92);
            box-shadow: 0 16px 38px -18px rgba(0,0,0,0.6);
            backdrop-filter: blur(12px);
        }
        .ai-floating-badge > span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; color: white; border-radius: 0.6rem; background: linear-gradient(135deg,#006bc0,#31b5c4); }
        .ai-floating-badge svg { width: 1rem; height: 1rem; }
        .ai-floating-badge strong, .ai-floating-badge small { display: block; white-space: nowrap; }
        .ai-floating-badge strong { font-size: 0.66rem; }
        .ai-floating-badge small { margin-top: 0.08rem; color: #758696; font-size: 0.55rem; }
        .ai-floating-badge-top { top: -1.5rem; right: -1.1rem; animation: floatY 6s ease-in-out infinite; }
        .ai-floating-badge-bottom { bottom: 0.4rem; left: -1.5rem; animation: floatY 6.5s -2s ease-in-out infinite; }
        @keyframes aiScan { 0%,100% { opacity: 0.08; transform: translateX(-10px); } 50% { opacity: 0.5; transform: translateX(10px); } }
        @media (max-width: 639px) {
            .ai-product-window { transform: none; }
            .ai-interface { grid-template-columns: 1fr; min-height: auto; }
            .ai-document-preview { display: none; }
            .ai-panel { min-height: 28rem; }
            .ai-window-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .ai-floating-badge { display: none; }
            .ai-product-window::before { left: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .ai-product-window::before, .ai-floating-badge { animation: none !important; }
        }

/* ==========================================
   Back to Top
========================================== */

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(11, 116, 229, 0.1);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    z-index: 9999;
}


/* Sichtbar nach Scrollen */

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Hover */

.back-to-top:hover {
    transform: translateY(-4px);

    border-color: rgba(11, 116, 229, 0.18);

    box-shadow:
        0 22px 45px rgba(11, 116, 229, 0.18);
}


/* Tastaturfokus */

.back-to-top:focus-visible {
    outline: 3px solid rgba(11, 116, 229, 0.22);
    outline-offset: 4px;
}


/* ==========================================
   Fortschrittsring
========================================== */

.progress-ring {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);

    pointer-events: none;
}


.progress-ring-bg {
    fill: none;

    stroke: #e8eef7;
    stroke-width: 4;
}


.progress-ring-circle {
    fill: none;

    stroke: #0b74e5;
    stroke-width: 4;

    stroke-linecap: round;

    stroke-dasharray: 175.93;
    stroke-dashoffset: 175.93;

    transition:
        stroke-dashoffset 80ms linear,
        stroke 0.25s ease;
}


/* ==========================================
   Inhalt
========================================== */

.back-to-top-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    pointer-events: none;
}


/* Pfeil */

.back-to-top .back-to-top-content svg.lucide {
    width: 18px;
    height: 18px;

    color: #0b74e5;

    stroke-width: 2;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.back-to-top:hover .back-to-top-content svg.lucide {
    transform: translateY(-1px);
}


/* Prozentanzeige */

#scrollPercent {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    color: #0b74e5;

    font-variant-numeric: tabular-nums;

    transition: color 0.25s ease;
}


/* ==========================================
   100-%-Animation
========================================== */

.back-to-top.completed {
    animation: backToTopPulse 0.6s ease;
}


.back-to-top.completed .progress-ring-circle {
    stroke: #18b35b;
}


.back-to-top.completed #scrollPercent,
.back-to-top.completed .back-to-top-content svg.lucide {
    color: #18b35b;
}


@keyframes backToTopPulse {

    0%,
    100% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.08);

        box-shadow:
            0 0 0 10px rgba(24, 179, 91, 0.12),
            0 0 35px rgba(24, 179, 91, 0.25);
    }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 768px) {

    .back-to-top {
        right: 18px;
        bottom: 18px;

        width: 62px;
        height: 62px;
    }

    .back-to-top .back-to-top-content svg.lucide {
        width: 17px;
        height: 17px;
    }

    #scrollPercent {
        font-size: 10px;
    }

}


/* ==========================================
   Reduced Motion
========================================== */

@media (prefers-reduced-motion: reduce) {

    .back-to-top,
    .back-to-top .back-to-top-content svg.lucide,
    .progress-ring-circle {
        transition: none;
    }

    .back-to-top.completed {
        animation: none;
    }

}