/* 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); }
@media (max-width: 900px) { .hc-layout { grid-template-columns: minmax(0, 1fr); } .hc-nav { display: none; } }

.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); }
.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; }
@media (max-width: 1100px) { .hc-article-body { grid-template-columns: minmax(0, 1fr); } .hc-toc { display: none; } }
.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); }
.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); }

.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; }