/* Smake Help Center — Layout innerhalb des Filament-Modals. Farben/Abstände
   über Filaments CSS-Variablen, damit Dark Mode und Panel-Farben greifen. */
.hc-root { display: contents; }
/* Der Button erbt seine Farbe über --hc-trigger-fg, damit er auch auf dunklen
   Topbars lesbar bleibt: die App setzt z. B. `.fi-topbar .hc-trigger { --hc-trigger-fg: #fff }`. */
.hc-trigger { margin-inline: .5rem; --hc-trigger-fg: var(--gray-700); color: var(--hc-trigger-fg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc-trigger-fg) 40%, transparent) !important; }
.hc-trigger:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc-trigger-fg) 70%, transparent) !important; background-color: color-mix(in srgb, var(--hc-trigger-fg) 10%, transparent) !important; }
.hc-trigger .fi-icon { color: var(--hc-trigger-fg); }
.dark .hc-trigger { --hc-trigger-fg: var(--gray-200); }

.hc-modal .fi-modal-content { padding: 0 !important; }

/* Feste Höhe: nur die Inhaltsspalte (.hc-main) scrollt, nie das Modal-Fenster selbst —
   sonst zeigt Filaments Fenster eine zweite Scroll-Leiste am rechten Rand. */
.hc-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); height: min(46rem, calc(100dvh - 4rem)); border-radius: var(--radius-xl, .75rem); overflow: hidden; }
.hc-modal .fi-modal-window { overflow: hidden; box-shadow: 0 0 0 1px rgb(3 7 18 / .08), 0 24px 48px -12px rgb(3 7 18 / .25), 0 8px 16px -8px rgb(3 7 18 / .1); }
.dark .hc-modal .fi-modal-window { box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 48px -12px rgb(0 0 0 / .6); }


