/* ============================================================
   openTMS — Zugang / Freischaltung (js/access.js)
   Alle Farben über Tokens mit Fallback, damit das Redesign nur die
   Tokens setzen muss.
   ============================================================ */
.access-strip {
    --_ink:    var(--otms-ink, #111a3a);
    --_sub:    var(--otms-ink-soft, #55607f);
    --_line:   var(--otms-line, #d9dfee);
    --_accent: var(--otms-accent, #1e3a9f);
    --_warn:   var(--otms-danger, #d42a3c);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 0 28px;
    padding: 10px 0;
    border-block: 1px solid var(--_line);
    color: var(--_sub);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
html.dark .access-strip { --_ink: var(--otms-ink, #e9ecf8); --_sub: var(--otms-ink-soft, #a7b0cf); --_line: var(--otms-line, #1f2a55); --_accent: var(--otms-accent, #8fa6ff); --_warn: var(--otms-danger, #ff7b88); }
.access-strip__fact { color: var(--_ink); font-weight: 600; }
.access-strip__fact--warn { color: var(--_warn); }
.access-strip__badge { border: 1px solid currentColor; border-radius: 999px; padding: 1px 10px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--_accent); }
.access-strip__action { margin-left: auto; background: none; border: 0; padding: 6px 0; min-height: 44px; color: var(--_accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.access-strip__action:focus-visible,
.access-share__btn:focus-visible,
.access-dialog__close:focus-visible,
.access-share__url:focus-visible { outline: 3px solid var(--otms-focus, #f0b400); outline-offset: 2px; }

html.access-dialog-open { overflow: hidden; }
.access-dialog {
    --_bg:     var(--otms-surface, #ffffff);
    --_ink:    var(--otms-ink, #111a3a);
    --_sub:    var(--otms-ink-soft, #55607f);
    --_line:   var(--otms-line, #d9dfee);
    --_accent: var(--otms-accent, #1e3a9f);
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center; padding: 16px;
    background: rgba(8, 12, 32, .55);
}
.access-dialog[hidden] { display: none; }
html.dark .access-dialog { --_bg: var(--otms-surface, #141c44); --_ink: var(--otms-ink, #e9ecf8); --_sub: var(--otms-ink-soft, #a7b0cf); --_line: var(--otms-line, #2a376b); --_accent: var(--otms-accent, #8fa6ff); }
.access-dialog__panel {
    position: relative; width: min(560px, 100%); max-height: min(88vh, 760px); overflow: auto;
    background: var(--_bg); color: var(--_ink); border: 1px solid var(--_line); border-radius: 4px;
    padding: 28px 28px 24px; outline: none;
}
.access-dialog__close { position: absolute; top: 14px; right: 16px; min-height: 44px; background: none; border: 0; color: var(--_sub); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.access-dialog__title { margin: 0 0 8px; padding-right: 90px; font-size: 1.5rem; line-height: 1.2; font-weight: 800; text-wrap: balance; }
.access-dialog__lead { margin: 0 0 8px; color: var(--_sub); max-width: 52ch; }
.access-path { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--_line); display: grid; gap: 10px; }
.access-path__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.access-path__text { margin: 0; color: var(--_sub); max-width: 56ch; }
.access-path__meta { margin: 0; font-size: .85rem; color: var(--_sub); font-variant-numeric: tabular-nums; }
.access-path--quiet .access-path__title { font-size: .95rem; }
.access-share { display: flex; flex-wrap: wrap; gap: 8px; }
.access-share__url { flex: 1 1 240px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--_line); border-radius: 3px; background: transparent; color: var(--_ink); font: inherit; font-size: .9rem; }
.access-share__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--_accent); border-radius: 3px; background: transparent; color: var(--_accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.access-share__btn:first-of-type { background: var(--_accent); color: var(--_bg); }
.access-meter { height: 8px; background: var(--_line); border-radius: 999px; overflow: hidden; }
.access-meter__fill { height: 100%; background: var(--_accent); transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .access-meter__fill { transition: none; } }
@media (max-width: 480px) { .access-dialog__panel { padding: 22px 18px 18px; } .access-strip__action { margin-left: 0; } }