/* App – Hilfe-Knopf, Hilfe-Sheet, Tutorial (Präfix hl-) und kurze Inline-Hinweise (.ap-hint).
   Nur Tokens aus app.css (var(--ap-…)), damit Dunkel, Grube und Hell funktionieren. */

/* Kurzer Hinweis in einer Zeile */
.ap-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--ap-muted); }
.ap-hint::before { content: "i"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.4px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--ap-mono); color: var(--ap-gold-t); }
.ap-hint a { color: var(--ap-gold-t); }

/* Hilfe-Knopf: in der Kopfzeile (is-top) oder – ohne Kopfzeile – oben rechts */
.hl-btn { position: absolute; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 36px); right: 16px; width: 44px; height: 44px; flex: none; padding: 0; border: 0; background: transparent; color: var(--ap-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.hl-btn.is-top { position: relative; top: auto; right: auto; margin-right: -6px; }
.hl-btn__q { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ap-line); background: var(--ap-card); display: flex; align-items: center; justify-content: center; font-family: var(--ap-head); font-weight: 800; font-size: 15px; line-height: 1; color: var(--ap-soft); transition: border-color .15s, color .15s; }
.hl-btn:hover .hl-btn__q, .hl-btn:focus-visible .hl-btn__q { border-color: var(--ap-gold); color: var(--ap-gold-t); }
.hl-btn:focus-visible { outline: 2px solid var(--ap-gold); outline-offset: 0; }
/* Anmelden: rechts in der Zeile mit Zurück-Knopf Platz lassen */
.ap-s-login .alg__bar, .ap-s-warten .alg__form > div:first-child { padding-right: 52px; }

/* Bottom-Sheet */
.hl-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 520px; max-height: min(86dvh, 720px); padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); border: 1px solid var(--ap-line); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--ap-card); box-shadow: var(--ap-shadow-lg); color: var(--ap-text); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; font-family: 'Geist', system-ui, sans-serif; }
.hl-sheet:not([open]) { display: none; }
.hl-sheet[open] { display: flex; flex-direction: column; gap: 12px; animation: hlUp .22s ease-out; }
.hl-sheet::backdrop { background: rgba(0, 0, 0, .55); background: color-mix(in srgb, var(--ap-bg, #000) 72%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hl-sheet__grab { width: 40px; height: 5px; border-radius: 999px; background: var(--ap-line); margin: 0 auto 2px; flex: none; }
.hl-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hl-sheet__head .ap-h2 { margin-top: 4px; }
.hl-close { flex: none; }
.hl-sheet__body { display: flex; flex-direction: column; gap: 10px; }
.hl-part { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--ap-card2); border: 1px solid var(--ap-line); }
.hl-part__ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--ap-gold-t); background: color-mix(in srgb, var(--ap-gold) 16%, transparent); }
.hl-part.is-soon .hl-part__ic { color: var(--ap-muted); background: var(--ap-card); border: 1px dashed var(--ap-line); }
.hl-part__h { margin: 0 0 3px; font-family: var(--ap-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ap-muted); }
.hl-part p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ap-soft); }
.hl-sheet__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-sheet__foot > * { flex: 1 1 180px; min-height: 44px; }

/* Tutorial: Vollbild-Dialog mit Spotlight */
html.hl-touring { overflow: hidden; }
.hl-tour { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ap-text); overflow: hidden; font-family: 'Geist', system-ui, sans-serif; }
.hl-tour:not([open]) { display: none; }
.hl-tour::backdrop { background: transparent; }
.hl-tour__hole { position: fixed; pointer-events: none; border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .66); box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ap-bg, #000) 80%, transparent); outline: 2px solid var(--ap-gold); outline-offset: 0; transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease, border-radius .28s ease; }
.hl-tour.is-free .hl-tour__hole { outline-color: transparent; }
.hl-tour__card { position: fixed; left: 50%; transform: translateX(-50%); width: calc(min(100vw, 520px) - 32px); box-sizing: border-box; padding: 16px 16px 12px; border-radius: 22px; background: var(--ap-card); border: 1px solid var(--ap-gold); box-shadow: var(--ap-shadow-lg); display: flex; flex-direction: column; gap: 6px; transition: top .28s ease, bottom .28s ease; }
.hl-tour.is-free .hl-tour__card { top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%); text-align: center; align-items: center; padding-top: 22px; }
.hl-tour__art { display: none; color: var(--ap-gold-t); }
.hl-tour.is-free .hl-tour__art { display: flex; width: 92px; height: 92px; border-radius: 28px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ap-gold) 14%, var(--ap-card2)); border: 1px solid var(--ap-line); margin-bottom: 6px; }
.hl-tour__k { font-size: 10.5px; }
.ap .hl-tour__h:focus, .ap .hl-tour__h:focus-visible { outline: none; }
.hl-tour__p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ap-soft); }
.hl-tour__dots { display: flex; gap: 6px; margin: 6px 0 2px; }
.hl-tour__dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--ap-line); transition: width .2s, background .2s; }
.hl-tour__dots span.is-done { background: color-mix(in srgb, var(--ap-gold) 55%, var(--ap-line)); }
.hl-tour__dots span.is-on { width: 22px; background: var(--ap-gold); }
.hl-tour__btns { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.hl-tour__btns .ap-btn { flex: none; min-height: 44px; padding: 0 16px; }
.hl-tour__btns [data-hl-next] { min-width: 96px; }
.hl-tour__skip { margin-right: auto; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--ap-muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hl-tour__skip:hover { color: var(--ap-text); }
.hl-tour__btns [hidden] { display: none; }

@keyframes hlUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.hl-sheet[open] { animation: none; }
	.hl-tour__hole, .hl-tour__card, .hl-tour__dots span { transition: none; }
}