/* Nonner-Weiss "Interaktiver Atlas" tour engine — visual layer for static/js/nw-tour.js.
   Loaded after nw-theme.css in every head fragment. Reuses the theme's tokens/buttons
   (.btn, .btn-primary, .btn-outline-secondary) — only tour-specific chrome lives here.
   Source of truth for radius/motion/focus: docs/nonnerweiss-ui-component-guidelines.md. */

/* Click-catcher: covers the whole viewport so a click on the dimmed backdrop (or on
   the highlighted target itself) never falls through to the page underneath while the
   tour is open (guideline: "clicking the backdrop does nothing"). Purely functional,
   no visible fill of its own — the dimming comes entirely from .nw-tour-spotlight. */
.nw-tour-catcher {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: transparent;
    cursor: default;
}

/* Spotlight: a box sized/positioned exactly over the current target's rect. Its own
   background stays transparent; the huge box-shadow around it is what dims the rest of
   the viewport, leaving a clean "cut-out" around the target without any SVG mask (masks
   are documented in the spec as breaking on scroll). */
.nw-tour-spotlight {
    position: fixed;
    z-index: 100001;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: transparent;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
    pointer-events: none;
    transition: top var(--nw-dur) var(--nw-ease), left var(--nw-dur) var(--nw-ease),
                width var(--nw-dur) var(--nw-ease), height var(--nw-dur) var(--nw-ease);
}

.nw-tour-tooltip {
    position: fixed;
    z-index: 100002;
    max-width: 360px;
    background: var(--nw-bg);
    border: 1px solid var(--nw-line);
    border-top: 4px solid var(--nw-ink);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 1rem 1.1rem;
    opacity: 1;
    transition: opacity var(--nw-dur) var(--nw-ease), top var(--nw-dur) var(--nw-ease),
                left var(--nw-dur) var(--nw-ease);
}

.nw-tour-counter {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--nw-text-muted);
    margin: 0 0 .35rem;
    font-variant-numeric: tabular-nums;
}

.nw-tour-title {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--nw-ink);
    margin: 0 0 .4rem;
}

.nw-tour-text {
    font-size: .875rem;
    color: var(--nw-text);
    margin: 0 0 .85rem;
    line-height: 1.5;
}

.nw-tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.nw-tour-endlink {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: .6rem;
    padding: .25rem 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--nw-line);
    padding-top: .5rem;
    font-size: .8125rem;
    color: var(--nw-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.nw-tour-endlink:hover { color: var(--nw-ink); }

.nw-tour-endlink:focus-visible,
.nw-tour-tooltip button:focus-visible {
    outline: 2px solid var(--nw-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--nw-yellow);
}

/* Welcome banner + navbar "Rundgang" items: visibility is toggled purely in JS
   (nw-tour.js sets [hidden]), this file only needs the base layout for the banner. */
[data-tour-banner] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    background: var(--nw-surface);
    border: 1px solid var(--nw-line);
    padding: .75rem 1rem;
    margin-top: 1rem;
}

[data-tour-banner][hidden] { display: none; }

[data-tour-banner] p { margin: 0; flex: 1 1 260px; font-size: .875rem; color: var(--nw-text); }

@media (prefers-reduced-motion: reduce) {
    .nw-tour-spotlight, .nw-tour-tooltip { transition: none !important; }
}