/* ============================================================
   Finconext – Apple-inspired Design System
   Flat, typographic, maximum whitespace
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ── Mobile/Tablet Text-Safety ────────────────────────────
   Sorgt dafür, dass deutsche Komposita (z. B. „Privathaftpflicht-
   versicherung", „Dienst-und-Amtshaftpflichtversicherung") auf
   schmalen Viewports nicht aus dem Layout brechen. Greift global,
   damit auch zukünftige Seiten/Produkte automatisch profitieren. */
body {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6,
.hero__headline, .advisors__headline, .feature__headline, .faq__headline,
.legal-page__title, .lp__headline, .chat-titlebar__name,
.advisor-card__name, .agent-card__name {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
p, li, dd, dt, label, span, a, blockquote {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

body {
    font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    background: #ffffff;
    color: #1D1D1F;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

/* ── View switching ──────────────────────────────────────── */
.view { display: none; }

/* SSR-Hero: server-rendered LCP-Block für Advisor-Hub-Pages. Wird sofort
   gezeichnet (kein JS-Wait), bleibt sichtbar bis app.js view-chat aktiviert. */
.ssr-hero {
    padding: 96px 24px 56px;
    text-align: center;
    background: #FFFFFF;
    animation: viewFadeIn 0.3s ease;
}
.ssr-hero__inner { max-width: 760px; margin: 0 auto; }
.ssr-hero__h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 14px;
    color: #143566;
}
.ssr-hero__sub {
    font-size: 17px;
    color: #555;
    margin: 0;
}
/* Wenn view-chat aktiv ist, hat app.js bereits gerendert -> ssr-hero ausblenden. */
body:has(#view-chat.active) #ssr-hero,
body:has(#view-landing.active) #ssr-hero { display: none; }
#view-index.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #FFFFFF;
    animation: viewFadeIn 0.4s ease;
}
#view-chat.active  {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    animation: viewFadeIn 0.35s ease;
}
#view-chat.active.view--compact { min-height: 0; }
#view-chat.active.view--compact .container--chat { flex: 0 0 auto; min-height: 0; }

@keyframes viewFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Landing: Nav ────────────────────────────────────────── */
.lp-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lp-nav__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 22px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.lp-nav__logo-img {
    height: 28px;
    width: auto;
    display: block;
}

.lp-nav__logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #143566;
    letter-spacing: -0.3px;
}

.lp-nav__back {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #143566;
    padding: 4px 0;
    text-decoration: underline;
    display: inline-block;
}
.lp-nav__back:hover { opacity: 0.7; }

.lp-nav__links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.lp-nav__sep {
    font-size: 12px;
    color: #D2D2D7;
    user-select: none;
}

.lp-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
}

.lp-nav__hamburger span {
    display: block;
    height: 2px;
    background: #1D1D1F;
    border-radius: 2px;
    transition: transform 0.22s, opacity 0.22s;
    transform-origin: center;
}

.lp-nav__hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-nav__hamburger--open span:nth-child(2) { opacity: 0; }
.lp-nav__hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lp-nav__dropdown {
    display: none;
    flex-direction: column;
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid #E5E5EA;
    padding: 8px 0;
}

.lp-nav__dropdown--open {
    display: flex;
}

.lp-nav__dropdown a {
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 400;
    color: #1D1D1F;
    text-decoration: none;
    border-bottom: 1px solid #F2F2F7;
    transition: background 0.15s;
}

.lp-nav__dropdown a:last-child { border-bottom: none; }
.lp-nav__dropdown a:hover { background: #F5F5F7; }

.lp-nav__links a {
    font-size: 12px;
    font-weight: 400;
    color: #1D1D1F;
    text-decoration: none;
    transition: color 0.2s;
}

.lp-nav__links a:hover {
    color: #6E6E73;
}

/* ── Landing: Hero ───────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 22px 60px;
    background: #F5F5F7;
    text-align: center;
}

.hero__scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #6E6E73;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    animation: heroScrollBounce 2s ease-in-out infinite;
    transition: opacity 0.2s;
}
.hero__scroll-hint:hover { opacity: 1; }
.hero__scroll-hint svg { display: block; }

@keyframes heroScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__scroll-hint { animation: none; }
}

.hero__inner {
    max-width: 980px;
}

.hero__label {
    font-size: 21px;
    font-weight: 400;
    color: #1D1D1F;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero__label-logo {
    height: 24px;
    width: auto;
}

.hero__headline {
    font-size: 80px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.003em;
    line-height: 1.05;
    margin-bottom: 20px;
}

.hero__sub {
    font-size: 19px;
    color: #1D1D1F;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto 32px;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #143566;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 400;
    font-family: inherit;
    padding: 12px 24px;
    border-radius: 980px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.hero__cta:hover {
    opacity: 0.8;
}

/* ── Landing: Advisors Section ───────────────────────────── */
.advisors {
    padding: 100px 22px;
    background: #FFFFFF;
    text-align: center;
}

.advisors__inner {
    max-width: 680px;
    margin: 0 auto;
}

.advisors__label {
    font-size: 14px;
    font-weight: 600;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.advisors__headline {
    font-size: 48px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.003em;
    line-height: 1.1;
    margin-bottom: 56px;
}

.agents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
}

.agent-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #E5E5EA;
    border-radius: 20px;
    padding: 24px 28px;
    text-decoration: none;
    color: #1D1D1F;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    opacity: 0;
    animation: cardFadeIn 0.5s ease forwards;
}

/* Coloured accent stripe in the brand colour */
.agent-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--card-brand-color, #143566);
    transition: width 0.2s ease;
}

.agent-card:nth-child(1) { animation-delay: 0.05s; }
.agent-card:nth-child(2) { animation-delay: 0.12s; }
.agent-card:nth-child(3) { animation-delay: 0.19s; }
.agent-card:nth-child(4) { animation-delay: 0.26s; }
.agent-card:nth-child(5) { animation-delay: 0.33s; }

@keyframes cardFadeIn {
    to { opacity: 1; }
}