.hc-nav { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; overflow-y: auto; background-color: var(--gray-50); border-inline-end: 1px solid var(--gray-200); }
.dark .hc-nav { background-color: rgb(255 255 255 / .02); border-color: rgb(255 255 255 / .1); }
.hc-nav-brand { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; color: var(--gray-950); }
.dark .hc-nav-brand { color: #fff; }
.hc-nav-brand-icon { width: 1.35rem; height: 1.35rem; color: var(--primary-500); }
.hc-nav-group { display: flex; flex-direction: column; gap: .25rem; }
.hc-nav-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); padding-inline: .5rem; }
.hc-nav-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: start; padding: .375rem .625rem; border-radius: .375rem; font-size: .875rem; line-height: 1.25rem; color: var(--gray-700); }
.hc-nav-item:hover { background-color: var(--gray-100); color: var(--gray-950); }
.hc-nav-item--active { background-color: #fff; color: var(--gray-950); font-weight: 600; box-shadow: 0 0 0 1px rgb(3 7 18 / .05), 0 1px 2px rgb(0 0 0 / .05); }
.dark .hc-nav-item { color: var(--gray-300); }
.dark .hc-nav-item:hover, .dark .hc-nav-item--active { background-color: rgb(255 255 255 / .06); color: #fff; }
.hc-nav-item-icon { width: 1rem; height: 1rem; color: var(--gray-400); }

/* Schmale Scroll-Leisten mit transparenter Schiene: Chrome reserviert bei klassischen
   Scroll-Leisten sonst eine graue Spalte, selbst wenn nichts überläuft. */
.hc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* Nur der Inhalt scrollt; Kopfzeile und Inhaltsverzeichnis stehen fest. */
.hc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gray-500) 45%, transparent) transparent; }
.hc-nav { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gray-500) 45%, transparent) transparent; }
.hc-article-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.75rem; border-bottom: 1px solid var(--gray-200); }
.dark .hc-article-header { border-color: rgb(255 255 255 / .1); }
.hc-breadcrumbs { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--gray-500); }
.hc-breadcrumb-sep { color: var(--gray-400); user-select: none; }
.hc-breadcrumb--current { color: var(--gray-950); font-weight: 500; }
.hc-breadcrumb--link { color: var(--gray-500); white-space: nowrap; }
.hc-breadcrumb--link:hover { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.hc-article-header-meta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.hc-context-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.hc-context-label-icon { width: .875rem; height: .875rem; color: var(--primary-500); }
.dark .hc-breadcrumb--current { color: #fff; }
.hc-badge { font-size: .7rem; font-weight: 600; padding: .125rem .5rem; border-radius: 9999px; background-color: var(--gray-100); color: var(--gray-600); }
.hc-link { font-size: .8125rem; font-weight: 500; color: var(--gray-700); }
.hc-link:hover { color: var(--primary-600); }

.hc-article-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 12.75rem; gap: 0; }
.hc-article-scroll { padding: 1.75rem 2.5rem; }
.hc-prose { position: relative; isolation: isolate; max-width: 48rem; font-size: .9375rem; line-height: 1.6; }
.hc-prose h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin: 0 0 1rem; color: var(--gray-950); }
.dark .hc-prose h1 { color: #fff; }
.hc-prose h2 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .5rem; scroll-margin-top: 1rem; }
/* Aufleuchten nach einem Sprung aus dem Inhaltsverzeichnis */
@keyframes hc-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.hc-prose .hc-flash { position: absolute; inset-inline: -.5rem; margin-block: -.375rem; padding-block: .375rem; box-sizing: content-box; border-radius: .375rem; background-color: var(--primary-100); pointer-events: none; z-index: -1; animation: hc-flash 1.6s ease-out forwards; }
.hc-prose h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .375rem; scroll-margin-top: 1rem; }
.hc-prose p, .hc-prose ul, .hc-prose ol { margin: 0 0 .875rem; }
.hc-prose ul, .hc-prose ol { padding-inline-start: 1.375rem; }
.hc-prose li + li { margin-top: .25rem; }
.hc-prose img { max-width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 0 0 1px rgb(3 7 18 / .05); margin: .5rem 0 1rem; }
.hc-prose table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 0 0 1rem; }
.hc-prose th, .hc-prose td { text-align: start; padding: .5rem .625rem; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.hc-prose th { font-weight: 600; background-color: var(--gray-50); }
.dark .hc-prose th { background-color: rgb(255 255 255 / .04); }
.dark .hc-prose th, .dark .hc-prose td { border-color: rgb(255 255 255 / .1); }
.hc-prose blockquote { margin: 0 0 1rem; padding: .75rem .875rem; border-radius: .5rem; background-color: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200); font-style: normal; }
.dark .hc-prose blockquote { background-color: rgb(255 255 255 / .04); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.hc-prose blockquote p:last-child { margin-bottom: 0; }
.hc-prose blockquote p::before, .hc-prose blockquote p::after { content: none; }
.hc-prose code { font-size: .85em; padding: .1em .35em; border-radius: .25rem; background-color: var(--gray-100); }
.dark .hc-prose code { background-color: rgb(255 255 255 / .08); }
.hc-prose pre { padding: .875rem 1rem; border-radius: .5rem; background-color: var(--gray-950); color: #fff; overflow-x: auto; font-size: .8125rem; }
.hc-prose pre code { background: none; padding: 0; }
.hc-prose a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.hc-prose a[data-help-article] { text-decoration-style: dotted; }
.hc-prose mark { background-color: var(--primary-100); border-radius: .2rem; padding: 0 .15em; }
.hc-related { list-style: none; padding: 0; }
.hc-article-meta { margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--gray-200); font-size: .75rem; color: var(--gray-400); }
.dark .hc-article-meta { border-color: rgb(255 255 255 / .1); }
/* Kontakt zum Support: am Artikelende und bei leeren Suchergebnissen */
.hc-article-support { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .8125rem; color: var(--gray-500); }
.hc-notice + .hc-article-support { margin: .75rem 1.75rem 0; }
/* fi-prose setzt Abstände zwischen Geschwistern; in der Zeile stehen Text und Link nebeneinander */
.hc-article-support > *, .hc-support-link > * { margin: 0 !important; }
.hc-prose .hc-article-meta + .hc-article-support { margin-top: .5rem; }
.hc-prose .hc-support-link, .hc-support-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; color: var(--primary-600); text-decoration: none; }
.hc-support-link:hover { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
.dark .hc-support-link { color: var(--primary-400); }
.hc-support-link-icon { width: 1rem; height: 1rem; }
/* Direktlink kopieren (Kopfzeile des Artikels) */
.hc-copy-link { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: .375rem; font-size: .75rem; font-weight: 500; color: var(--gray-600); white-space: nowrap; }
.hc-copy-link:hover { background-color: var(--gray-100); color: var(--gray-950); }
.dark .hc-copy-link { color: var(--gray-300); }
.dark .hc-copy-link:hover { background-color: rgb(255 255 255 / .06); color: #fff; }
.hc-copy-link-icon { width: .875rem; height: .875rem; }

.hc-toc { display: flex; flex-direction: column; gap: .375rem; min-height: 0; overflow-y: auto; padding: 1.75rem 2rem 1.75rem .75rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gray-500) 45%, transparent) transparent; }
.hc-toc-link { font-size: .8125rem; line-height: 1.25rem; color: var(--gray-500); hyphens: auto; overflow-wrap: break-word; padding: .125rem .5rem .125rem .625rem; border-inline-start: 2px solid var(--gray-200); border-start-end-radius: .375rem; border-end-end-radius: .375rem; transition: color .1s ease, background-color .1s ease, border-color .1s ease; }
.hc-toc-link:hover { color: var(--gray-950); border-color: var(--primary-400); background-color: var(--gray-100); }
.hc-toc-link--sub { padding-inline-start: 1.25rem; }
/* Aktiver Abschnitt: nach der Grundregel, damit Farbe und Rahmen greifen */
.hc-toc-link--active, .hc-toc-link--active:hover { color: var(--primary-800); border-inline-start-width: 3px; border-color: var(--primary-600); background-color: var(--primary-100); font-weight: 600; }

