section h2 {
        text-align: center;
        margin-bottom: 20px;
    }

    section p {
        margin: 10px 0;
    }

    .platform-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    .platform-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .platform-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 10px;
    }

    .platform-title h2 {
        margin: 0;
    }

    .platform-icon {
        height: 52px;
        object-fit: contain;
        margin: 0;
    }

    .platform-card .btn {
        margin-top: 15px;
    }

    .platform-card.primary {
        border: 2px solid #25D366;
    }

    .full {
        width: 100%;
        text-align: center;
    }

    .testimonial.highlight {
        border: 2px solid #ffd54a;
    }

    .chat-preview {
        background: linear-gradient(160deg, #ffffff 0%, #eaf6ff 100%);
        border: 1px solid rgba(30, 145, 242, 0.18);
        border-radius: 32px;
        padding: 18px;
        box-shadow: var(--shadow);
        max-width: 520px;
        margin-left: auto;
        box-sizing: border-box;
        height: 480px;
        min-height: 455px;
    }

    /* Verhindert, dass die Hero-Sektion und darunterliegende Bereiche durch temporäre Chat-Elemente vertikal wackeln. */
    .chat-hero .hero-grid {
        align-items: flex-start;
    }

    .hero-feature-item {
        margin-right: 10px;
        display: inline-block;
        white-space: nowrap;
    }

    .hero-feature-tick {
        color: green;
        font-size: 24px;
        vertical-align: middle;
    }

    .chat-preview-header {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--blue-dark);
        color: white;
        padding: 14px;
        border-radius: 22px;
        margin-bottom: 16px;
    }

    .chat-preview-header span {
        display: block;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.85rem;
        font-weight: 700;
    }

    .chat-preview-header strong {
        font-size: 18px;
    }

    .chat-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--yellow);
        color: var(--blue-dark);
        font-weight: 900;
        font-size: 22px;
    }

    .chat-message {
        max-width: 82%;
        padding: 10px 13px;
        border-radius: 18px;
        margin-bottom: 8px;
        box-shadow: 0 8px 20px rgba(0, 31, 79, 0.06);
    }

    .chat-message strong {
        display: block;
        color: var(--blue);
        font-size: 0.82rem;
        margin-bottom: 2px;
    }

    .chat-message p {
        margin: 0;
        font-size: 0.95rem;
        color: #172033;
    }

    .chat-message.incoming {
        background: white;
        border-top-left-radius: 6px;
    }

    .chat-message.own {
        margin-left: auto;
        background: var(--yellow-soft);
        border-top-right-radius: 6px;
    }


    .chat-flow .chat-message:last-child,
    .chat-flow .typing-indicator:last-child {
        margin-bottom: 0;
    }

    .chat-flow {
        position: relative;
        height: 331px;
        min-height: 331px;
        overflow: hidden;
        padding-right: 4px;
        scroll-behavior: smooth;
    }

    .chat-flow .chat-message,
    .chat-flow .typing-indicator {
        will-change: opacity, transform;
    }

    .chat-flow[data-animated="true"] .chat-message[data-step] {
        display: none;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
    }

    .chat-flow[data-animated="true"] .typing-indicator {
        display: none;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
    }

    .chat-flow[data-animated="true"] .chat-message.is-visible {
        display: block;
        opacity: 1;
        transform: translateY(0);
        animation: calmMessageIn 520ms cubic-bezier(.2, .8, .2, 1) both;
    }

    .typing-indicator {
        display: none;
        align-items: center;
        gap: 5px;
        max-width: 82%;
        margin: 0 0 3px 0;
        padding: 8px 12px;
        border-radius: 16px;
        border-top-left-radius: 6px;
        background: rgba(255, 255, 255, 0.92);
        color: #627089;
        font-size: 0.82rem;
        font-weight: 800;
        box-shadow: 0 8px 20px rgba(0, 31, 79, 0.045);
    }

    .typing-indicator.own {
        margin-left: auto;
        border-top-left-radius: 16px;
        border-top-right-radius: 6px;
        background: rgba(255, 246, 190, 0.96);
    }

    .typing-indicator.is-visible {
        display: inline-flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        animation: calmTypingIn 260ms ease-out both;
    }

    .typing-indicator i {
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: currentColor;
        opacity: 0.38;
        animation: typingPulse 1.05s ease-in-out infinite;
    }

    .typing-indicator i:nth-of-type(2) {
        animation-delay: 140ms;
    }

    .typing-indicator i:nth-of-type(3) {
        animation-delay: 280ms;
    }

    @keyframes calmMessageIn {
        from {
            opacity: 0;
            transform: translateY(9px) scale(.985);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes calmTypingIn {
        from {
            opacity: 0;
            transform: translateY(5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes typingPulse {

        0%,
        70%,
        100% {
            opacity: .28;
            transform: translateY(0);
        }

        35% {
            opacity: .9;
            transform: translateY(-2px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .chat-flow {
            overflow: visible;
            height: auto;
            min-height: 331px;
        }

        .chat-flow[data-animated="true"] .chat-message[data-step] {
            display: block;
            opacity: 1;
            transform: none;
            animation: none;
        }

        .chat-flow[data-animated="true"] .typing-indicator,
        .typing-indicator {
            display: none;
        }
    }

    .chat-voices {
        padding: 42px 5px;
    }

    .chat-voices-grid {
        display: grid;
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 22px;
    }

    .chat-voice-card {
        background: var(--card);
        border-radius: var(--radius);
        padding: 26px;
        box-shadow: 0 12px 30px rgba(0, 31, 79, 0.08);
        border: 1px solid rgba(0, 31, 79, 0.08);
    }

    .chat-voice-featured {
        background:
            radial-gradient(circle at top left, rgba(255, 200, 0, 0.22), transparent 42%),
            white;
        border: 2px solid rgba(255, 200, 0, 0.75);
    }

    .chat-voice-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: var(--blue-light);
        color: var(--blue-dark);
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    .chat-voice-card p {
        color: #445066;
        font-size: 1.04rem;
        margin-bottom: 18px;
    }

    .chat-voice-featured p {
        color: var(--blue-dark);
        font-size: 1.16rem;
        font-weight: 800;
    }

    .chat-voice-card span {
        color: var(--blue-dark);
        font-weight: 900;
        font-size: 0.9rem;
    }

    @media (max-width: 900px) {
        .chat-voices-grid {
            grid-template-columns: 1fr;
        }

        .chat-voice-card {
            padding: 22px;
        }
    }

    .safety { padding: 5px; }
    .safety .container {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        align-items: center;
        gap: 56px;
    }
    .safety-visual {
        display: flex;
        justify-content: center;
    }
    .safety-visual img {
        width: min(100%, 300px);
        height: auto;
        opacity: 0.92;
    }
    .safety-grid h2 {
        text-align: left;
    }

    @media (max-width: 800px) {
        .safety .container  {
            grid-template-columns: 1fr;
            gap: 28px;
        }

        .safety-visual {
            order: -1;
        }

        .safety-visual img {
            width: min(78%, 200px);
        }
    }