@media (hover: hover) {
    .agent-card:hover {
        transform: translateY(-2px);
        border-color: var(--card-brand-color, #143566);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .agent-card:hover::before {
        width: 10px;
    }
    .agent-card:hover .agent-card__arrow {
        transform: translateX(4px);
        color: var(--card-brand-color, #143566);
    }
}

.agent-card__dot {
    display: none;
}

.agent-card__logo {
    height: 52px;
    width: 130px;
    object-fit: contain;
    object-position: center center;
    flex-shrink: 0;
    margin-left: 8px;
}
/* Degenia-Logo (800x600, 4:3) erscheint im 130x52-Slot (2.5:1) horizontal
   schmaler als die anderen 2:1-Logos. Optisch hochskalieren, damit es
   ähnlich groß wirkt. */
.agent-card__logo[src*="degenia"] { transform: scale(1.4); }

.agent-card__name {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1D1D1F;
}

.agent-card__arrow {
    color: #6E6E73;
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.2s ease, color 0.2s ease;
}

.agent-card__arrow {
    color: #6E6E73;
    font-size: 18px;
    transition: transform 0.2s;
}

@media (hover: hover) {
    .agent-card:hover .agent-card__arrow {
        transform: translateX(3px);
        color: #1D1D1F;
    }
}

/* ── Landing: Feature Sections ───────────────────────────── */
.feature {
    padding: 100px 22px;
    text-align: center;
}

.feature--gray {
    background: #F5F5F7;
}

.feature--white {
    background: #FFFFFF;
}

.feature--city {
    background-size: cover;
    background-position: center 65%;
    position: relative;
}

.feature--city.city-img-loaded {
    background-image: url('/images/finconext-frankfurt-am-main.jpg');
}

.feature--city::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
}

.feature--city .feature__inner {
    position: relative;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 56px 52px;
    box-shadow: 0 2px 32px rgba(0, 0, 0, 0.07);
}

.feature__inner {
    max-width: 680px;
    margin: 0 auto;
}

.feature__label {
    font-size: 14px;
    font-weight: 600;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.feature__headline {
    font-size: 48px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.003em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.feature__text {
    font-size: 17px;
    color: #6E6E73;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
}

.feature__ctas {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.feature__btn {
    display: inline-block;
    font-size: 17px;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.feature__btn--primary {
    background: #1D1D1F;
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 980px;
}

.feature__btn--primary:hover {
    opacity: 0.8;
}

.feature__btn--whatsapp {
    background: #25D366;
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 980px;
    border: 2px solid #25D366;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feature__btn--whatsapp:hover {
    background: #1eba57;
    border-color: #1eba57;
    color: #FFFFFF;
}

.feature__btn-icon {
    height: 20px;
    width: auto;
}

.feature__btn--whatsapp .feature__btn-icon {
    filter: brightness(0) invert(1);
}

.feature__btn--link {
    background: #143566;
    color: #fff;
    padding: 12px 24px;
    border-radius: 980px;
    border: none;
}

.feature__btn--link:hover {
    background: #0d2447;
    text-decoration: none;
    color: #fff;
}

/* ── Landing: FAQ ────────────────────────────────────────── */
.faq {
    padding: 100px 22px;
    background: #FFFFFF;
}

.faq__inner {
    max-width: 680px;
    margin: 0 auto;
}

.faq__label {
    font-size: 14px;
    font-weight: 600;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    text-align: center;
}

.faq__headline {
    font-size: 48px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.003em;
    line-height: 1.1;
    margin-bottom: 48px;
    text-align: center;
}

.faq__item {
    border-top: 1px solid #D2D2D7;
    padding: 20px 0;
}

.faq__item:last-child {
    border-bottom: 1px solid #D2D2D7;
}

.faq__question {
    font-size: 19px;
    font-weight: 600;
    color: #1D1D1F;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    font-size: 28px;
    font-weight: 300;
    color: #6E6E73;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.faq__item[open] .faq__question::after {
    content: "−";
    transform: rotate(0deg);
}

.faq__answer {
    font-size: 17px;
    color: #6E6E73;
    line-height: 1.5;
    margin-top: 12px;
}

/* ── Legal Pages (Impressum, Datenschutz, Cookies, Kundeninfo) ─── */
.legal-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #FFFFFF;
}

.legal-page__main {
    flex: 1;
    padding: 120px 22px 60px;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
}

/* Breite Variante für Hub-Seiten wie /schadensmeldung, die ein Grid mit
   Versicherer-Kacheln enthalten und mehr Raum brauchen. */
.legal-page--wide .legal-page__main {
    max-width: 1240px;
}

.legal-page__label {
    font-size: 14px;
    font-weight: 600;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.legal-page__title {
    font-size: 48px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.003em;
    line-height: 1.1;
    margin-bottom: 32px;
}

.legal-page__intro {
    font-size: 19px;
    color: #6E6E73;
    line-height: 1.5;
    margin-bottom: 32px;
}

.legal-page__body {
    font-size: 17px;
    color: #1D1D1F;
    line-height: 1.6;
}

.legal-page__body h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 36px 0 10px;
    color: #1D1D1F;
    letter-spacing: -0.01em;
}

.legal-page__body h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 6px;
    color: #1D1D1F;
}

.legal-page__body p { margin-bottom: 12px; }
.legal-page__body a {
    color: #0066cc;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.legal-page__body a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .legal-page__main {
        padding: 76px 20px 40px;
    }
    .legal-page__title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .legal-page__intro {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .legal-page__body { font-size: 16px; line-height: 1.55; }
    .legal-page__body h2 { font-size: 19px; margin: 28px 0 8px; }
    .legal-page__body h3 { font-size: 16px; margin: 18px 0 4px; }
}

/* ── Landing: Footer ─────────────────────────────────────── */
.lp-footer {
    background: #fff;
    border-top: 1px solid #D2D2D7;
    padding: 10px 22px;
}

.lp-footer__inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.lp-footer__copy {
    font-size: 12px;
    color: #6E6E73;
    margin: 0;
}

.lp-footer__links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.lp-footer__links a {
    font-size: 12px;
    color: #6E6E73;
    text-decoration: none;
    transition: color 0.2s;
}

.lp-footer__links a:hover {
    color: #1D1D1F;
    text-decoration: underline;
}

.lp-footer__sep {
    font-size: 12px;
    color: #D2D2D7;
    user-select: none;
}

.lp-footer__region {
    font-size: 12px;
    color: #6E6E73;
}

.lp-footer__region a {
    color: #6E6E73;
    text-decoration: none;
    transition: color 0.2s;
}

.lp-footer__region a:hover {
    color: #1D1D1F;
    text-decoration: underline;
}

/* ── Chat Header ─────────────────────────────────────────── */
.site-header {
    background: rgba(250, 251, 252, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-logo {
    font-size: 18px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.site-logo__img {
    height: 36px;
    width: auto;
    display: block;
}

.site-logo__text {
    font-size: 22px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.3px;
}

.header-spacer {
    width: 130px;
    flex-shrink: 1;
}

.back-link {
    color: #6E6E73;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.back-link:hover { color: #1D1D1F; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.container--chat {
    padding-top: 16px;
    padding-bottom: 16px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* ── Chat widget ─────────────────────────────────────────── */
.chat-wrapper {
    background: #ffffff;
    border: none;
    border-radius: 18px;
    /* clip statt hidden: behält das Eck-Clipping, erzeugt aber KEINEN
       Scroll-Container — sonst würde der sticky-Header (.chat-titlebar)
       beim Scrollen nicht oben fixiert bleiben. */
    overflow: clip;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    animation: chatSlideUp 0.4s ease;
}

@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Compact mode: wrapper shrinks to content while topic selection is shown */
.chat-wrapper--compact {
    flex: 0 0 auto;
}
.chat-wrapper--compact .chat-messages {
    flex: 0 0 auto;
    min-height: 0;
    overflow-y: visible;
    padding-bottom: 0;
}
/* Input-Zeile und Disclaimer NUR auf der Versicherer-Startseite (Topic-Auswahl) ausblenden */
.chat-wrapper:has(#topicSelection) .chat-input-row,
.chat-wrapper:has(#topicSelection) .chat-disclaimer {
    display: none;
}

.chat-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
    /* Header bleibt beim Scrollen oben fixiert (wie die Produktseiten-Topbar). */
    position: sticky;
    top: 0;
    z-index: 60;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.chat-titlebar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-titlebar__logo {
    height: 32px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Versicherer-Headline in der Hero-Mitte ausblenden (Logo + Markenname).
   Das kleine Logo oben links im Header (.chat-titlebar__logo bzw.
   .lp-topbar__logo) bleibt zur Wiedererkennung erhalten. */
.lp__headline { display: none !important; }

.chat-titlebar__name {
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.2px;
}

.chat-titlebar__back {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    color: #6E6E73;
    padding: 4px 0;
    flex-shrink: 0;
    transition: color 0.2s;
}
.chat-titlebar__back:hover { color: #1d1d1f; }

/* Header-Suche-Trigger auf der Versichererseite (übergeordneter Berater).
   Öffnet das Such-Overlay; im eingebetteten Produkt-Chat ausgeblendet,
   weil dort die Produktseiten-Topbar bereits einen Such-Trigger hat. */
.chat-titlebar__search-trigger {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1.5px solid var(--agent-color, #2563eb);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--agent-color, #2563eb);
    padding: 7px 15px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.chat-titlebar__search-trigger:hover { background: color-mix(in srgb, var(--agent-color, #2563eb) 10%, transparent); }
.chat-titlebar__search-trigger svg { width: 18px; height: 18px; }
.view-chat--embedded .chat-titlebar__search-trigger { display: none; }
@media (max-width: 600px) {
    .chat-titlebar__search-trigger-label { display: none; }
}

/* ── Such-Overlay: zentriertes Fenster (Modal) in der Bildschirmmitte ── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: saturate(140%) blur(4px);
    -webkit-backdrop-filter: saturate(140%) blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: search-overlay-fade 0.15s ease;
}
.search-overlay.hidden { display: none; }
@keyframes search-overlay-fade { from { opacity: 0; } to { opacity: 1; } }
.search-overlay__panel {
    width: min(94vw, 640px);
    background: #fff;
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
    animation: search-overlay-pop 0.18s ease;
}
@keyframes search-overlay-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.search-overlay__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f3f4f6;
    border: 1.5px solid var(--agent-color, var(--lp-brand, #14AFD1));
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
}
.search-overlay__icon {
    display: inline-flex;
    color: var(--agent-color, var(--lp-brand, #14AFD1));
    flex-shrink: 0;
}
.search-overlay__icon svg { width: 22px; height: 22px; }
.search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font: inherit;
    font-size: clamp(17px, 2vw, 20px);
    color: #1d1d1f;
    padding: 10px 0;
}
.search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-overlay__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: var(--agent-color, var(--lp-brand, #14AFD1));
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.search-overlay__submit:hover { opacity: 0.9; }
.search-overlay__submit svg { width: 22px; height: 22px; }
.search-overlay__close {
    align-self: center;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #6E6E73;
    padding: 6px 10px;
    transition: color 0.15s ease;
}
.search-overlay__close:hover { color: #1d1d1f; }
@media (max-width: 600px) {
    .search-overlay__panel { padding: 16px; gap: 12px; }
    .search-overlay__submit { width: 42px; height: 42px; }
}
.chat-titlebar__back--branded {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1d1d1f;
    font-size: 0;
}
.chat-titlebar__back--branded .chat-titlebar__logo {
    height: 20px;
}
.chat-titlebar__back--branded .chat-titlebar__name {
    font-size: 13px;
}

/* Messages area */
.chat-messages {
    overflow-y: visible;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fafbfc;
    flex: 1 0 auto;
}

.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Bubbles */
.chat-bubble-row {
    display: flex;
}
.chat-bubble-row--user      { justify-content: flex-end; padding-bottom: 20px; }
.chat-bubble-row--assistant { justify-content: flex-start; padding-bottom: 5px; animation: bubbleFadeIn 0.3s ease; }

@keyframes bubbleFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.55;
    word-wrap: break-word;
}

.chat-bubble--user {
    background: var(--agent-color, #2563eb);
    color: #ffffff;
    border-bottom-right-radius: 6px;
    white-space: pre-wrap;
}

.chat-bubble--assistant {
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.chat-bubble--assistant img { height: 18px; width: auto; vertical-align: middle; margin-right: 2px; display: inline; }

/* Loading dots */
.chat-bubble--loading { opacity: 0.75; }

.loading-dots { display: inline-flex; gap: 4px; align-items: center; }
.loading-dots span {
    width: 6px; height: 6px;
    background: #c7c7cc;
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-5px); }
}

/* Input row */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 24px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.chat-input:focus {
    border-color: var(--agent-color, #2563eb);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.chat-input:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-send-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 24px;
    background: var(--agent-color, #2563eb);
    color: #ffffff;
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.15s;
}
.chat-send-btn:hover:not(:disabled) { opacity: 0.85; transform: scale(1.02); }
.chat-send-btn:active:not(:disabled) { transform: scale(0.97); }
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Microphone button (voice input) */
.chat-mic-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d2d2d7;
    border-radius: 50%;
    background: #fafafa;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.chat-mic-btn:hover:not(:disabled) {
    background: #ffffff;
    border-color: var(--agent-color, #2563eb);
    color: var(--agent-color, #2563eb);
}
.chat-mic-btn:active:not(:disabled) { transform: scale(0.95); }
.chat-mic-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-mic-btn.is-recording {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* ── Markdown rendering inside assistant bubbles ────────── */
.chat-bubble--assistant { line-height: 1.4; }
.chat-bubble--assistant p { margin: 0 0 2px 0; line-height: 1.4; }
.chat-bubble--assistant p:last-child { margin-bottom: 0; }
.chat-bubble--assistant p:has(> strong) { margin-top: 1em; margin-bottom: 0.4em; }
.chat-bubble--assistant p:first-child:has(> strong) { margin-top: 0; }
.chat-bubble--assistant ul,
.chat-bubble--assistant ol { margin: 1px 0; padding-left: 16px; }
.chat-bubble--assistant li { margin-bottom: 1px; line-height: 1.4; }
.chat-bubble--assistant strong { font-weight: 700; color: #1d1d1f; }
.chat-bubble--assistant em { font-style: italic; }
.chat-bubble--assistant h1,
.chat-bubble--assistant h2,
.chat-bubble--assistant h3 {
    font-size: 16px; font-weight: 700; line-height: 1.4;
    margin: 4px 0 1px; color: #1d1d1f;
}
.chat-bubble--assistant code {
    background: #f5f5f7; border: 1px solid #e8e8ed; border-radius: 4px;
    padding: 1px 4px; font-family: "SF Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 12px; color: #1d1d1f;
}
.chat-bubble--assistant pre {
    background: #1d1d1f; border-radius: 10px; padding: 10px 12px; margin: 2px 0; overflow-x: auto;
}
.chat-bubble--assistant pre code {
    background: none; border: none; padding: 0; color: #e8e8ed; font-size: 12px; line-height: 1.4;
}
.chat-bubble--assistant blockquote {
    border-left: 3px solid #d2d2d7; margin: 2px 0; padding: 1px 8px;
    color: #6E6E73; font-style: italic;
}
.chat-bubble--assistant a { color: #2563eb; text-decoration: underline; }
.chat-bubble--assistant a.bubble-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    margin: 10px 0 4px;
    background: var(--agent-color, #2563eb);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 980px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}
@media (hover: hover) {
    .chat-bubble--assistant a.bubble-action-btn:hover {
        opacity: 0.9;
        transform: scale(1.02);
    }
}
.chat-bubble--assistant hr { border: none; border-top: 1px solid #f5f5f7; margin: 4px 0; }
.chat-bubble--assistant table { border-collapse: collapse; font-size: 13px; margin: 2px 0; width: 100%; }
.chat-bubble--assistant th,
.chat-bubble--assistant td { border: 1px solid #e8e8ed; padding: 3px 7px; text-align: left; line-height: 1.4; }
.chat-bubble--assistant th { background: #fafafa; font-weight: 600; }

/* Blinking cursor */
.cursor {
    display: inline-block; width: 2px; height: 1em;
    background: #86868b; margin-left: 1px; vertical-align: text-bottom;
    animation: blink 0.75s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Quick Reply Button ─────────────────────────────────── */
.quick-reply-row {
    justify-content: flex-end;
    animation: bubbleFadeIn 0.3s ease;
}

.quick-reply-btn {
    padding: 10px 20px;
    border-radius: 20px 20px 4px 20px;
    border: 2px solid var(--agent-color, #2563eb);
    background: transparent;
    color: var(--agent-color, #2563eb);
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

@media (hover: hover) {
    .quick-reply-btn:hover {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
        transform: scale(1.02);
    }
}

/* Checkmark styling in assistant bubbles */
.check-mark {
    color: var(--agent-color, #2563eb);
    font-weight: 700;
}

/* ── Landing Page (conversion-optimized topic selection) ─── */
.lp {
    align-self: stretch;
    margin: 4px 0;
}

.lp__hero {
    text-align: center;
    padding: 22px 22px 12px;
    background: #ffffff;
    border-radius: 20px;
}

.lp__headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: clamp(15px, 4.8vw, 22px);
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin: 0 0 28px;
    line-height: 1.25;
}
/* Versichername bricht (v. a. mobil) nicht um; auf kleinen Screens skaliert die
   Schrift via clamp, damit der Name in eine Zeile passt. */
.lp__headline-name {
    white-space: nowrap;
}
.lp__headline-logo {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0;
}

.lp__subline {
    font-size: 16px;
    color: #6E6E73;
    margin: 8px 0 28px;
    line-height: 1.4;
}

.lp__ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp__cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 28px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s, background 0.2s, color 0.2s, box-shadow 0.2s;
    opacity: 0;
    transform: translateY(10px);
    animation: btnFadeIn 0.35s ease forwards;
}

.lp__cta--primary {
    padding: 16px 20px;
    background: #ea6a00;
    color: #ffffff;
    border: none;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    animation-delay: 0.05s;
}

/* GVO-Sonderfall: Rechner-Buttons auf dem Versicherer-Hub in Dunkelblau
   #004B9B (Beitrag-berechnen-Hero und Preis-berechnen-Pills unter den
   Produktkacheln). Andere Versicherer behalten das Standard-Orange. */
[data-advisor="gvo-versicherung"] .lp__cta--primary {
    background: #004B9B;
}
[data-advisor="gvo-versicherung"] .lp__product-calc {
    background: #004B9B;
    box-shadow: 0 2px 8px rgba(0, 75, 155, 0.22);
}
[data-advisor="gvo-versicherung"] .lp__product-calc:hover {
    background: #003a7a;
    box-shadow: 0 6px 18px rgba(0, 75, 155, 0.32);
}

/* DEURAG-Sonderfall: Rechner-Buttons auf dem Versicherer-Hub in Hellblau
   #D7EDFA mit dunkler Schrift (analog zu den Produktseiten in landing.css).
   Reines Weiß auf Hellblau wäre nicht lesbar. */
[data-advisor="deurag"] .lp__cta--primary {
    background: #D7EDFA;
    color: #0b3b5c;
    border: 1.5px solid #14AFD1;
}
[data-advisor="deurag"] .lp__cta--primary .lp__cta-icon { color: #0b3b5c; }
[data-advisor="deurag"] .lp__product-calc {
    background: #D7EDFA;
    color: #0b3b5c;
    box-shadow: 0 2px 8px rgba(20, 175, 209, 0.22);
}
[data-advisor="deurag"] .lp__product-calc__icon { color: #0b3b5c; }
[data-advisor="deurag"] .lp__product-calc:hover {
    background: #bce0f5;
    color: #0b3b5c;
    box-shadow: 0 6px 18px rgba(20, 175, 209, 0.32);
}

.lp__cta--secondary {
    padding: 14px 20px;
    background: transparent;
    border: 2px solid var(--agent-color, #2563eb);
    color: #5a5a5a;
    font-size: 16px;
    font-weight: 600;
    animation-delay: 0.12s;
}

.lp__cta-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.lp__cta--primary .lp__cta-icon { color: #ffffff; }
.lp__cta--secondary .lp__cta-icon { color: var(--agent-color, #2563eb); }

.lp__cta-icon svg { width: 22px; height: 22px; }

.lp__trust {
    font-size: 12px;
    color: #6E6E73;
    margin-top: 16px;
    line-height: 1.5;
}

/* Trust + CTA-Sektion unter den Kacheln: Trustpilot oben (Badge + Widget),
   darunter die beiden Haupt-CTAs (Beitrag berechnen / Versicherung auswählen). */
.lp__trust-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
}
.lp__trust-cta .lp__trust {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.lp__trust-cta .lp__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
}
.lp__trust-cta .trustpilot-widget { width: 100%; max-width: 320px; }


.lp__check {
    color: var(--agent-color, #2563eb);
    font-weight: 700;
}

.lp__section {
    padding: 18px 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}


/* Kontakt-Spalte: nur auf Desktop sichtbar */
.lp__section-col--kontakt { display: none; }
.lp__info-btn--phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #5a5a5a;
    cursor: pointer;
}

.lp__section-title {
    font-size: 12px;
    font-weight: 700;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.lp__info-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 28px;
    border: 2px solid #d2d2d7;
    background: transparent;
    color: #5a5a5a;
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    opacity: 0;
    transform: translateY(10px);
    animation: btnFadeIn 0.35s ease forwards;
    animation-delay: 0.2s;
}

.lp__btn-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--agent-color-text, var(--agent-color, #2563eb));
}
.lp__btn-icon--muted { color: #6E6E73; }
.lp__btn-icon svg { width: 18px; height: 18px; }

.lp__service-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lp__service-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--agent-color, #2563eb);
    background: transparent;
    color: #5a5a5a;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    opacity: 0;
    transform: translateY(10px);
    animation: btnFadeIn 0.35s ease forwards;
}
.lp__service-btn:nth-child(1) { animation-delay: 0.25s; }
.lp__service-btn:nth-child(2) { animation-delay: 0.30s; }
.lp__service-btn:nth-child(3) { animation-delay: 0.35s; }

@media (hover: hover) {
    .lp__cta--primary:hover { opacity: 0.9; transform: scale(1.01); }
    .lp__cta--secondary:hover {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
    }
    .lp__cta--secondary:hover .lp__cta-icon { color: #ffffff; }
    .lp__info-btn:hover {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
    }
    .lp__info-btn:hover .lp__btn-icon { color: #ffffff; }
    .lp__service-btn:hover { background: #f5f5f7; }
}

/* ── Kategorie-Auswahl (inline in messages) ─────────────── */
.category-selection {
    align-self: stretch;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px 22px;
    margin: 4px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    animation: cardFadeIn 0.4s ease forwards;
}

.category-selection__question {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 16px;
    letter-spacing: -0.2px;
}

.category-selection__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-button-inline {
    padding-bottom: 15px;
    animation: bubbleFadeIn 0.4s ease;
}

.category-btn {
    width: 100%;
    padding: 13px 20px;
    border-radius: 28px;
    border: 2px solid var(--agent-color, #2563eb);
    background: transparent;
    color: #5a5a5a;
    font-size: 16px;
    font-family: inherit;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    /* Staggered fade-in */
    opacity: 0;
    transform: translateY(10px);
    animation: btnFadeIn 0.35s ease forwards;
}
.category-btn:nth-child(1)  { animation-delay: 0.03s; }
.category-btn:nth-child(2)  { animation-delay: 0.08s; }
.category-btn:nth-child(3)  { animation-delay: 0.13s; }
.category-btn:nth-child(4)  { animation-delay: 0.18s; }
.category-btn:nth-child(5)  { animation-delay: 0.23s; }
.category-btn:nth-child(6)  { animation-delay: 0.28s; }
.category-btn:nth-child(7)  { animation-delay: 0.33s; }
.category-btn:nth-child(8)  { animation-delay: 0.38s; }
.category-btn:nth-child(9)  { animation-delay: 0.43s; }
.category-btn:nth-child(10) { animation-delay: 0.48s; }
.category-btn:nth-child(11) { animation-delay: 0.53s; }
.category-btn:nth-child(12) { animation-delay: 0.58s; }

@keyframes btnFadeIn {
    to { opacity: 1; transform: translateY(0); }
}
.category-btn--with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Produkt-Shortcuts auf LP: gleicher Stil wie "Antrag stellen"-Button (lp__info-btn),
   aber Rahmen in Markenfarbe. Auf Desktop 4 nebeneinander, auf Mobile/Tablet stacked. */
.lp__products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.lp__products-grid .lp__info-btn {
    border-color: var(--agent-color, #2563eb);
}
.lp__product-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
}
.lp__product-item > .lp__info-btn,
.lp__product-item.lp__info-btn { width: 100%; box-sizing: border-box; }
/* "Preis berechnen" als auffälliger CTA-Pill im Apple-Style */
.lp__product-calc {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    background: #ea6a00;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(234, 106, 0, 0.22);
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.lp__product-calc__icon {
    display: inline-flex;
    color: #ffffff;
}
.lp__product-calc__icon svg {
    width: 16px;
    height: 16px;
}
@media (hover: hover) {
    .lp__product-calc:hover {
        background: #d35e00;
        box-shadow: 0 6px 18px rgba(234, 106, 0, 0.32);
        transform: translateY(-1px);
        text-decoration: none;
    }
}
/* Verschmolzene Karte: <a> ist die ganze Karte, Pill liegt unten innerhalb.
   Pill weiterhin zentriert, ausreichend Abstand. */
a.lp__product-card { text-decoration: none; color: inherit; cursor: pointer; }
a.lp__product-card:hover { text-decoration: none; }
/* padding-bottom auf der Karte würde die Pill-Zentrierung (margin auto) auf
   Desktop unsymmetrisch verschieben — nur auf der „nicht-mit-Bild"-Variante
   beibehalten. Mit-Bild-Variante zentriert via margin auto (siehe Desktop-Regel). */
.lp__product-card:not(.lp__info-btn--with-image) { padding-bottom: 26px; }
.lp__product-card:not(.lp__info-btn--with-image) .lp__product-calc { margin-top: 18px; }

/* Mobile: orange Preis-berechnen-Pill schwebt UNTER der grünen Kachel und
   ragt nach unten heraus (HUK24-Stil). Pill ist innerhalb der Karte (für
   die Verschmelzung), wird aber per position:absolute aus dem grünen Block
   herausgelöst — die Karte zeigt nur Bild + Label, der Pill schwebt darüber
   hinaus. */
@media (max-width: 767px) {
    .lp__product-item { gap: 0; }
    /* Platz unter jeder Kachel, damit der überstehende Pill nicht in die
       nächste Kachel ragt. */
    .lp__products-grid { row-gap: 36px; }
    .lp__product-card { padding-bottom: 0; position: relative; overflow: visible; }
    .lp__product-card .lp__product-calc {
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        align-self: auto;
        padding: 9px 18px;
        font-size: 14px;
        z-index: 3;
    }
    /* HUK24-Stil: Produkt-Sektion bis fast an den Rand des Viewports ziehen,
       damit die Kacheln deutlich breiter wirken als der Rest der Hub-Seite. */
    .lp__section.lp__products {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* Produkt-Bild im Button: nur auf Desktop sichtbar (siehe Desktop-Override unten). */
.lp__info-btn__image {
    display: none;
}
/* Tablet (Hoch- und Querformat) + Desktop: bis zu 4 Kacheln nebeneinander. */
@media (min-width: 768px) {
    /* Flex-Layout statt Grid: ein/zwei Kacheln werden mittig zentriert,
       drei oder vier füllen die Reihe gleichmäßig, mehr wickeln in die
       nächste Zeile. */
    .lp__products-grid {
        display: grid;
        /* Tablet (768–1023px): 2 Spalten, Desktop (≥1024px): 4 Spalten. */
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
        row-gap: 36px;
        max-width: none;
        margin: 0 auto;
    }
    @media (min-width: 1024px) {
        .lp__products-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .lp__products-grid .lp__product-item {
        min-width: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
    }
    /* Tiles strecken auf die Höhe der höchsten Kachel in der Reihe.
       Greift sowohl für die alte (Button im Item) als auch die neue
       Struktur (Karte ist selbst der Link mit beiden Klassen). */
    .lp__products-grid .lp__product-item > .lp__info-btn,
    .lp__products-grid .lp__product-item.lp__info-btn { flex: 1 1 auto; }
}
/* Mobile (<768px): 1-spaltig + brand-farbene Kacheln (HUK24-Stil) — größer
   als die normalen Outline-Buttons, mit weißer Schrift, weißem Icon und
   (falls vorhanden) Produktbild rechts. */
@media (max-width: 767px) {
    .lp__products-grid .lp__info-btn {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
        border: none;
        border-radius: 18px;
        padding: 22px;
        min-height: 96px;
        font-size: 17px;
        font-weight: 700;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    .lp__products-grid .lp__info-btn .lp__btn-icon {
        color: #ffffff;
    }
    .lp__products-grid .lp__info-btn .lp__btn-icon svg {
        width: 28px;
        height: 28px;
    }
    /* Kachel mit Produktbild: horizontales Layout — Titel + Icon links,
       Bild rechts (wie HUK24).
       Wichtig: overflow:visible, damit der position:absolute-Pill unter der
       Kachel herausragt (HUK24-Stil). Bild-Ecken werden direkt am Bild
       gerundet, weil der Anchor nicht mehr clippt. */
    .lp__products-grid .lp__info-btn--with-image {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: visible;
    }
    .lp__products-grid .lp__info-btn--with-image .lp__info-btn__image {
        display: block;
        width: 30%;
        align-self: stretch;
        height: auto;
        object-fit: cover;
        flex-shrink: 0;
        order: 2;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
    }
    .lp__products-grid .lp__info-btn--with-image .lp__btn-icon {
        display: none;
    }
    .lp__products-grid .lp__info-btn--with-image .lp__info-btn__label {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        padding: 18px 16px;
        font-size: clamp(14px, 4vw, 17px);
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        order: 1;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }
}

/* ── Finconext-Vorteile (Apple-Style 3-Karten-Grid) ───────────────── */
.lp__benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
}
.lp__benefit-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 24px 22px 22px;
    text-align: left;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
    .lp__benefit-card:hover {
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }
}
.lp__benefit-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--agent-color, #2563eb);
    margin-bottom: 14px;
}
.lp__benefit-card__icon svg { width: 100%; height: 100%; display: block; }
.lp__benefit-card__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #1d1d1f;
}
.lp__benefit-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5b6470;
}
@media (min-width: 768px) {
    .lp__benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .lp__benefit-card { padding: 28px 26px 26px; }
    .lp__benefit-card__title { font-size: 24px; }
}
/* Mobil: Digital/Einfach/Günstiger deutlich kompakter darstellen. */
@media (max-width: 600px) {
    .lp__benefits-grid { gap: 8px; }
    .lp__benefit-card { padding: 12px 14px; border-radius: 12px; }
    .lp__benefit-card__icon { width: 28px; height: 28px; margin-bottom: 6px; }
    .lp__benefit-card__title { font-size: 16px; margin-bottom: 3px; }
    .lp__benefit-card__text { font-size: 12.5px; line-height: 1.4; }
}

/* Produkt-Karten mit Bild: sichtbar ab Tablet (Hoch- und Querformat). */
@media (min-width: 768px) {
    .lp__products-grid .lp__info-btn--with-image {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
        text-align: center;
        background: var(--agent-color, #2563eb);
        color: #ffffff;
    }
    .lp__products-grid .lp__info-btn--with-image .lp__info-btn__image {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        background: #f5f5f7;
    }
    .lp__products-grid .lp__info-btn--with-image .lp__btn-icon {
        margin: 16px auto 6px;
        color: #ffffff;
    }
    .lp__products-grid .lp__info-btn--with-image .lp__info-btn__label {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Label nimmt nur die Höhe seines Texts ein — der Pill kann sich dann
           im Restraum exakt mittig zwischen Label und unterem Kachelrand
           positionieren (via margin auto top/bottom unten). */
        flex: 0 0 auto;
        padding: 0 16px;
        line-height: 1.3;
        color: #ffffff;
    }
    /* Pill vertikal exakt zwischen Label und Unterkante zentrieren. */
    .lp__product-card .lp__product-calc {
        margin-top: auto;
        margin-bottom: auto;
    }
    .lp__products-grid .lp__info-btn--with-image:hover {
        box-shadow: 0 6px 20px rgba(37,99,235,0.22);
    }
}

.category-btn__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--agent-color, #2563eb);
}

.category-btn__icon svg {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .category-btn:hover {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
        transform: scale(1.01);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .category-btn:hover .category-btn__icon {
        color: #ffffff;
    }
}

/* ── Contact buttons (WhatsApp / Rückruf) ────────────────── */
.contact-divider {
    border-top: 1px solid #f5f5f7;
    margin: 14px 0;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 28px;
    border: 2px solid;
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
@media (hover: hover) {
    .contact-btn:hover {
        transform: scale(1.01);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .contact-btn--whatsapp:hover { background: #25D366; color: #ffffff; }
    .contact-btn--callback:hover  { background: #e53e3e; color: #ffffff; }
}

.contact-btn--whatsapp { border-color: #25D366; color: #25D366; }
.contact-btn--callback  { border-color: #e53e3e; color: #e53e3e; }

.contact-btn__logo {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}

.contact-btn__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.contact-btn__icon svg {
    height: 22px;
    width: 22px;
}

/* ── Chat Disclaimer ─────────────────────────────────────── */
.chat-disclaimer {
    padding: 8px 16px 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #6E6E73;
    text-align: center;
    flex-shrink: 0;
}

.chat-disclaimer a {
    color: #6E6E73;
    text-decoration: underline;
    transition: color 0.2s;
}

.chat-disclaimer a:hover {
    color: #1d1d1f;
}

/* ── PDF document links (below input) ───────────────────── */
.pdf-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    flex-shrink: 0;
}

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--agent-color, #2563eb);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    transition: opacity 0.2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-link__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--agent-color, #2563eb);
}

.pdf-link__icon svg {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .pdf-link:hover {
        opacity: 0.7;
    }
}

/* ── Calculator link (above PDF, below input) ──────────── */
.calculator-link {
    padding: 10px 16px 6px;
    flex-shrink: 0;
}

.calculator-link__btn {
    opacity: 1;
    transform: none;
    animation: none;
}

/* ── Quick contact links (below input) ───────────────────── */
.quick-contact {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px 16px;
    flex-shrink: 0;
}

.quick-contact__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1.5px solid;
    transition: background 0.2s, color 0.2s;
}

.quick-contact__link--whatsapp { color: #25D366; border-color: #25D366; }
.quick-contact__link--callback { color: #e53e3e; border-color: #e53e3e; }

@media (hover: hover) {
    .quick-contact__link--whatsapp:hover { background: #25D366; color: #fff; }
    .quick-contact__link--callback:hover { background: #e53e3e; color: #fff; }
}

.quick-contact__icon {
    height: 18px;
    width: auto;
}

/* ── Chat Footer ─────────────────────────────────────────── */
.chat-footer {
    padding: 10px 24px 12px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.chat-footer__copy {
    font-size: 11px;
    color: #c7c7cc;
    margin: 0;
    white-space: nowrap;
}

.chat-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-footer__links a {
    font-size: 11px;
    color: #c7c7cc;
    text-decoration: none;
    transition: color 0.2s;
}
.chat-footer__links a:hover { color: #6E6E73; text-decoration: underline; }

.chat-footer__sep {
    font-size: 11px;
    color: #e0e0e5;
    user-select: none;
}

.chat-footer__region {
    font-size: 11px;
    color: #c7c7cc;
}

.chat-footer__region a {
    color: #c7c7cc;
    text-decoration: none;
    transition: color 0.2s;
}
.chat-footer__region a:hover { color: #6E6E73; text-decoration: underline; }

/* ── Responsive: Tablet ─────────────────────────────────── */
@media (max-width: 900px) {
    .lp-nav__links { display: none; }
    .lp-nav__hamburger { display: flex; }
    .feature--city,
    .feature--city.city-img-loaded {
        background-image: none;
    }
    .feature--city::before { display: none; }
    .feature--city .feature__inner {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    /* Landing page tablet */
    .hero__headline { font-size: 56px; }
    .advisors__headline { font-size: 36px; }
    .feature__headline { font-size: 36px; }
    .hero { padding: 80px 22px 50px; }
    .advisors { padding: 80px 22px; }
    .feature { padding: 80px 22px; }
}

/* ── Responsive: Mobile ─────────────────────────────────── */
@media (max-width: 500px) {
    .container { padding: 0 10px; }
    .container--chat { padding-top: 4px; padding-bottom: 4px; }

    /* Landing: Nav mobile */
    .lp-nav__inner { height: 44px; padding: 0 16px; }
    .lp-nav__logo-img { height: 22px; }
    .lp-nav__links { gap: 8px; }
    .lp-nav__links a { font-size: 11px; }
    .lp-nav__sep { font-size: 10px; }


    /* Landing: Hero mobile */
    .hero { min-height: 85vh; padding: 60px 24px 40px; }
    .hero__inner { max-width: 680px; }
    .hero__label { font-size: 17px; }
    .hero__headline { font-size: 32px; }
    .hero__sub { font-size: 17px; margin-bottom: 24px; }
    .hero__cta { font-size: 15px; padding: 11px 22px; }

    /* Landing: Advisors mobile */
    .advisors { padding: 60px 24px; }
    .advisors__label { font-size: 12px; }
    .advisors__headline { font-size: 24px; margin-bottom: 36px; }
    .agents-grid { gap: 12px; }
    .agent-card { padding: 18px 20px; gap: 16px; border-radius: 16px; }
    .agent-card::before { width: 4px; }
    .agent-card__logo { height: 38px; width: 100px; margin-left: 4px; }
    .agent-card__name { font-size: 16px; }
    .agent-card__arrow { font-size: 18px; }

    /* Landing: Features mobile */
    .feature { padding: 60px 24px; }
    .feature__label { font-size: 12px; }
    .feature__headline { font-size: 24px; }
    .feature__text { font-size: 15px; }
    .feature__ctas { margin-top: 28px; }
    .feature__btn { font-size: 15px; }
    .feature__btn--primary { padding: 11px 22px; }

    /* Landing: FAQ mobile */
    .faq { padding: 60px 24px; }
    .faq__headline { font-size: 24px; margin-bottom: 32px; }
    .faq__question { font-size: 17px; }
    .faq__answer { font-size: 15px; }

    /* Landing: Footer mobile */
    .lp-footer { padding: 16px 16px; }
    .lp-footer__inner {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }
    .lp-footer__copy { font-size: 11px; white-space: normal; }
    .lp-footer__links {
        gap: 0;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0;
    }
    .lp-footer__links a {
        padding: 4px 10px;
        border-right: 1px solid #D2D2D7;
        line-height: 1.2;
    }
    .lp-footer__links a:last-child { border-right: none; }
    .lp-footer__sep { display: none; }
    .lp-footer__region { text-align: center; }

    /* Chat Header: hide on mobile so advisor logo is first */
    #view-chat .site-header { display: none; }
    .header-spacer { width: 0; }
    .site-logo__img { height: 30px; }
    .site-logo__text { font-size: 19px; }
    .back-link { font-size: 14px; }

    /* Chat compact – fit viewport without cutting off header */
    #view-chat.active { height: 100dvh; }
    #view-chat.active.view--compact {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
    }
    #view-chat.active.view--compact .container--chat {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    .chat-wrapper { border-radius: 10px; }

    /* Titlebar compact + sticky auf Mobile (wie .site-header auf Desktop),
       damit der Versicherer-Name/„zurück" auch beim Scrollen sichtbar bleibt. */
    .chat-titlebar {
        padding: 10px 14px; gap: 8px;
        position: sticky; top: 0; z-index: 60;
        background: #ffffff;
    }
    .chat-titlebar__logo { height: 26px; }
    .chat-titlebar__name {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1 1 auto;
    }
    .chat-titlebar__back { font-size: 17px; }
    /* Auf Mobile nur das Finconext-Logo im branded Back-Button zeigen,
       damit der Versicherer-Name in einer Zeile passt. */
    .chat-titlebar__back--branded .chat-titlebar__name { display: none; }

    /* Topic & category selection compact */
    .category-selection { padding: 14px 14px; border-radius: 12px; }
    .category-selection__question { font-size: 15px; margin-bottom: 10px; }
    .category-selection__buttons { gap: 6px; }
    .category-btn { padding: 10px 14px; font-size: 14px; border-radius: 22px; border-width: 1.5px; }
    .category-btn__icon svg { width: 17px; height: 17px; }
    .category-btn--with-icon { gap: 8px; }

    /* Calculator link compact */
    .calculator-link { padding: 8px 10px 4px; }
    .calculator-link__btn { padding: 12px 14px; font-size: 15px; }

    /* Chat disclaimer compact */
    .chat-disclaimer { padding: 6px 14px 2px; font-size: 10px; }

    /* PDF documents compact */
    .pdf-documents { padding: 4px 10px; gap: 6px; }
    .pdf-link { font-size: 12px; padding: 3px 6px; }
    .pdf-link__icon svg { width: 14px; height: 14px; }

    /* Quick contact compact */
    .quick-contact { padding: 8px 10px 12px; gap: 10px; }
    .quick-contact__link { font-size: 13px; padding: 6px 14px; }
    .quick-contact__icon { height: 16px; }

    /* Quick reply compact */
    .quick-reply-btn { font-size: 14px; padding: 8px 16px; }

    /* Chat bubbles */
    .chat-bubble { max-width: 92%; font-size: 15px; padding: 10px 14px; }
    .chat-bubble-row--assistant { padding-bottom: 5px; }

    /* Input compact */
    .chat-input-row { padding: 8px 10px; gap: 8px; }
    .chat-input { padding: 8px 14px; font-size: 15px; }
    .chat-send-btn { padding: 8px 16px; font-size: 15px; }
    .chat-mic-btn { width: 36px; height: 36px; }

    /* Link button compact */
    .link-button-inline { padding-bottom: 8px; }

    /* Chat Footer compact */
    .chat-footer {
        padding: 16px 16px;
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }
    .chat-footer__copy { font-size: 11px; white-space: normal; }
    .chat-footer__links {
        gap: 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    .chat-footer__links a {
        font-size: 11px;
        padding: 4px 10px;
        border-right: 1px solid #D2D2D7;
        line-height: 1.2;
    }
    .chat-footer__links a:last-child { border-right: none; }
    .chat-footer__sep { display: none; }
    .chat-footer__region { text-align: center; font-size: 11px; }
}

/* ── Responsive: Tablet (501px – 1024px) ───────────────── */
@media (min-width: 501px) and (max-width: 1024px) {

    /* Layout: wider container for tablet screens */
    .container { max-width: 92%; padding: 0 28px; }

    /* Chat Header */
    .site-header { padding: 18px 0; }
    .site-logo__img { height: 40px; }
    .site-logo__text { font-size: 24px; }
    .back-link { font-size: 17px; }

    /* Chat wrapper */
    .chat-wrapper { border-radius: 22px; box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.08); }

    /* Titlebar */
    .chat-titlebar { padding: 20px 24px; gap: 14px; }
    .chat-titlebar__logo { height: 40px; max-width: 140px; }
    .chat-titlebar__name { font-size: 20px; }
    .chat-titlebar__back { font-size: 22px; }
    .chat-titlebar__back--branded .chat-titlebar__logo { height: 24px; }
    .chat-titlebar__back--branded .chat-titlebar__name { font-size: 15px; }

    /* Messages */
    .chat-messages { padding: 24px; gap: 14px; }

    /* Bubbles */
    .chat-bubble { max-width: 75%; padding: 14px 20px; border-radius: 22px; font-size: 17px; line-height: 1.6; }
    .chat-bubble--user { border-bottom-right-radius: 6px; }
    .chat-bubble--assistant { border-bottom-left-radius: 6px; }

    /* Markdown in bubbles */
    .chat-bubble--assistant { line-height: 1.5; }
    .chat-bubble--assistant p { line-height: 1.5; }
    .chat-bubble--assistant h1,
    .chat-bubble--assistant h2,
    .chat-bubble--assistant h3 { font-size: 17px; }
    .chat-bubble--assistant code { font-size: 13px; }
    .chat-bubble--assistant pre code { font-size: 13px; }
    .chat-bubble--assistant a.bubble-action-btn { padding: 16px 26px; font-size: 17px; }

    /* Input row */
    .chat-input-row { padding: 16px 20px; gap: 12px; }
    .chat-input { padding: 13px 20px; font-size: 17px; border-radius: 28px; }
    .chat-send-btn { padding: 13px 26px; font-size: 17px; border-radius: 28px; }
    .chat-mic-btn { width: 46px; height: 46px; }
    .chat-mic-btn svg { width: 22px; height: 22px; }

    /* Topic selection landing page */
    .lp__hero { padding: 28px 28px 16px; }
    .lp__headline { font-size: 26px; }
    .lp__subline { font-size: 16px; margin-bottom: 26px; }
    .lp__ctas { gap: 12px; }
    .lp__cta { border-radius: 32px; }
    .lp__cta--primary { padding: 18px 24px; font-size: 18px; }
    .lp__cta--secondary { padding: 16px 24px; font-size: 17px; }
    .lp__cta-icon svg { width: 24px; height: 24px; }
    .lp__section { padding: 22px 28px; }
    .lp__section-title { font-size: 13px; margin-bottom: 12px; }
    .lp__info-btn { padding: 15px 22px; font-size: 17px; border-radius: 32px; }
    .lp__btn-icon svg { width: 20px; height: 20px; }
    .lp__service-list { gap: 8px; }
    .lp__service-btn { padding: 12px 18px; font-size: 16px; border-radius: 14px; }
    .lp__trust { font-size: 13px; margin-top: 18px; }

    /* Category selection */
    .category-selection { padding: 24px 28px; border-radius: 20px; }
    .category-selection__question { font-size: 20px; margin-bottom: 18px; }
    .category-selection__buttons { gap: 12px; }
    .category-btn { padding: 15px 22px; font-size: 17px; border-radius: 32px; }
    .category-btn__icon svg { width: 22px; height: 22px; }


    /* Contact buttons */
    .contact-btn { padding: 15px 22px; font-size: 17px; border-radius: 32px; }
    .contact-btn__logo { height: 24px; }
    .contact-btn__icon svg { height: 24px; width: 24px; }

    /* Quick reply */
    .quick-reply-btn { padding: 12px 24px; font-size: 16px; border-radius: 24px; }

    /* Disclaimer */
    .chat-disclaimer { padding: 10px 20px 6px; font-size: 12px; }

    /* PDF documents */
    .pdf-documents { padding: 10px 20px; gap: 10px; }
    .pdf-link { font-size: 14px; padding: 6px 12px; }
    .pdf-link__icon svg { width: 18px; height: 18px; }

    /* Calculator link */
    .calculator-link { padding: 12px 20px 8px; }

    /* Quick contact */
    .quick-contact { padding: 12px 20px 18px; gap: 14px; }
    .quick-contact__link { font-size: 16px; padding: 10px 22px; border-radius: 24px; }
    .quick-contact__icon { height: 20px; }

    /* Chat footer */
    .chat-footer { padding: 12px 28px 14px; }
    .chat-footer__links { gap: 8px; }
    .chat-footer__links a { font-size: 12px; }
    .chat-footer__copy { font-size: 12px; }
    .chat-footer__region { font-size: 12px; }
}

/* ── Responsive: iPad Pro & large tablets (834px – 1400px) ── */
@media (min-width: 834px) and (max-width: 1023px) {

    /* Layout */
    .container { max-width: 860px; padding: 0 36px; }
    .container--chat { padding-top: 20px; padding-bottom: 20px; }

    /* Chat Header */
    .site-header { padding: 20px 0; }
    .site-logo__img { height: 44px; }
    .site-logo__text { font-size: 26px; }
    .back-link { font-size: 18px; }

    /* Chat wrapper */
    .chat-wrapper { border-radius: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 10px 36px rgba(0,0,0,0.09); }

    /* Titlebar */
    .chat-titlebar { padding: 22px 28px; gap: 16px; }
    .chat-titlebar__logo { height: 46px; max-width: 160px; }
    .chat-titlebar__name { font-size: 22px; }
    .chat-titlebar__back { font-size: 24px; }
    .chat-titlebar__back--branded .chat-titlebar__logo { height: 28px; }
    .chat-titlebar__back--branded .chat-titlebar__name { font-size: 17px; }
    .chat-titlebar__back--branded { gap: 9px; }

    /* Messages */
    .chat-messages { padding: 28px; gap: 16px; }

    /* Bubbles */
    .chat-bubble { max-width: 72%; padding: 16px 22px; border-radius: 24px; font-size: 18px; line-height: 1.6; }
    .chat-bubble--user { border-bottom-right-radius: 6px; }
    .chat-bubble--assistant { border-bottom-left-radius: 6px; }

    /* Markdown in bubbles */
    .chat-bubble--assistant { line-height: 1.55; }
    .chat-bubble--assistant p { line-height: 1.55; }
    .chat-bubble--assistant h1,
    .chat-bubble--assistant h2,
    .chat-bubble--assistant h3 { font-size: 18px; }
    .chat-bubble--assistant ul,
    .chat-bubble--assistant ol { padding-left: 20px; }
    .chat-bubble--assistant li { margin-bottom: 2px; line-height: 1.55; }
    .chat-bubble--assistant code { font-size: 14px; padding: 2px 6px; }
    .chat-bubble--assistant pre { padding: 14px 16px; border-radius: 12px; }
    .chat-bubble--assistant pre code { font-size: 14px; }
    .chat-bubble--assistant table { font-size: 15px; }
    .chat-bubble--assistant th,
    .chat-bubble--assistant td { padding: 5px 10px; }
    .chat-bubble--assistant a.bubble-action-btn { padding: 18px 28px; font-size: 18px; margin: 12px 0 6px; }

    /* Input row */
    .chat-input-row { padding: 18px 24px; gap: 14px; }
    .chat-input { padding: 14px 22px; font-size: 18px; border-radius: 30px; }
    .chat-send-btn { padding: 14px 30px; font-size: 18px; border-radius: 30px; }
    .chat-mic-btn { width: 50px; height: 50px; }
    .chat-mic-btn svg { width: 24px; height: 24px; }

    /* Topic selection landing page */
    .lp__hero { padding: 34px 32px 20px; }
    .lp__headline { font-size: 30px; letter-spacing: -0.6px; }
    .lp__subline { font-size: 18px; margin-bottom: 30px; }
    .lp__ctas { gap: 14px; }
    .lp__cta { border-radius: 34px; }
    .lp__cta--primary { padding: 20px 28px; font-size: 20px; }
    .lp__cta--secondary { padding: 18px 28px; font-size: 18px; }
    .lp__cta-icon svg { width: 26px; height: 26px; }
    .lp__section { padding: 26px 32px; }
    .lp__section-title { font-size: 14px; letter-spacing: 1px; margin-bottom: 14px; }
    .lp__info-btn { padding: 17px 24px; font-size: 18px; border-radius: 34px; }
    .lp__btn-icon svg { width: 22px; height: 22px; }
    .lp__service-list { gap: 10px; }
    .lp__service-btn { padding: 14px 20px; font-size: 17px; border-radius: 16px; }
    .lp__trust { font-size: 14px; margin-top: 20px; }

    /* Category selection */
    .category-selection { padding: 28px 32px; border-radius: 22px; }
    .category-selection__question { font-size: 22px; margin-bottom: 20px; }
    .category-selection__buttons { gap: 14px; }
    .category-btn { padding: 17px 24px; font-size: 18px; border-radius: 34px; }
    .category-btn__icon svg { width: 24px; height: 24px; }

    /* Contact buttons */
    .contact-btn { padding: 17px 24px; font-size: 18px; border-radius: 34px; gap: 12px; }
    .contact-btn__logo { height: 26px; }
    .contact-btn__icon svg { height: 26px; width: 26px; }

    /* Quick reply */
    .quick-reply-btn { padding: 14px 28px; font-size: 17px; border-radius: 26px; }

    /* Disclaimer */
    .chat-disclaimer { padding: 12px 24px 6px; font-size: 13px; }

    /* PDF documents */
    .pdf-documents { padding: 12px 24px; gap: 12px; }
    .pdf-link { font-size: 15px; padding: 7px 14px; }
    .pdf-link__icon svg { width: 20px; height: 20px; }

    /* Calculator link */
    .calculator-link { padding: 14px 24px 10px; }
    .calculator-link__btn { padding: 16px 20px; font-size: 17px; }

    /* Quick contact */
    .quick-contact { padding: 14px 24px 20px; gap: 16px; }
    .quick-contact__link { font-size: 17px; padding: 12px 24px; border-radius: 26px; border-width: 2px; }
    .quick-contact__icon { height: 22px; }

    /* Chat footer */
    .chat-footer { padding: 14px 32px 16px; }
    .chat-footer__links { gap: 8px; }
    .chat-footer__links a { font-size: 13px; }
    .chat-footer__copy { font-size: 13px; }
    .chat-footer__region { font-size: 13px; }

}

/* Sidebar wrapper: invisible on mobile/tablet, children flow normally */
.chat-sidebar-content { display: contents; }

/* ================================================================
   Desktop Premium Design (≥ 1280px)
   Single-column layout optimiert für 1920×1080.
   Sidebar-Inhalte bleiben unterhalb (wie Mobile).
   Only affects #view-chat (post-Versicherer screens).
   Startseite / landing page is NOT touched.
   ================================================================ */
@media (min-width: 1280px) {

    /* ── Container: zentriert, großzügig ──────────────────── */
    #view-chat .container { max-width: 1640px; padding: 0 48px; }
    #view-chat .container--chat { padding-top: 32px; padding-bottom: 32px; }

    /* ── Subtle app background ────────────────────────────── */
    #view-chat.active {
        background: linear-gradient(170deg, #f0f4f8 0%, #f8fafb 40%, #ffffff 100%);
    }

    /* ── Header: premium glassmorphism ────────────────────── */
    #view-chat .site-header {
        padding: 16px 0;
        background: rgba(255,255,255,0.85);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    #view-chat .site-header .container { max-width: 1640px; }
    #view-chat .site-logo__img { height: 36px; }
    #view-chat .site-logo__text { font-size: 22px; }
    #view-chat .back-link { font-size: 16px; letter-spacing: -0.1px; }
    #view-chat .header-spacer { width: 150px; }

    /* ── Chat wrapper: single column, elevated card ──────── */
    .chat-wrapper {
        border-radius: 22px;
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.04),
            0 2px 8px rgba(0,0,0,0.04),
            0 12px 40px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    /* ── Titlebar ─────────────────────────────────────────── */
    .chat-titlebar {
        padding: 20px 48px;
        gap: 16px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        background: #ffffff;
    }
    .chat-titlebar__logo { height: 40px; max-width: 160px; }
    .chat-titlebar__name { font-size: 20px; letter-spacing: -0.2px; }
    .chat-titlebar__back { font-size: 20px; }
    .chat-titlebar__back--branded .chat-titlebar__logo { height: 26px; }
    .chat-titlebar__back--branded .chat-titlebar__name { font-size: 15px; }

    /* ── Messages area ───────────────────────────────────── */
    .chat-messages {
        padding: 36px 48px;
        gap: 20px;
        background: linear-gradient(180deg, #f7f8fa 0%, #fafbfc 100%);
    }

    /* ── Input row ───────────────────────────────────────── */
    .chat-input-row {
        padding: 20px 48px;
        gap: 14px;
        background: #ffffff;
        border-top: 1px solid rgba(0,0,0,0.04);
    }
    .chat-input {
        padding: 15px 24px;
        font-size: 17px;
        border-radius: 30px;
        border: 1px solid #e0e3e8;
        background: #f8f9fb;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
    }
    .chat-input:focus {
        background: #ffffff;
        border-color: var(--agent-color, #2563eb);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.08), inset 0 1px 3px rgba(0,0,0,0.02);
    }
    .chat-send-btn {
        padding: 15px 32px;
        font-size: 17px;
        border-radius: 30px;
        box-shadow: 0 2px 8px rgba(37,99,235,0.2);
    }
    .chat-send-btn:hover:not(:disabled) {
        box-shadow: 0 4px 14px rgba(37,99,235,0.3);
    }
    .chat-mic-btn { width: 50px; height: 50px; }
    .chat-mic-btn svg { width: 22px; height: 22px; }

    /* ── Sidebar: stays below like mobile (display:contents) ─ */

    /* ── Chat disclaimer: wider, centered ────────────────── */
    .chat-disclaimer {
        padding: 12px 48px 6px;
        font-size: 12px;
    }

    /* ── Quick contact: horizontal, spacious ─────────────── */
    .quick-contact {
        padding: 16px 48px 24px;
        gap: 20px;
        justify-content: center;
    }
    .quick-contact__link {
        font-size: 16px;
        padding: 12px 24px;
        border-radius: 16px;
        border-width: 2px;
    }
    .quick-contact__icon { height: 22px; }

    /* ── Calculator link ─────────────────────────────────── */
    .calculator-link { padding: 12px 48px 8px; }
    .calculator-link__btn {
        font-size: 16px;
        padding: 14px 20px;
        border-radius: 16px;
        box-shadow: 0 2px 6px rgba(37,99,235,0.15);
    }

    /* ── PDF documents ───────────────────────────────────── */
    .pdf-documents { padding: 10px 48px; }
    .pdf-link { font-size: 14px; }

    /* ── Chat bubbles: desktop premium ────────────────────── */
    .chat-bubble {
        max-width: 60%;
        padding: 18px 24px;
        border-radius: 22px;
        font-size: 17px;
        line-height: 1.6;
    }

    .chat-bubble--assistant {
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        position: relative;
    }
    .chat-bubble--assistant::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 3px;
        border-radius: 3px;
        background: var(--agent-color, #2563eb);
        opacity: 0.4;
    }
    .chat-bubble--assistant {
        padding-left: 22px;
    }

    .chat-bubble--user {
        box-shadow: 0 2px 8px rgba(37,99,235,0.15);
    }

    .chat-bubble--assistant a.bubble-action-btn {
        padding: 16px 28px;
        font-size: 17px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    /* ── Topic selection hero: premium gradient ───────────── */
    .lp__hero {
        padding: 48px 48px 32px;
        background: #ffffff;
        border-bottom: 1px solid rgba(0,0,0,0.04);
        text-align: center;
    }
    .lp__headline-logo { height: 48px; max-width: 150px; }
    .lp__headline {
        font-size: 32px;
        letter-spacing: -0.5px;
        color: #1a1f2e;
        margin-bottom: 40px;
    }
    .lp__subline {
        font-size: 17px;
        margin-bottom: 36px;
        color: #6E6E73;
    }

    .lp__ctas {
        flex-direction: row;
        gap: 20px;
        max-width: 700px;
        margin: 0 auto;
    }
    .lp__cta {
        flex: 1;
        border-radius: 18px;
    }
    .lp__cta--primary {
        padding: 22px 28px;
        font-size: 18px;
        border-radius: 18px;
        box-shadow: 0 4px 16px rgba(234,106,0,0.25);
    }
    .lp__cta--primary:hover {
        box-shadow: 0 6px 24px rgba(234,106,0,0.35);
        transform: translateY(-1px);
    }
    .lp__cta--secondary {
        padding: 20px 28px;
        font-size: 17px;
        border-radius: 18px;
        background: #ffffff;
        border: 1.5px solid var(--agent-color, #2563eb);
    }
    .lp__cta-icon svg { width: 26px; height: 26px; }

    .lp__trust { font-size: 13px; margin-top: 24px; text-align: center; }

    /* ── Sections: spacious on desktop ────────────────────── */
    .lp__section {
        padding: 28px 48px;
        border-top: 1px solid rgba(0,0,0,0.04);
    }
    .lp__section-title {
        font-size: 12px;
        margin-bottom: 16px;
        letter-spacing: 1px;
        color: #6E6E73;
    }

    /* Vertrag + Kontakt nebeneinander auf Desktop */
    .lp__section-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .lp__section-col--kontakt {
        display: block;
    }
    .lp__info-btn--phone {
        border-color: #d2d2d7;
    }
    .lp__info-btn--phone:hover {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
        border-color: var(--agent-color, #2563eb);
    }
    .lp__info-btn--phone:hover .lp__btn-icon { color: #ffffff; }

    .lp__info-btn {
        padding: 20px 28px;
        font-size: 17px;
        border-radius: 18px;
        max-width: none;
        transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .lp__info-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(37,99,235,0.2);
    }
    .lp__btn-icon svg { width: 24px; height: 24px; }

    /* Service buttons: spacious cards in a row */
    .lp__service-list {
        flex-direction: row;
        gap: 14px;
    }
    .lp__service-btn {
        flex: 1;
        flex-direction: column;
        padding: 24px 18px;
        font-size: 15px;
        border-radius: 18px;
        text-align: center;
        justify-content: center;
        gap: 12px;
        background: #f7f8fa;
        border: 1.5px solid var(--agent-color, #2563eb);
        transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .lp__service-btn:hover {
        background: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .lp__service-btn .lp__btn-icon {
        color: var(--agent-color, #2563eb);
    }
    .lp__service-btn .lp__btn-icon svg { width: 28px; height: 28px; }

    /* ── Category/Calculator selection: card grid ─────────── */
    .category-selection {
        padding: 36px 48px;
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.06);
    }
    .category-selection__question {
        font-size: 24px;
        margin-bottom: 24px;
        letter-spacing: -0.3px;
    }

    .category-selection__buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .category-btn {
        padding: 22px 20px;
        font-size: 16px;
        border-radius: 18px;
        border: 1.5px solid rgba(0,0,0,0.08);
        background: #f7f8fa;
        text-align: center;
        justify-content: center;
        transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .category-btn:hover {
        background: var(--agent-color, #2563eb);
        color: #ffffff;
        border-color: var(--agent-color, #2563eb);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(37,99,235,0.2);
    }
    .category-btn--with-icon {
        flex-direction: column;
        gap: 10px;
        padding: 26px 18px;
    }
    .category-btn__icon svg { width: 30px; height: 30px; }
    .category-btn:hover .category-btn__icon { color: #ffffff; }

    /* Contact buttons inline */
    .contact-buttons-inline .category-selection__buttons {
        grid-template-columns: 1fr 1fr;
        max-width: 700px;
    }
    .contact-btn {
        padding: 18px 24px;
        font-size: 16px;
        border-radius: 18px;
        transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .contact-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    }

    /* ── Quick reply ──────────────────────────────────────── */
    .quick-reply-btn {
        padding: 14px 28px;
        font-size: 16px;
        border-radius: 18px;
        transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .quick-reply-btn:hover {
        box-shadow: 0 2px 8px rgba(37,99,235,0.15);
    }

    /* ── Chat footer ─────────────────────────────────────── */
    #view-chat .chat-footer { padding: 14px 40px 16px; }
    #view-chat .chat-footer__links { gap: 8px; }
    #view-chat .chat-footer__links a { font-size: 12px; }
    #view-chat .chat-footer__copy { font-size: 12px; }
}

/* ── Schadensmeldung: Versicherer-Tiles ─────────────────────────────────── */
.lp-schaden__heading {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 28px;
    color: #1D1D1F;
    letter-spacing: -0.01em;
}
.lp-schaden__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin-inline: auto;
}
@media (max-width: 1100px) {
    .lp-schaden__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .lp-schaden__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lp-schaden__item { margin: 0; padding: 0; }
.lp-schaden__tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    min-height: 180px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    color: #1D1D1F !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.lp-schaden__tile:hover {
    transform: translateY(-2px);
    border-color: #143566;
    box-shadow: 0 8px 24px rgba(20, 53, 102, 0.12);
}
.lp-schaden__tile:focus-visible {
    outline: 2px solid #143566;
    outline-offset: 3px;
}
.lp-schaden__tile img {
    flex: 1 1 auto;
    width: 100%;
    max-width: 220px;
    max-height: 80px;
    align-self: center;
    object-fit: contain;
    padding: 28px 24px;
    box-sizing: content-box;
}
.lp-schaden__name {
    font-size: 14px;
    font-weight: 600;
    color: #515154;
    text-align: center;
    padding: 12px 14px;
    background: #f5f5f7;
    border-top: 1px solid #e5e5ea;
}
.lp-schaden__hint {
    margin-top: 40px;
    text-align: center;
    font-size: 15px;
    color: #515154;
}
@media (max-width: 720px) {
    .lp-schaden__grid { grid-template-columns: 1fr; gap: 18px; }
    .lp-schaden__tile { min-height: 140px; }
    .lp-schaden__tile img { max-height: 64px; padding: 22px 18px; }
    .lp-schaden__heading { font-size: 20px; margin: 28px 0 20px; }
}