.hc-notice { display: flex; align-items: center; gap: .625rem; margin: 1.25rem 1.75rem 0; padding: .75rem .875rem; border-radius: .5rem; background-color: var(--gray-50); box-shadow: 0 0 0 1px rgb(3 7 18 / .05); font-size: .875rem; color: var(--gray-700); }
.dark .hc-notice { background-color: rgb(255 255 255 / .04); color: var(--gray-300); }
.hc-notice-icon { width: 1.25rem; height: 1.25rem; color: var(--gray-400); flex-shrink: 0; }
.hc-muted { color: var(--gray-500); font-size: .75rem; font-weight: 400; }

.hc-index-group { padding: 1.25rem 1.75rem 0; }
.hc-index-group:last-child { padding-bottom: 1.75rem; }
.dark .hc-toc-link:hover { background-color: rgb(255 255 255 / .06); }
.dark .hc-toc-link--active, .dark .hc-toc-link--active:hover { color: var(--primary-300); border-color: var(--primary-400); background-color: color-mix(in srgb, var(--primary-500) 25%, transparent); }
.hc-index-group-title { display: flex; align-items: baseline; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--gray-950); margin-bottom: .625rem; }
.dark .hc-index-group-title { color: #fff; }
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.hc-card { display: flex; flex-direction: column; gap: .25rem; text-align: start; padding: .875rem; border-radius: .625rem; background-color: #fff; box-shadow: 0 0 0 1px rgb(3 7 18 / .06), 0 1px 2px rgb(0 0 0 / .04); }
.hc-card:hover { box-shadow: 0 0 0 1px var(--primary-400), 0 1px 2px rgb(0 0 0 / .04); }
.dark .hc-card { background-color: rgb(255 255 255 / .04); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.hc-card-title { font-size: .875rem; font-weight: 600; color: var(--gray-950); }
.dark .hc-card-title { color: #fff; }
.hc-card-excerpt { font-size: .8125rem; line-height: 1.25rem; color: var(--gray-500); }

.hc-results-summary { padding: 1.25rem 1.75rem 0; font-size: .9375rem; color: var(--gray-700); }
.hc-results { display: flex; flex-direction: column; gap: .375rem; padding: 1rem 1.75rem 1.75rem; }
.hc-result { display: flex; flex-direction: column; gap: .25rem; text-align: start; padding: .875rem 1rem; border-radius: .625rem; }
.hc-result:hover { background-color: var(--gray-50); box-shadow: 0 0 0 1px rgb(3 7 18 / .06); }
.dark .hc-result:hover { background-color: rgb(255 255 255 / .04); }
.hc-result-group { font-size: .75rem; color: var(--gray-500); }
.hc-result-title { font-size: .9375rem; font-weight: 600; color: var(--gray-950); }
.dark .hc-result-title { color: #fff; }
.hc-result-snippet { font-size: .875rem; line-height: 1.3rem; color: var(--gray-700); }
.hc-result mark, .hc-result-title mark { background-color: var(--primary-100); color: inherit; border-radius: .2rem; padding: 0 .15em; }

.hc-inline-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 500; color: var(--primary-600); }
.hc-inline-link:hover { color: var(--primary-700); text-decoration: underline; }
.hc-inline-link-icon { width: 1rem; height: 1rem; }

/* KI-Assistent: Chatblase unten rechts. z-index unter der Topbar (30): das Hilfe-Overlay
   wird in der Topbar gerendert und soll samt Hintergrund über dem Chat liegen. */
.hc-chat-scroll { padding: 1rem 1.25rem; }
.hc-chat { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; margin-inline: auto; }
.hc-chat-intro { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem .5rem; text-align: center; font-size: .9375rem; color: var(--gray-600); }
.dark .hc-chat-intro { color: var(--gray-400); }
.hc-chat-notice { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding: .75rem .875rem; border-radius: .5rem; background-color: var(--gray-50); text-align: start; font-size: .75rem; line-height: 1.5; color: var(--gray-500); }
.dark .hc-chat-notice { background-color: rgb(255 255 255 / .05); color: var(--gray-400); }
.hc-chat-notice p { margin: 0; }
.hc-chat-notice a { text-decoration: underline; text-underline-offset: 2px; }
.hc-chat-notice a:hover { color: var(--primary-600); }
.dark .hc-chat-notice a:hover { color: var(--primary-400); }
.hc-chat-intro-icon { width: 2rem; height: 2rem; color: var(--primary-500); }
.hc-chat-message { font-size: .875rem; line-height: 1.6; }
.hc-chat-message--user { position: relative; align-self: flex-end; max-width: 80%; padding: .625rem .875rem; border-radius: .75rem; background-color: var(--primary-50); color: var(--gray-950); white-space: normal; }
.dark .hc-chat-message--user { background-color: color-mix(in srgb, var(--primary-500) 20%, var(--gray-900)); color: #fff; }
/* Flex mit align-items: baseline – das Icon (align-self: center) zählt nicht, die Grundlinie des Badges kommt vom Text und liegt auf der des umgebenden Texts */
.hc-masked { display: inline-flex; align-items: baseline; gap: .2rem; padding: 0 .4rem 0 .3rem; border-radius: 9999px; background-color: #fff; box-shadow: inset 0 0 0 1px var(--primary-200); color: var(--primary-700); font-size: .75rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap; cursor: help; }
.hc-masked:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.dark .hc-masked { background-color: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); color: var(--primary-300); }
.hc-masked-icon { flex: none; align-self: center; width: .875rem; height: .875rem; }
.hc-masked-hint { margin-inline-start: .125rem; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.hc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hc-chat-message--assistant { position: relative; align-self: flex-start; max-width: 92%; padding: .625rem .875rem; border-radius: .75rem; background-color: var(--gray-100); color: var(--gray-950); }
.dark .hc-chat-message--assistant { background-color: color-mix(in srgb, #fff 6%, var(--gray-900)); color: #fff; }
/* Sprechblasen-Zipfel (iMessage-Technik): ::before in Blasenfarbe bildet den Zipfel, ::after in
   der Hintergrundfarbe des Chatfensters schneidet die Innenkurve heraus. Deshalb sind die Blasen
   auch im Dark Mode deckend. */
.hc-chat-message--user::before, .hc-chat-message--assistant::before { content: ''; position: absolute; bottom: 0; width: 1.5rem; height: 1.5rem; background-color: inherit; }
.hc-chat-message--user::after, .hc-chat-message--assistant::after { content: ''; position: absolute; bottom: 0; width: 1rem; height: 1.5rem; background-color: #fff; }
.dark .hc-chat-message--user::after, .dark .hc-chat-message--assistant::after { background-color: var(--gray-900); }
.hc-chat-message--user::before { right: -.625rem; border-bottom-left-radius: 1.25rem 1.125rem; }
.hc-chat-message--user::after { right: -1rem; border-bottom-left-radius: .75rem; }
.hc-chat-message--assistant::before { left: -.625rem; border-bottom-right-radius: 1.25rem 1.125rem; }
.hc-chat-message--assistant::after { left: -1rem; border-bottom-right-radius: .75rem; }
.hc-chat-alert { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem; border-radius: .5rem; background-color: var(--warning-50, #fffbeb); box-shadow: inset 0 0 0 1px var(--warning-200, #fde68a); color: var(--gray-700); font-size: .8125rem; line-height: 1.5; }
.dark .hc-chat-alert { background-color: color-mix(in srgb, var(--warning-500, #f59e0b) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning-500, #f59e0b) 30%, transparent); color: var(--gray-200); }
.hc-chat-alert-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; color: var(--warning-600, #d97706); }
.dark .hc-chat-alert-icon { color: var(--warning-400, #fbbf24); }
.hc-chat-alert-text > :first-child { margin-top: 0; }
.hc-chat-alert-text > :last-child { margin-bottom: 0; }
.hc-chat-alert-text a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hc-chat-sources { margin-top: .75rem; padding-top: .625rem; border-top: 1px solid var(--gray-200); }
.dark .hc-chat-sources { border-color: rgb(255 255 255 / .1); }
.hc-chat-prose .hc-chat-sources-title { margin: 0 0 .375rem; font-size: .75rem; font-weight: 600; color: var(--gray-500); }
.dark .hc-chat-prose .hc-chat-sources-title { color: var(--gray-400); }
.hc-chat-prose .hc-chat-cards { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
/* Karten mitten im Text: Abstand wie ein Absatz (nach der Grundregel, damit sie gewinnt) */
.hc-chat-prose > .hc-chat-cards { margin: .75rem 0; }
.hc-chat-prose .hc-chat-cards li { margin: 0; padding: 0; }
.hc-chat-prose .hc-chat-cards li::before, .hc-chat-prose .hc-chat-cards li::marker { content: none; }
.hc-chat-prose .hc-chat-cards a { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: .5rem; background-color: #fff; box-shadow: 0 0 0 1px var(--gray-200); color: var(--primary-700); font-weight: 500; text-decoration: none; transition: box-shadow .15s ease, background-color .15s ease; }
.hc-chat-prose .hc-chat-cards a:hover { box-shadow: 0 0 0 1px var(--primary-300); background-color: var(--primary-50); }
.dark .hc-chat-prose .hc-chat-cards a { background-color: rgb(255 255 255 / .05); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); color: var(--primary-300); }
.dark .hc-chat-prose .hc-chat-cards a:hover { background-color: rgb(255 255 255 / .1); box-shadow: 0 0 0 1px var(--primary-400); }
/* Prose setzt Abstände zwischen Kindelementen in Listen, in den Karten stören sie */
.hc-chat-prose .hc-chat-cards a > :is(span, svg) { margin: 0; }
.hc-chat-cards a > span { flex: 1; min-width: 0; }
.hc-chat-source-icon { flex: none; width: 1rem; height: 1rem; color: var(--gray-400); }
.hc-chat-source-arrow { flex: none; width: .875rem; height: .875rem; opacity: .6; transition: transform .15s ease; }
.hc-chat-cards a:hover .hc-chat-source-arrow { transform: translateX(2px); opacity: 1; }
.hc-chat-prose > :first-child { margin-top: 0; }
.hc-chat-prose > :last-child { margin-bottom: 0; }
.hc-chat-typing { display: flex; align-items: center; gap: .3rem; height: 1.5rem; }
.hc-chat-typing i { display: block; flex: none; width: .4rem; height: .4rem; margin: 0; border-radius: 9999px; background-color: var(--gray-400); animation: hc-typing 1.2s infinite ease-in-out both; }
.hc-chat-typing i:nth-child(2) { animation-delay: .15s; }
.hc-chat-typing i:nth-child(3) { animation-delay: .3s; }
/* `both`: auch während ihrer Verzögerung stehen Punkt 2 und 3 im Startzustand der
   Animation – sonst sitzen sie anfangs anders als Punkt 1. */
@keyframes hc-typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.hc-chat-form { flex-shrink: 0; display: flex; flex-direction: column; gap: .375rem; padding: .75rem 1rem; border-top: 1px solid var(--gray-200); }
.dark .hc-chat-form { border-color: rgb(255 255 255 / .1); }
.hc-chat-composer { display: flex; align-items: flex-end; gap: .5rem; padding: .375rem .375rem .375rem .75rem; border-radius: .75rem; background-color: #fff; box-shadow: 0 0 0 1px var(--gray-300); transition: box-shadow .15s ease; }
.hc-chat-composer:focus-within { box-shadow: 0 0 0 2px var(--primary-500); }
.dark .hc-chat-composer { background-color: rgb(255 255 255 / .05); box-shadow: 0 0 0 1px rgb(255 255 255 / .2); }
.dark .hc-chat-composer:focus-within { box-shadow: 0 0 0 2px var(--primary-500); }
/* Wächst mit dem Text (field-sizing), ohne Unterstützung bleibt es einzeilig und scrollt */
.hc-chat-input { flex: 1; min-width: 0; min-height: 2rem; max-height: 8rem; field-sizing: content; resize: none; padding: .375rem 0; border: 0; background: transparent; font-size: .875rem; line-height: 1.4; color: var(--gray-950); box-shadow: none; }
.hc-chat-input::placeholder { color: var(--gray-400); }
.hc-chat-input:focus, .hc-chat-input:focus-visible { outline: none; box-shadow: none; }
.dark .hc-chat-input { color: #fff; }
.hc-chat-send { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; background-color: var(--hc-accent, var(--primary-600)); color: #fff; transition: background-color .15s ease, opacity .15s ease; }
.hc-chat-send:hover { background-color: var(--hc-accent-hover, var(--primary-700)); }
.hc-chat-send:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.hc-chat-send:disabled { opacity: .4; cursor: not-allowed; }
.hc-chat-send-icon { width: 1rem; height: 1rem; }
.hc-chat-keys { padding-inline: .25rem; font-size: .6875rem; color: var(--gray-400); }
/* Auf Touch-Geräten gibt es keine Enter-/Umschalt-Kombination */
@media (hover: none) { .hc-chat-keys { display: none; } }
.hc-chat-hint { font-size: .875rem; color: var(--gray-600); }
.hc-chat-limit { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding-block: .25rem; text-align: center; }
.hc-chat-limit .hc-chat-hint { max-width: 22rem; text-wrap: balance; }
/* Weiß auf dem Akzentton wie Chatblase und Senden (Ton aus AccentShade), statt der von Filament gewählten Schrift */
.hc-chat-limit .hc-chat-limit-button.fi-color { --bg: var(--hc-accent); --hover-bg: var(--hc-accent-hover); --dark-bg: var(--hc-accent); --dark-hover-bg: var(--hc-accent-hover); --text: #fff; --hover-text: #fff; --dark-text: #fff; --dark-hover-text: #fff; }
[x-cloak] { display: none !important; }
.hc-assistant { position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.hc-assistant-bubble { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 9999px; background-color: var(--hc-accent, var(--primary-600)); color: #fff; box-shadow: 0 8px 24px -6px rgb(3 7 18 / .35), 0 2px 6px rgb(3 7 18 / .15); transition: transform .15s ease, background-color .15s ease; }
.hc-assistant-bubble:hover { background-color: var(--hc-accent-hover, var(--primary-700)); transform: scale(1.05); }
.hc-assistant-bubble:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 3px; }
.hc-assistant-bubble-icon { width: 1.5rem; height: 1.5rem; }
.hc-assistant-panel { display: flex; flex-direction: column; width: min(26rem, calc(100vw - 2.5rem)); height: min(38rem, calc(100dvh - 7rem)); border-radius: var(--radius-xl, .75rem); overflow: hidden; background-color: #fff; box-shadow: 0 0 0 1px rgb(3 7 18 / .08), 0 24px 48px -12px rgb(3 7 18 / .3), 0 8px 16px -8px rgb(3 7 18 / .1); }
.dark .hc-assistant-panel { background-color: var(--gray-900); box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 48px -12px rgb(0 0 0 / .6); }
.hc-assistant-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); }
.dark .hc-assistant-header { border-color: rgb(255 255 255 / .1); }
.hc-assistant-title { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: var(--gray-950); }
.dark .hc-assistant-title { color: #fff; }
.hc-assistant-title-icon { width: 1.25rem; height: 1.25rem; color: var(--primary-500); }
.hc-assistant-actions { display: flex; align-items: center; gap: .75rem; }
.hc-assistant-close { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .375rem; color: var(--gray-500); }
.hc-assistant-close:hover { background-color: var(--gray-100); color: var(--gray-950); }
.dark .hc-assistant-close:hover { background-color: rgb(255 255 255 / .06); color: #fff; }
.hc-assistant-close-icon { width: 1.125rem; height: 1.125rem; }
.hc-assistant .hc-chat-prose { font-size: .875rem; }
/* Handy: Vollbild statt schwebendem Fenster, damit die Tastatur das Eingabefeld nicht verdeckt;
   16px im Eingabefeld, sonst zoomt iOS beim Antippen die Seite heran. */
@media (max-width: 640px) {
    .hc-assistant { inset-inline-end: .75rem; bottom: .75rem; }
    .hc-assistant-panel { position: fixed; inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
    .hc-assistant--open .hc-assistant-bubble { display: none; }
    /* über Filaments Kopfleiste (30), unter Modals (40) – Artikel-Links öffnen das Hilfe-Fenster darüber */
    .hc-assistant--open { z-index: 35; }
    .hc-assistant .hc-chat-input { font-size: 16px; }
    .hc-article-header { flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; }
    .hc-article-scroll { padding: 1.25rem 1rem; }
}

/* Hinweis-Boxen: Zitate mit ⚠️ / ℹ️ / 💡 / ✅ am Anfang (MarkdownRenderer::callouts). Das Icon kommt
   als Maske aus Heroicons, die Farbe aus den Filament-Farben des Panels. */
.hc-prose blockquote.hc-callout { position: relative; margin: 1.25rem 0; padding: .75rem 1rem .75rem 2.75rem; border: 0; border-radius: .5rem; font-style: normal; color: var(--gray-700); }
.dark .hc-prose blockquote.hc-callout { color: var(--gray-200); }
.hc-prose blockquote.hc-callout p::before, .hc-prose blockquote.hc-callout p::after { content: none; }
.hc-prose blockquote.hc-callout > :first-child { margin-top: 0; }
.hc-prose blockquote.hc-callout > :last-child { margin-bottom: 0; }
.hc-prose blockquote.hc-callout::before { content: ''; position: absolute; inset-inline-start: .875rem; top: .8rem; width: 1.15rem; height: 1.15rem; background-color: var(--hc-callout-icon); -webkit-mask: var(--hc-callout-mask) no-repeat center / contain; mask: var(--hc-callout-mask) no-repeat center / contain; }
.hc-prose blockquote.hc-callout--warning { --hc-callout-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126ZM12%2015.75h.007v.008H12v-.008Z%22%2F%3E%3C%2Fsvg%3E"); --hc-callout-icon: var(--warning-600, #d97706); background-color: var(--warning-50, #fffbeb); box-shadow: inset 0 0 0 1px var(--warning-200, #fde68a); }
.dark .hc-prose blockquote.hc-callout--warning { --hc-callout-icon: var(--warning-400, #f59e0b); background-color: color-mix(in srgb, var(--warning-500, #f59e0b) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning-500, #f59e0b) 30%, transparent); }
.hc-prose blockquote.hc-callout--info { --hc-callout-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11.25%2011.25.041-.02a.75.75%200%200%201%201.063.852l-.708%202.836a.75.75%200%200%200%201.063.853l.041-.021M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9-3.75h.008v.008H12V8.25Z%22%2F%3E%3C%2Fsvg%3E"); --hc-callout-icon: var(--info-600, #2563eb); background-color: var(--info-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--info-200, #bfdbfe); }
.dark .hc-prose blockquote.hc-callout--info { --hc-callout-icon: var(--info-400, #3b82f6); background-color: color-mix(in srgb, var(--info-500, #3b82f6) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info-500, #3b82f6) 30%, transparent); }
.hc-prose blockquote.hc-callout--tip { --hc-callout-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%200%200%201.5-.189m-1.5.189a6.01%206.01%200%200%201-1.5-.189m3.75%207.478a12.06%2012.06%200%200%201-4.5%200m3.75%202.383a14.406%2014.406%200%200%201-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%201%200-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%2F%3E%3C%2Fsvg%3E"); --hc-callout-icon: var(--primary-600, #65a30d); background-color: var(--primary-50, #f7fee7); box-shadow: inset 0 0 0 1px var(--primary-200, #d9f99d); }
.dark .hc-prose blockquote.hc-callout--tip { --hc-callout-icon: var(--primary-400, #84cc16); background-color: color-mix(in srgb, var(--primary-500, #84cc16) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-500, #84cc16) 30%, transparent); }
.hc-prose blockquote.hc-callout--success { --hc-callout-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2012.75%2011.25%2015%2015%209.75M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%22%2F%3E%3C%2Fsvg%3E"); --hc-callout-icon: var(--success-600, #16a34a); background-color: var(--success-50, #f0fdf4); box-shadow: inset 0 0 0 1px var(--success-200, #bbf7d0); }
.dark .hc-prose blockquote.hc-callout--success { --hc-callout-icon: var(--success-400, #22c55e); background-color: color-mix(in srgb, var(--success-500, #22c55e) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success-500, #22c55e) 30%, transparent); }

/* „War dieser Artikel hilfreich?“ am Artikelende und Daumen an Antworten des Assistenten */
.hc-article-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; padding: .75rem 1rem; border-radius: .5rem; background-color: var(--gray-50); box-shadow: 0 0 0 1px rgb(3 7 18 / .05); font-size: .875rem; color: var(--gray-700); }
.dark .hc-article-feedback { background-color: rgb(255 255 255 / .04); color: var(--gray-300); }
.hc-article-feedback > *, .hc-feedback-button > * { margin: 0 !important; }
.hc-article-feedback-question { margin-inline-end: .25rem !important; font-weight: 500; }
.hc-feedback-button { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .625rem; border-radius: .375rem; font-size: .8125rem; font-weight: 500; color: var(--gray-700); background-color: #fff; box-shadow: 0 0 0 1px rgb(3 7 18 / .1); }
.hc-feedback-button:hover { color: var(--gray-950); box-shadow: 0 0 0 1px rgb(3 7 18 / .2); }
.dark .hc-feedback-button { color: var(--gray-200); background-color: rgb(255 255 255 / .05); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.dark .hc-feedback-button:hover { color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .2); }
.hc-feedback-icon { width: 1rem; height: 1rem; }
.hc-feedback-icon--thanks { color: var(--success-600, #16a34a); }
.hc-answer-rating { display: flex; align-items: center; gap: .25rem; margin-top: .375rem; font-size: .75rem; color: var(--gray-500); }
.hc-answer-rating-button { display: inline-flex; padding: .25rem; border-radius: .375rem; color: var(--gray-400); }
.hc-answer-rating-button:hover { color: var(--gray-700); background-color: var(--gray-100); }
.dark .hc-answer-rating-button:hover { color: #fff; background-color: rgb(255 255 255 / .06); }
.hc-answer-rating-button--active { color: var(--primary-600); }
.hc-answer-rating .hc-feedback-icon { width: .9rem; height: .9rem; }

/* Breakpoints am Ende: sie müssen nach den Grundregeln stehen, sonst überschreiben diese sie. */
@media (max-width: 1100px) { .hc-article-body { grid-template-columns: minmax(0, 1fr); } .hc-toc { display: none; } }
/* Schmal (Tablet hochkant, Handy): die Navigation wird zur Leiste über dem Inhalt –
   Suche und „Alle Themen“ bleiben erreichbar, die Artikellisten links entfallen
   (Kontextartikel stehen am Artikelende unter „Weitere Artikel“). */
@media (max-width: 900px) {
    .hc-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .hc-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; padding-inline-end: 3rem; overflow: visible; border-inline-end: 0; border-bottom: 1px solid var(--gray-200); }
    .dark .hc-nav { border-color: rgb(255 255 255 / .1); }
    .hc-nav-brand, .hc-nav-group:not(.hc-nav-group--primary) { display: none; }
    .hc-search { flex: 1 1 12rem; min-width: 0; }
    .hc-nav-group--primary .hc-nav-item { width: auto; white-space: nowrap; }
}

/* Wissenslücken (HelpCenterSupportPlugin): die Frage füllt die Zeile und wird mit „…“ gekürzt,
   damit die Tabelle einzeilig bleibt und nicht seitlich scrollt */
.fi-ta-table td.hc-gaps-fill { width: 100%; max-width: 0; }
.fi-ta-table td.hc-gaps-fill .fi-ta-text,
.fi-ta-table td.hc-gaps-fill .fi-ta-text-item { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }