/* aidbass · öffentliche Seiten (Hilfe-Center, Ticketformular, Passwort, Demo).
   Grundlage ist das Stylesheet von bassliner.org (/brand/bassliner.css, Tailwind) und dessen Markup.
   Hier stehen nur Ergänzungen: unsere Extras im selben Stil, Las-Vegas-Pfeil und der Dunkelmodus. */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

/* Pinke Knöpfe: Verlauf beim Überfahren (bei bassliner.org in LoginForm.css, gilt dort nur für <button>) */
.btn-primary .bg { background-image: linear-gradient(44deg, #ff7b00, #d702a5); height: 100%; width: 100%; opacity: 0; position: absolute; inset: 0; transition: opacity .3s ease; }
.btn-primary:hover .bg, .btn-primary:focus-visible .bg { opacity: 1; }
a.btn-primary { color: #fff; text-decoration: none; }
.btn-primary { color: #fff; }

/* Hell/Dunkel-Schalter im Stil des Sprachumschalters */
.bl-theme { height: 40px; width: 40px; align-items: center; justify-content: center; background: var(--color-gray-200, #e5e7eb); color: #6a7282; cursor: pointer; transition: color .2s; }
.bl-theme:hover { color: #1e2939; }
.bl-ft-tools { align-items: center; gap: 20px; }
.bl-theme-f { display: inline-flex; cursor: pointer; color: inherit; opacity: .8; }
.bl-theme-f:hover { opacity: 1; }
.bl-theme-m { color: #fff; padding: 4px; cursor: pointer; display: inline-flex; }
[data-theme-toggle] .i-sun { display: none; }
[data-theme-toggle].is-dark .i-sun { display: block; }
[data-theme-toggle].is-dark .i-moon { display: none; }

/* Dr. Uffi oben: anklickbar, öffnet den Chat */
.bl-uffi { display: block; cursor: pointer; line-height: 0; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.bl-uffi:hover { transform: translateY(-4px); }
.bl-uffi img { display: block; }

/* Beliebte Fragen unter der Suche */
.bl-popular { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; font-size: 14px; }
.bl-popular .bl-pl { font-weight: 700; margin-right: 2px; }
.bl-chip { background: #fff; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); outline: 1px solid var(--Grey-Blue-200); padding: 5px 11px; font-size: 14px; font-weight: 500; cursor: pointer; transition: box-shadow .2s, outline-color .2s; }
/* Die Zeile „Beliebt“ sitzt im unteren Polster des Suchbereichs, damit die FAQ an derselben Stelle beginnen wie auf bassliner.org */
.bl-search > .pb-16:has(.bl-popular:not(:empty)) { padding-bottom: 12px; }
@media (min-width: 64rem) { .bl-search > .pb-16:has(.bl-popular:not(:empty)) { padding-bottom: 15px; } }
.bl-chip:hover { box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); outline-color: transparent; }

/* Suchergebnisse */
.bl-res-h { padding-top: 24px; margin-bottom: 20px; }
.bl-res-h b { font-weight: 700; display: block; }

/* FAQ-Karten (Markup wie bassliner.org; geöffnet: Verlaufsknopf mit Minus) */
.bl-qa { position: relative; scroll-margin-top: 24px; }
.bl-qa .bl-tg span { transition: all .15s; }
.bl-ans { padding-top: 0; }
.bl-ans .prose { color: var(--Grey-Blue-950, #22272a); }
.bl-ans .prose p { margin-top: .6em; margin-bottom: .6em; }
.bl-ans .prose p:first-child { margin-top: 0; }
.bl-tools { margin-top: 18px; display: flex; gap: 16px; }
.bl-tools button, .bl-tools a { font-size: 14px; color: var(--Grey-Blue-600); cursor: pointer; padding-bottom: 2px; background: linear-gradient(90deg, #ff7b00, #d702a5) no-repeat left bottom / 0% 2px; transition: background-size .3s, color .2s; }
.bl-tools button:hover, .bl-tools a:hover { background-size: 100% 2px; color: #000; }
.bl-qa.hit { box-shadow: 0 0 0 3px #d302a2, 0 25px 50px -12px rgb(0 0 0 / .25); }

/* Kategorien links neben den Fragen (nur breit genug) */
.bl-rail { display: none; }
@media (min-width: 80rem) {
  .bl-rail { display: block; position: absolute; top: 0; bottom: 0; left: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem)); width: 180px; padding-top: 80px; pointer-events: none; }
  .bl-cats { position: sticky; top: 24px; display: grid; gap: 2px; pointer-events: auto; }
  .bl-cats a { display: block; padding: 6px 0 6px 14px; border-left: 4px solid var(--Grey-Blue-200); font-size: 15px; line-height: 1.3; color: var(--Grey-Blue-700); transition: color .2s, border-color .2s; }
  .bl-cats a:hover { color: #000; }
  .bl-cats a.on { color: #000; font-weight: 600; border-image: linear-gradient(180deg, #ff7b00, #d702a5) 1; }
  .bl-cats .bl-ct { display: block; font-size: 12px; color: var(--Grey-Blue-500); font-weight: 400; }
}

/* Dr.-Uffi-Karte und Kontakt */
.bl-uffi-card { display: flex; gap: 24px; align-items: center; }
.bl-uffi-avatar { width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--schmuck-E5DFD0, #e5dfd0); object-fit: cover; object-position: top; }
@media (max-width: 47.99rem) { .bl-uffi-card { flex-direction: column; align-items: flex-start; gap: 16px; } .bl-uffi-avatar { width: 72px; height: 72px; } }
.bl-facts { display: grid; gap: 12px; margin-bottom: 32px; }
.bl-facts li { display: flex; gap: 14px; align-items: baseline; font-size: 17px; line-height: 1.5; }
.bl-facts b { font-weight: 600; }
.bl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: linear-gradient(44deg, #ff7b00, #d702a5); transform: translateY(1px); }

/* Ladezustand */
.bl-sk { background: linear-gradient(90deg, var(--Grey-Blue-100) 0, #fff 50%, var(--Grey-Blue-100) 100%) 0 0 / 200% 100%; animation: blsk 1.3s ease-in-out infinite; }
@keyframes blsk { to { background-position: -200% 0; } }

/* Kleinteile für Passwort- und Demo-Seite */
.bl-kicker { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--Grey-Blue-600); margin-bottom: 10px; font-weight: 500; }
.bl-form { display: grid; }
.bl-form label { font-weight: 500; margin: 18px 0 8px; }
.bl-form label:first-child { margin-top: 0; }
.bl-hint { color: var(--Grey-Blue-600); font-size: 14px; margin-top: 8px; }
.bl-err { color: #d14f24; min-height: 1.4em; margin-top: 12px; }
.bl-start-4 { grid-column-start: 1; }
@media (min-width: 64rem) { .bl-start-4 { grid-column-start: 4; } }
.bl-demo-h1 { font-weight: 700; font-size: clamp(44px, 6.4vw, 84px); line-height: .98; letter-spacing: -.025em; margin-bottom: 24px; }
.bl-grad { background: linear-gradient(44deg, #ff7b00, #d702a5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bl-maxw { max-width: 36rem; }
.bl-btn-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 500; background: #fff; box-shadow: inset 0 0 0 1px var(--Grey-Blue-200); transition: box-shadow .2s; }
.bl-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--Grey-Blue-950); }
.bl-note { font-size: 13px; color: var(--Grey-Blue-600); }

/* ---- Las-Vegas-Pfeil zur gefundenen Antwort ---- */
.vg-host { position: relative; z-index: 40; }
.vegas { position: absolute; z-index: 50; pointer-events: none; transform-origin: 50% 50%; animation: vgIn .7s cubic-bezier(.2, 1.6, .4, 1) both; transition: opacity .5s, transform .5s; }
.vegas.out { opacity: 0; }
.vg-poke { animation: vgPoke .55s ease-in-out .7s infinite alternate; }
.vegas svg { display: block; overflow: visible; filter: drop-shadow(0 0 6px #ff7b00) drop-shadow(0 0 16px #d702a5); animation: vgGlow 1.1s ease-in-out infinite alternate; }
.vg-body { fill: #22272a; }
.vg-band { fill: none; stroke: #3b0f33; stroke-width: 16; stroke-linejoin: round; }
.vg-line { fill: none; stroke: url(#vgG); stroke-width: 2.5; stroke-linejoin: round; }
.vg-b { fill: #fff6c8; stroke: #ffb000; stroke-width: 1; animation: vgChase .45s steps(1) infinite; }
.vg-b1 { animation-delay: -.15s; } .vg-b2 { animation-delay: -.3s; }
.vg-t { font: 800 30px Soehne, system-ui, sans-serif; letter-spacing: .06em; fill: #fff; paint-order: stroke; stroke: #d702a5; stroke-width: 1.2px; animation: vgBlink .9s steps(1) infinite; }
.vegas.down .vg-t { font-size: 19px; letter-spacing: .02em; }
@keyframes vgIn { from { opacity: 0; transform: translateX(-140px) rotate(-12deg) scale(.6); } to { opacity: 1; transform: none; } }
.vegas.down { animation-name: vgInDown; }
@keyframes vgInDown { from { opacity: 0; transform: translateY(-140px) rotate(12deg) scale(.6); } to { opacity: 1; transform: none; } }
.vegas.down .vg-poke { animation-name: vgPokeDown; }
@keyframes vgPokeDown { from { transform: translateY(-14px); } to { transform: translateY(4px); } }
@keyframes vgPoke { from { transform: translateX(-14px); } to { transform: translateX(4px); } }
@keyframes vgGlow { from { filter: drop-shadow(0 0 4px #ff7b00) drop-shadow(0 0 10px #d702a5); } to { filter: drop-shadow(0 0 10px #ff7b00) drop-shadow(0 0 26px #d702a5); } }
@keyframes vgChase { 0% { fill: #fffdf0; opacity: 1; } 33% { fill: #ff9a2e; opacity: .75; } 66% { fill: #e0369f; opacity: .6; } }
@keyframes vgBlink { 0%, 55% { fill: #fff; } 56%, 100% { fill: #ff4fc3; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .vegas, .vg-poke, .vegas svg, .vg-b, .vg-t, .bl-sk { animation: none !important; } }

/* ---- Dunkelmodus (bassliner.org hat keinen; hier nur sauber umgefärbt) ---- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #1b1f21; color: #eef0f1; }
html[data-theme="dark"] .bgpattern { background-color: #1b1f21; background-image: url(/brand/pattern-dark.png); background-size: 160px 160px; }
html[data-theme="dark"] .bl-hd-fade { background-image: linear-gradient(to bottom, rgb(27 31 33 / 0), #22272a 70%); }
html[data-theme="dark"] #main-navigation > ul { color: var(--Link-Secondary-50); }
@media (min-width: 64rem) { html[data-theme="dark"] #main-navigation > ul { color: #fff; } }
html[data-theme="dark"] .bg-grey-blue-50, html[data-theme="dark"] .from-grey-blue-50 { --tw-gradient-from: #22272a; background-color: #22272a; }
html[data-theme="dark"] .bl-search { background: linear-gradient(to bottom, #22272a 20%, transparent); }
html[data-theme="dark"] .structured-60 { background-color: #22272a; }
html[data-theme="dark"] .border-grey-blue-200 { border-color: #454e54; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bl-chip { background-color: #2e3438 !important; color: #f9fafa; }
/* bassliner.css setzt !bg-white in @layer utilities – wichtige Regeln in einer früheren Ebene schlagen das */
@layer base { html[data-theme="dark"] .\!bg-white, html[data-theme="dark"] .bg-white\! { background-color: #2e3438 !important; color: #f9fafa; } }
html[data-theme="dark"] .ring-grey-blue-200 { --tw-ring-color: #454e54; }
html[data-theme="dark"] .bl-chip { outline-color: #454e54; }
html[data-theme="dark"] .bg-grey-blue-100 { background-color: #2e3438; }
html[data-theme="dark"] .text-grey-blue-700, html[data-theme="dark"] .bl-cats a, html[data-theme="dark"] .bl-tools button { color: #c7cdd1; }
html[data-theme="dark"] .bl-cats a.on, html[data-theme="dark"] .bl-cats a:hover { color: #fff; }
html[data-theme="dark"] .bl-ans .prose, html[data-theme="dark"] .prose { color: #e6e9eb; --tw-prose-body: #e6e9eb; --tw-prose-bold: #fff; }
html[data-theme="dark"] .bl-qa .bg-grey-blue-50 { background-color: #454e54; }
html[data-theme="dark"] .bl-qa [class*="bg-grey-blue-950"] span { background-color: #f9fafa; }
html[data-theme="dark"] .bl-ft-top { background: linear-gradient(to bottom, #22272a, transparent); border-color: #22272a; }
html[data-theme="dark"] #site-footer img[src*="footer-arch"] { filter: invert(1) hue-rotate(180deg) brightness(.55); }
html[data-theme="dark"] .bg-gray-200, html[data-theme="dark"] .bl-theme { background-color: #2e3438; }
html[data-theme="dark"] [data-lang-switch] .bg-white { background-color: #5c6870 !important; color: #fff; }
html[data-theme="dark"] .bl-btn-ghost { background: #2e3438; box-shadow: inset 0 0 0 1px #454e54; }
html[data-theme="dark"] .divide-grey-blue-950 > * { border-color: #c7cdd1; }

/* Handy: „Beliebt“ als eine wischbare Zeile, damit der Kopf so hoch bleibt wie auf bassliner.org */
@media (max-width: 63.99rem) {
  .bl-popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -1.5rem; margin-right: -1.5rem; padding: 2px 1.5rem 4px; }
  .bl-popular::-webkit-scrollbar { display: none; }
  .bl-chip, .bl-popular .bl-pl { flex: none; }
}
html[data-theme="dark"] .bl-cats a { border-left-color: #454e54; }

/* ---- Suchbereich zweispaltig: links Suche, rechts Beispiel-Unterhaltung mit Dr. Uffi ---- */
.bl-search-main, .bl-hero-chat { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 64rem) { .bl-search-main { grid-column: 1 / span 7; } .bl-hero-chat { grid-column: 8 / span 5; } }
@media (min-width: 80rem) { .bl-search-main { grid-column: 3 / span 6; } .bl-hero-chat { grid-column: 9 / span 4; } }
.bl-chat-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.02; background: var(--schmuck-E5DFD0, #e5dfd0); overflow: hidden; cursor: pointer; text-align: left; isolation: isolate; }
.bl-chat-art::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .6) 0 9deg, transparent 9deg 18deg); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.bl-chat-art:hover::before { transform: rotate(18deg); }
.bl-chat-art:focus-visible { outline: 3px solid #d302a2; outline-offset: 2px; }
.bl-mini { width: 80%; max-width: 340px; background: #fff; color: #22272a; border-radius: 12px; box-shadow: 0 24px 48px rgb(34 39 42 / .18); overflow: hidden; font-size: 14px; line-height: 1.45; transition: transform .4s, box-shadow .4s; }
.bl-chat-art:hover .bl-mini { transform: translateY(-4px); box-shadow: 0 30px 60px rgb(34 39 42 / .24); }
.bl-mh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #22272a; color: #fff; border-bottom: 6px solid; border-image: linear-gradient(#ab2974 0 2px, #2e3438 2px 4px, #454e54 4px 6px) 1; }
.bl-mh img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--schmuck-E5DFD0, #e5dfd0); }
.bl-mh b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.bl-mh i { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; color: #c7cdd1; }
.bl-mh i em { width: 6px; height: 6px; border-radius: 50%; background: #2fbf4a; }
.bl-mb { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 18px; }
.bl-q { align-self: flex-end; background: #22272a; color: #fff; padding: 8px 12px; border-radius: 12px 12px 4px 12px; max-width: 85%; }
.bl-aw { position: relative; max-width: 92%; }
.bl-a { display: block; background: #f9fafa; border: 1px solid #dde1e3; padding: 9px 12px; border-radius: 12px 12px 12px 4px; }
.bl-a b { font-weight: 600; }
.bl-src { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bl-sl { font: 400 10.5px 'Fragment Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; color: #8f9ba3; }
.bl-sc { font-size: 12px; padding: 3px 9px; border: 1px solid #dde1e3; border-radius: 999px; color: #5c6870; }
.bl-typing { position: absolute; left: 0; top: 0; display: none; gap: 4px; padding: 12px 14px; background: #f9fafa; border: 1px solid #dde1e3; border-radius: 12px 12px 12px 4px; }
.bl-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8f9ba3; animation: blTyp 1.2s infinite ease-in-out; }
.bl-typing i:nth-child(2) { animation-delay: .15s; } .bl-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blTyp { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* Eintippen beim Laden (nur ohne prefers-reduced-motion; Klassen setzt help.js) */
.bl-mb.anim .bl-q, .bl-mb.anim .bl-a, .bl-mb.anim .bl-src { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.bl-mb.anim.s1 .bl-q { opacity: 1; transform: none; }
.bl-mb.anim.s2 .bl-typing { display: flex; }
.bl-mb.anim.s3 .bl-typing { display: none; }
.bl-mb.anim.s3 .bl-a, .bl-mb.anim.s3 .bl-src { opacity: 1; transform: none; }
.bl-mb.anim.s3 .bl-src { transition-delay: .2s; }
@media (max-width: 63.99rem) {
  .bl-hero-chat { margin-top: 24px; }
  .bl-chat-art { aspect-ratio: auto; padding: 28px 0; }
  .bl-chat-art::before { inset: -80%; }
  .bl-mini { width: calc(100% - 40px); }
}
html[data-theme="dark"] .bl-chat-art { background: #3b3833; }
html[data-theme="dark"] .bl-chat-art::before { background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .06) 0 9deg, transparent 9deg 18deg); }

/* ---- Willkommensschild unter Dr. Uffi (gleiche Zeichnung wie der Leuchtpfeil) ---- */
/* Schild ragt nur ein Stück über die Hero-Kante, damit Dr. Uffi frei bleibt (40/64 px = py-10/py-16 + 4 px Rand) */
.bl-sign-wrap { position: relative; z-index: 2; display: flex; justify-content: center; margin: -54px 16px 32px; pointer-events: none; }
@media (min-width: 64rem) { .bl-sign-wrap { margin-top: -84px; margin-bottom: 44px; } }
.bl-sign { pointer-events: auto; display: block; width: min(560px, 100%); cursor: pointer; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.bl-sign:hover { transform: scale(1.02); }
.bl-sign svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 6px #ff7b00) drop-shadow(0 0 16px #d702a5); animation: vgGlow 1.1s ease-in-out infinite alternate; }
.bl-sign .vg-t1 { font-size: 40px; letter-spacing: .02em; }
.bl-sign .vg-t2 { font: 600 22px Soehne, system-ui, sans-serif; fill: #ffdebf; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .bl-sign svg, .bl-sign .vg-b, .bl-sign .vg-t, .bl-typing i { animation: none !important; } .bl-sign svg { filter: drop-shadow(0 0 8px #ff7b00) drop-shadow(0 0 18px #d702a5); } }