/**
 * @file        section/archive/archive-viewer.css
 * @location    /section/archive/archive-viewer.css
 * @description PDF-Viewer CSS für Archiv-Sektion.
 *              1:1 basiert auf ambl-pdf-viewer.css v1.2.0.
 *              Selektoren: .pdf-* → .arv__viewer-*
 *              max border-radius: 6px
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-18  Erstversion. Selektoren-Prefix geändert.
 */
/* ══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — WCAG-konforme Palette
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-modal {
    --pdf-bg             : #0d1117;
    --pdf-surface        : #161b22;
    --pdf-surface-2      : #21262d;
    --pdf-surface-3      : #2d333b;
    --pdf-border         : #6e7a84;   /* 4.31:1/bg  3.46:1/surface-2 >= 3:1 UI ✓ */
    --pdf-primary        : #5B9EFF;   /* 5.64:1/surface-2  6.41:1/surface      ✓ */
    --pdf-primary-hover  : #1d4ed8;   /* Hover-BG; white 6.70:1                ✓ */
    --pdf-text           : #e6edf3;   /* 16.02:1/bg  12.88:1/surface-2         ✓ */
    --pdf-text-muted     : #9ca3af;   /* 7.45:1/bg   6.81:1/surface            ✓ */
    --pdf-text-on-primary: #ffffff;   /* 6.70:1/primary-hover                  ✓ */
    --pdf-focus          : #5B9EFF;
    --pdf-focus-width    : 3px;
    --pdf-focus-offset   : 2px;
    --pdf-sidebar-w      : 280px;
    --pdf-header-h       : 60px;
    --pdf-footer-h       : 70px;
    --pdf-radius         : 6px;
    --pdf-shadow         : 0 8px 32px rgba(0, 0, 0, 0.7);
    --pdf-transition     : 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-modal {
    display          : none;
    position         : fixed;
    inset            : 0;
    z-index          : 9999;
    background       : var(--pdf-bg);
    color            : var(--pdf-text);
    font-family      : system-ui, -apple-system, sans-serif;
}
.arv__viewer-modal.show {
    display          : flex;
    flex-direction   : column;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLOSE BUTTON (Desktop) — w Toolbar, nicht mehr position:fixed
══════════════════════════════════════════════════════════════════════════ */
/* Alte .arv__viewer-btn--close entfernt — ersetzt durch .arv__viewer-btn--close im Toolbar */

.arv__viewer-ctrl-group--close {
    margin-left      : auto;   /* schiebt X ans rechte Ende */
    border-right     : none;
    padding-right    : 0;
    margin-right     : 0;
}

.arv__viewer-btn--close {
    /* Erbt pdf-control-btn — optisch identisch */
    color            : var(--pdf-text);
}
.arv__viewer-btn--close:hover {
    background       : #b91c1c;   /* Rot-Hover: white 5.96:1 ✓ */
    border-color     : #b91c1c;
    color            : #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-mobile-header {
    display          : none;
    align-items      : center;
    justify-content  : space-between;
    padding          : 0 16px;
    height           : var(--pdf-header-h);
    background       : var(--pdf-surface);
    border-bottom    : 2px solid var(--pdf-border);
    flex-shrink      : 0;
}
.arv__viewer-mobile-title {
    font-size        : 0.95rem;
    font-weight      : 600;
    color            : var(--pdf-text);
    overflow         : hidden;
    text-overflow    : ellipsis;
    white-space      : nowrap;
    max-width        : calc(100% - 56px);
    margin           : 0;
}
.arv__viewer-mobile-close {
    background       : transparent;
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    width            : 40px;
    height           : 40px;
    border-radius    : var(--pdf-radius);
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 1.1rem;
    flex-shrink      : 0;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition),
                       color var(--pdf-transition);
}
.arv__viewer-mobile-close:hover {
    background       : var(--pdf-primary-hover);
    border-color     : var(--pdf-primary-hover);
    color            : var(--pdf-text-on-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-modal.show:not(.mobile-mode) { flex-direction: row; }
.arv__viewer-modal.show.mobile-mode       { flex-direction: column; }

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-sidebar {
    width            : var(--pdf-sidebar-w);
    background       : var(--pdf-surface);
    border-right     : 2px solid var(--pdf-border);
    display          : flex;
    flex-direction   : column;
    overflow-y       : auto;
    flex-shrink      : 0;
    transition       : transform var(--pdf-transition);
    z-index          : 1;
}
.arv__viewer-sb-section {
    padding          : 20px;
    border-bottom    : 1px solid var(--pdf-border);
}
.arv__viewer-sb-section:last-child {
    border-bottom    : none;
    flex             : 1;
    overflow-y       : auto;
}
.arv__viewer-sb-title {
    font-size        : 0.75rem;
    font-weight      : 700;
    color            : var(--pdf-primary);   /* 6.41:1/surface ✓ */
    text-transform   : uppercase;
    letter-spacing   : 0.06em;
    margin-bottom    : 14px;
    display          : flex;
    align-items      : center;
    gap              : 8px;
}
.arv__viewer-info-grid {
    display                : grid;
    grid-template-columns  : auto 1fr;
    gap                    : 6px 12px;
    font-size              : 0.85rem;
    align-items            : start;
}
.arv__viewer-info-lbl { color: var(--pdf-text-muted); white-space: nowrap; }
.arv__viewer-info-val { color: var(--pdf-text); word-break: break-all; }

/* Miniaturen */
.arv__viewer-thumbs {
    display          : flex;
    flex-direction   : column;
    gap              : 8px;
}
.arv__viewer-thumb {
    position         : relative;
    cursor           : pointer;
    border           : 2px solid var(--pdf-border);
    border-radius    : var(--pdf-radius);
    overflow         : hidden;
    transition       : border-color var(--pdf-transition),
                       box-shadow var(--pdf-transition);
}
.arv__viewer-thumb:hover  { border-color: var(--pdf-primary); box-shadow: 0 0 0 2px var(--pdf-primary); }
.arv__viewer-thumb.active { border-color: var(--pdf-primary); box-shadow: 0 0 0 3px var(--pdf-primary); }
.arv__viewer-thumb canvas { display: block; width: 100%; }
.arv__viewer-thumb-number {
    position         : absolute;
    bottom           : 4px;
    right            : 4px;
    background       : rgba(13, 17, 23, 0.85);
    color            : var(--pdf-text);
    font-size        : 1rem;
    padding          : 2px 6px;
    border-radius    : 3px;
    font-weight      : 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   HAUPTBEREICH
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-main {
    flex             : 1;
    display          : flex;
    flex-direction   : column;
    overflow         : hidden;
    min-width        : 0;
}

.arv__viewer-header {
    display          : flex;
    align-items      : center;
    gap              : 12px;
    padding          : 0 16px;
    height           : var(--pdf-header-h);
    background       : var(--pdf-surface);
    border-bottom    : 2px solid var(--pdf-border);
    flex-shrink      : 0;
}
.arv__viewer-title {
    flex             : 1;
    font-size        : 0.95rem;
    font-weight      : 600;
    color            : var(--pdf-text);
    overflow         : hidden;
    text-overflow    : ellipsis;
    white-space      : nowrap;
    margin           : 0;
}
.arv__viewer-controls {
    display          : flex;
    align-items      : center;
    gap              : 6px;
    flex-shrink      : 0;
}
.arv__viewer-ctrl-group {
    display          : flex;
    align-items      : center;
    gap              : 4px;
    padding-right    : 10px;
    margin-right     : 4px;
    border-right     : 1px solid var(--pdf-border);
}
.arv__viewer-ctrl-group:last-child {
    border-right     : none;
    padding-right    : 0;
    margin-right     : 0;
}

/* Seitenzahl-Trenner "/ N" */
.arv__viewer-page-sep {
    color            : var(--pdf-text-muted);
    font-size        : 0.88rem;
    white-space      : nowrap;
    user-select      : none;
}

/* Buttons — WCAG 2.5.8 min 24×24 */
.arv__viewer-btn {
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    width            : 36px;
    height           : 36px;
    min-width        : 36px;
    border-radius    : var(--pdf-radius);
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 0.95rem;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition),
                       color var(--pdf-transition);
    padding          : 0;
    line-height      : 1;
}
.arv__viewer-btn:hover:not(:disabled) {
    background       : var(--pdf-primary-hover);
    border-color     : var(--pdf-primary-hover);
    color            : var(--pdf-text-on-primary);
}
.arv__viewer-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.arv__viewer-page-input {
    width            : 54px;
    height           : 36px;
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    border-radius    : var(--pdf-radius);
    text-align       : center;
    font-size        : 0.88rem;
    padding          : 0 4px;
    transition       : border-color var(--pdf-transition);
}
.arv__viewer-zoom-sel {
    height           : 36px;
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    border-radius    : var(--pdf-radius);
    font-size        : 0.85rem;
    padding          : 0 8px;
    cursor           : pointer;
    transition       : border-color var(--pdf-transition);
}

/* ── Canvas-Bereich ──────────────────────────────────────────────────── */
.arv__viewer-content {
    flex             : 1;
    overflow         : auto;
    position         : relative;
    background       : #12131a;
}
.arv__viewer-container {
    min-height       : 100%;
    padding          : 24px;
    box-sizing       : border-box;
    display          : flex;
    flex-direction   : column;
    align-items      : center;
}

.arv__viewer-loading {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    gap              : 16px;
    color            : var(--pdf-text-muted);
    font-size        : 0.95rem;
    min-height       : 200px;
    width            : 100%;
}
.arv__viewer-loading-spinner {
    width            : 40px;
    height           : 40px;
    border           : 3px solid var(--pdf-surface-3);
    border-top       : 3px solid var(--pdf-primary);
    border-radius    : 50%;
    animation        : pdfSpin 0.8s linear infinite;
}
@keyframes pdfSpin { to { transform: rotate(360deg); } }

.arv__viewer-canvas        { display: block; max-width: 100%; }
.arv__viewer-page-container {
    background       : white;
    box-shadow       : var(--pdf-shadow);
    display          : inline-block;
    max-width        : 100%;
}
.arv__viewer-mobile-page.single          { width: 100%; max-width: 100%; }
.arv__viewer-mobile-page.single .arv__viewer-canvas { width: 100%; height: auto; }
.arv__viewer-mobile-page.double          { flex: 1; max-width: 50%; }
.arv__viewer-mobile-page.double .arv__viewer-canvas { width: 100%; height: auto; }
.arv__viewer-two-page-container {
    display          : flex;
    gap              : 16px;
    align-items      : flex-start;
    justify-content  : center;
    width            : 100%;
}

.flip-animation { animation: pdfFlip 0.2s ease; }
@keyframes pdfFlip {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL-ZOOM INDICATOR
   Zeigt aktuellen Zoom beim Ctrl+Scroll an.
   text #e6edf3 auf rgba(13,17,23,0.92) ≈ 15.8:1 ✓
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-zoom-indicator {
    position         : fixed;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    background       : rgba(13, 17, 23, 0.92);
    color            : var(--pdf-text);
    border           : 2px solid var(--pdf-border);
    border-radius    : 6px;
    padding          : 12px 28px;
    font-size        : 1.15rem;
    font-weight      : 700;
    letter-spacing   : 0.01em;
    pointer-events   : none;
    z-index          : 10005;
    display          : flex;
    align-items      : center;
    gap              : 10px;
    backdrop-filter  : blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation        : pdfZoomIn 0.15s ease;
    white-space      : nowrap;
    user-select      : none;
}
.arv__viewer-zoom-indicator i {
    color            : var(--pdf-primary);
    font-size        : 1.25rem;
}
.arv__viewer-zoom-indicator__value {
    min-width        : 3.5ch;
    text-align       : center;
    font-variant-numeric: tabular-nums;
}
@keyframes pdfZoomIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Scroll-Hint — erscheint kurz nach dem Öffnen */
.arv__viewer-scroll-hint {
    position         : absolute;
    bottom           : 16px;
    left             : 50%;
    transform        : translateX(-50%);
    background       : rgba(13, 17, 23, 0.88);
    color            : var(--pdf-text-muted);
    border           : 1px solid var(--pdf-border);
    border-radius    : 6px;
    padding          : 6px 16px;
    font-size        : 0.78rem;
    pointer-events   : none;
    white-space      : nowrap;
    animation        : pdfHintFade 4.5s ease forwards;
    z-index          : 10;
}
@keyframes pdfHintFade {
    0%   { opacity: 0;   transform: translateX(-50%) translateY(4px); }
    12%  { opacity: 1;   transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM-MENÜ
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-mobile-menu {
    display          : none;
    flex-shrink      : 0;
    background       : var(--pdf-surface);
    border-top       : 2px solid var(--pdf-border);
    padding          : 10px 12px;
    min-height       : var(--pdf-footer-h);
}
.arv__viewer-mobile-menu-inner {
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    gap              : 6px;
}
.arv__viewer-mobile-nav {
    display          : flex;
    align-items      : center;
    gap              : 6px;
}
.arv__viewer-mobile-counter {
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    padding          : 8px 12px;
    border-radius    : var(--pdf-radius);
    font-size        : 0.88rem;
    font-weight      : 600;
    cursor           : pointer;
    min-width        : 68px;
    text-align       : center;
    user-select      : none;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition);
}
.arv__viewer-mobile-counter:hover {
    border-color     : var(--pdf-primary);
    background       : var(--pdf-surface-3);
}
.arv__viewer-mobile-btn {
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    width            : 40px;
    height           : 40px;
    min-width        : 40px;
    border-radius    : var(--pdf-radius);
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 1rem;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition),
                       color var(--pdf-transition);
    padding          : 0;
}
.arv__viewer-mobile-btn:hover:not(:disabled) {
    background       : var(--pdf-primary-hover);
    border-color     : var(--pdf-primary-hover);
    color            : var(--pdf-text-on-primary);
}
.arv__viewer-mobile-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.arv__viewer-mobile-actions {
    display          : flex;
    align-items      : center;
    gap              : 5px;
}
.arv__viewer-mobile-zoom {
    height           : 38px;
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    border-radius    : var(--pdf-radius);
    font-size        : 0.82rem;
    padding          : 0 6px;
    cursor           : pointer;
    max-width        : 90px;
}

/* ══════════════════════════════════════════════════════════════════════════
   KONTEXT-MENÜ
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-ctx-menu {
    display          : none;
    position         : fixed;
    background       : var(--pdf-surface);
    border           : 2px solid var(--pdf-border);
    border-radius    : var(--pdf-radius);
    box-shadow       : var(--pdf-shadow);
    z-index          : 10002;
    min-width        : 190px;
    overflow         : hidden;
}
.arv__viewer-ctx-menu-item {
    display          : flex;
    align-items      : center;
    gap              : 10px;
    padding          : 12px 16px;
    color            : var(--pdf-text);
    font-size        : 0.9rem;
    cursor           : pointer;
    transition       : background var(--pdf-transition);
}
.arv__viewer-ctx-menu-item:hover { background: var(--pdf-surface-3); }
.arv__viewer-ctx-menu-item i     { color: var(--pdf-primary); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-modal.mobile-mode .arv__viewer-mobile-header      { display: flex; }
.arv__viewer-modal.mobile-mode .arv__viewer-sidebar     { display: none; }
.arv__viewer-modal.mobile-mode .arv__viewer-header      { display: none; }
.arv__viewer-modal.mobile-mode .arv__viewer-mobile-menu { display: block; }
.arv__viewer-modal.mobile-mode .arv__viewer-main        { flex-direction: column; flex: 1; }
.arv__viewer-modal.mobile-mode .arv__viewer-content     { flex: 1; }
.arv__viewer-modal.mobile-mode .arv__viewer-container   { padding: 8px; }

.arv__viewer-modal.show:not(.mobile-mode) .arv__viewer-mobile-header      { display: none; }
.arv__viewer-modal.show:not(.mobile-mode) .arv__viewer-mobile-menu { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE — WCAG 2.4.7 + 2.4.11
   3px outline, offset 2px, kolor 5.64:1 na surface-2
══════════════════════════════════════════════════════════════════════════ */
.arv__viewer-btn:focus-visible,
.arv__viewer-mobile-btn:focus-visible,
.arv__viewer-btn--close:focus-visible,
.arv__viewer-mobile-close:focus-visible,
.arv__viewer-mobile-counter:focus-visible,
.arv__viewer-ctx-menu-item:focus-visible,
.arv__viewer-thumb:focus-visible,
.arv__viewer-page-input:focus-visible,
.arv__viewer-zoom-sel:focus-visible,
.arv__viewer-mobile-zoom:focus-visible {
    outline         : var(--pdf-focus-width) solid var(--pdf-focus);
    outline-offset  : var(--pdf-focus-offset);
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — WCAG 2.3.3
══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .flip-animation,
    .arv__viewer-loading-spinner,
    .arv__viewer-zoom-indicator,
    .arv__viewer-scroll-hint {
        animation   : none !important;
        transition  : none !important;
    }
    .arv__viewer-zoom-indicator { opacity: 1; transform: translate(-50%, -50%); }
    .arv__viewer-scroll-hint    { opacity: 1; transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE — WCAG 1.4.11
══════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    .arv__viewer-btn,
    .arv__viewer-mobile-btn,
    .arv__viewer-btn--close,
    .arv__viewer-mobile-close  { forced-color-adjust: none; border: 2px solid ButtonBorder; }
    .arv__viewer-thumb.active      { outline: 3px solid Highlight; }
    .arv__viewer-zoom-indicator    { border: 2px solid ButtonBorder; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════════════════ */
@media print { .arv__viewer-modal { display: none !important; } }