/**
 * Osttirol Booking — Brochures-Modul (Prospektbestellung).
 *
 * Eigenständiges, zum Design-System (Events) konsistentes Stylesheet:
 *   - Primärfarbe Osttirol-Rot #B51621 (verifiziert aus osttirol.com-CI), eigenes
 *     `--brc-*`-Token-System — die DEFINITIONEN zeigen seit T7 per Re-Pointing auf
 *     die kanonischen Tokens aus `tokens.css` (global via <f:asset.css> VOR diesem
 *     Stylesheet geladen); die `--brc-*`-Consumer-Klassen bleiben.
 *   - Liste: Header, Such-/Filter-Toolbar, Off-canvas-Filter-Overlay (Kategorie,
 *     Sprache, Verfügbarkeit), Cover-Card-Grid mit Platzhalter-Fallback, Badges,
 *     Warenkorb-Leiste, Bestellformular-Modal.
 *   - Viewer: eigenes pdf.js-Flipbook (kein issuu/Fremd-Embed).
 *
 * Vollständig self-contained (kein `@import`): alle Tokens liegen unter `--brc-*`
 * — analog zu events.css. Das Flipbook-/Viewer-Modal nutzt dieselben Tokens
 * (dunkle, marken-neutrale Lese-Oberfläche).
 *
 * UI-Regeln (CLAUDE.md / ui-design-qa): min-height statt height bei dyn. Content,
 * overflow-y:auto bei scrollbarem Content, Modal Header/Footer flex-shrink:0 +
 * Body overflow-y:auto, alle Buttons mit explizitem type, Touch-Targets ≥44px,
 * Z-Index nur aus Token-System, :focus-visible, reduced-motion-safe.
 */

:root {
    /* T7: Re-Pointing auf kanonische tokens.css (global vor brochures.css geladen).
       Lokale --brc-* Namen bleiben, zeigen auf Single-Source-Tokens. */

    /* --- Brand: Osttirol-Rot (kanonisch) --- */
    --brc-red: var(--c-primary);
    --brc-red-hover: var(--c-primary-hover);
    --brc-red-soft: var(--c-primary-soft);
    --brc-red-ring: var(--c-primary-ring);

    /* --- Neutrals --- */
    --brc-text: var(--c-text);
    --brc-text-muted: var(--c-text-muted);
    --brc-text-subtle: var(--c-text-subtle);
    --brc-bg: var(--c-bg);
    --brc-bg-alt: var(--c-bg-alt);
    --brc-bg-sunken: var(--c-bg-sunken);
    --brc-border: var(--c-border);
    --brc-border-strong: var(--c-border-strong);

    /* --- Status --- */
    --brc-focus: var(--c-focus);
    --brc-success: var(--c-success);

    /* --- Typografie (Brand-Font Outfit aus tokens.css) --- */
    --brc-font: var(--font-body);

    --brc-fs-xs: 12px;
    --brc-fs-sm: 13px;
    --brc-fs-base: 15px;
    --brc-fs-md: 17px;
    --brc-fs-lg: 20px;
    --brc-fs-xl: 26px;
    --brc-fs-2xl: 34px;

    --brc-lh-tight: 1.2;
    --brc-lh-base: 1.55;

    /* --- Spacing (4px-Raster, kanonisch) --- */
    --brc-s1: var(--space-1);
    --brc-s2: var(--space-2);
    --brc-s3: var(--space-3);
    --brc-s4: var(--space-4);
    --brc-s5: var(--space-5);
    --brc-s6: var(--space-6);
    --brc-s8: var(--space-8);
    --brc-s10: var(--space-10);
    --brc-s12: var(--space-12);

    /* --- Radius (kanonisch) --- */
    --brc-radius-sm: var(--radius-sm);
    --brc-radius-md: var(--radius-md);
    --brc-radius-lg: var(--radius-lg);
    --brc-radius-pill: var(--radius-pill);

    /* --- Shadows (kanonisch) --- */
    --brc-shadow-sm: var(--shadow-sm);
    --brc-shadow-card: var(--shadow-card);
    --brc-shadow-hover: var(--shadow-hover);
    --brc-shadow-modal: var(--shadow-modal);

    /* --- Z-Index (kanonisch) --- */
    --brc-z-base: var(--z-base);
    --brc-z-dropdown: var(--z-dropdown);
    --brc-z-sticky: var(--z-sticky);
    --brc-z-overlay: var(--z-overlay);
    --brc-z-modal: var(--z-modal);

    /* --- Motion --- */
    --brc-ease: var(--ease-out);
    --brc-dur: 180ms;

    /* --- Layout --- */
    --brc-max-w: 1200px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --brc-dur: 0ms;
    }
}

/* =========================================================================
   Root-Container
   ========================================================================= */
.brc-list {
    box-sizing: border-box;
    max-width: var(--brc-max-w);
    margin: 0 auto;
    padding: var(--brc-s6) var(--brc-s4) var(--brc-s12);
    font-family: var(--brc-font);
    font-size: var(--brc-fs-base);
    line-height: var(--brc-lh-base);
    color: var(--brc-text);
}

.brc-list *,
.brc-list *::before,
.brc-list *::after {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

.brc-list :focus-visible {
    outline: 3px solid var(--brc-focus);
    outline-offset: 2px;
    border-radius: var(--brc-radius-sm);
}

.brc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* Host-Seiten-Leck (F1): osttirol.com erbt aus Bootstrap
       `legend { font-size: 1.5rem }`. Auf einem sr-only-Legend visuell
       wirkungslos, macht die Insel aber root-abhaengig -> geerbte px-Groesse. */
    font-size: inherit;
}

/* =========================================================================
   Kopfbereich
   ========================================================================= */
.brc-header {
    margin-bottom: var(--brc-s6);
}

.brc-header__title {
    margin: 0 0 var(--brc-s2);
    font-size: var(--brc-fs-2xl);
    line-height: var(--brc-lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brc-header__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: var(--brc-s3);
    background: var(--brc-red);
    border-radius: var(--brc-radius-pill);
}

.brc-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--brc-s3);
    margin: 0;
    color: var(--brc-text-muted);
    font-size: var(--brc-fs-sm);
}

.brc-count {
    font-weight: 600;
    color: var(--brc-text);
}

.brc-source {
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s1);
    padding: 2px var(--brc-s2);
    border: 1px solid var(--brc-border);
    border-radius: var(--brc-radius-pill);
    font-size: var(--brc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brc-text-subtle);
}

.brc-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s2);
    color: var(--brc-red);
    font-weight: 600;
}

/* =========================================================================
   Toolbar: Suche + Filter-Button + Sortierung
   ========================================================================= */
.brc-toolbar {
    display: grid;
    gap: var(--brc-s3);
    margin-bottom: var(--brc-s6);
}

@media (min-width: 720px) {
    .brc-toolbar {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

.brc-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brc-s2);
    align-items: center;
}

.brc-field--sort {
    flex: 1 1 auto;
    min-width: 160px;
}

.brc-filter-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s2);
    min-height: 44px;
    padding: var(--brc-s2) var(--brc-s5);
    font: inherit;
    font-size: var(--brc-fs-base);
    font-weight: 600;
    color: var(--brc-text);
    background: var(--brc-bg);
    border: 1px solid var(--brc-border-strong);
    border-radius: var(--brc-radius-pill);
    cursor: pointer;
    transition: border-color var(--brc-dur) var(--brc-ease),
        background var(--brc-dur) var(--brc-ease);
}

.brc-filter-trigger:hover {
    border-color: var(--brc-red);
}

.brc-filter-trigger--active {
    border-color: var(--brc-red);
    background: var(--brc-red-soft);
    color: var(--brc-red-hover);
}

.brc-filter-trigger__icon {
    font-size: 1.05em;
    line-height: 1;
}

.brc-filter-trigger__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: var(--brc-fs-xs);
    font-weight: 700;
    color: #fff;
    background: var(--brc-red);
    border-radius: var(--brc-radius-pill);
}

/* --- Form-Felder (Suche, Sort-Select, Bestellformular) --- */
.brc-field {
    display: flex;
    flex-direction: column;
    gap: var(--brc-s1);
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.brc-field__label {
    font-size: var(--brc-fs-sm);
    font-weight: 600;
    color: var(--brc-text);
    padding: 0;
}

.brc-input,
.brc-select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--brc-s3);
    font: inherit;
    font-size: var(--brc-fs-base);
    color: var(--brc-text);
    background: var(--brc-bg);
    border: 1px solid var(--brc-border-strong);
    border-radius: var(--brc-radius-sm);
    transition: border-color var(--brc-dur) var(--brc-ease),
        box-shadow var(--brc-dur) var(--brc-ease);
}

.brc-input:focus,
.brc-select:focus {
    border-color: var(--brc-red);
    box-shadow: 0 0 0 3px var(--brc-red-ring);
    outline: none;
}

.brc-input::placeholder {
    color: var(--brc-text-subtle);
}

/* Eigener Dropdown-Pfeil (kein doppelter Pfeil, kein Text-Overlap) */
.brc-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--brc-s8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235d5d5d' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--brc-s3) center;
    background-size: 16px;
}

.brc-search {
    position: relative;
}

.brc-search .brc-input {
    padding-left: var(--brc-s8);
}

.brc-search__icon {
    position: absolute;
    left: var(--brc-s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--brc-text-subtle);
    pointer-events: none;
}

/* =========================================================================
   Filter-Overlay (Off-canvas-Drawer)
   ========================================================================= */
/* Hintergrund-Scroll-Sperre liegt seit 2026-08-05 in
   `Resources/Public/JavaScript/scroll-lock.js` (OsttirolScrollLock). Die alte
   Regel `overflow: hidden` auf `html` ist hier absichtlich entfernt: auf der
   Wirtsseite ist `html` der Scroll-Container, `overflow: hidden` klemmt dessen
   `scrollTop` auf 0 und die Seite sprang beim Schliessen nach oben
   (Kundenbefund 2026-08-05). Das Modul haelt die Position stattdessen ueber
   `position: fixed` am Body und stellt sie beim Freigeben wieder her. */

.brc-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--brc-z-overlay);
    display: flex;
    justify-content: flex-end;
}

.brc-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.5);
    animation: brc-fade-in var(--brc-dur) var(--brc-ease);
}

.brc-overlay__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-width: 100%;
    height: 100%;
    background: var(--brc-bg);
    box-shadow: var(--brc-shadow-hover);
    animation: brc-slide-in var(--brc-dur) var(--brc-ease);
}

@keyframes brc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes brc-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .brc-overlay__backdrop,
    .brc-overlay__panel {
        animation: none;
    }
}

.brc-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brc-s3);
    padding: var(--brc-s4) var(--brc-s5);
    border-bottom: 1px solid var(--brc-border);
    flex-shrink: 0;
}

.brc-overlay__title {
    margin: 0;
    font-size: var(--brc-fs-lg);
    font-weight: 700;
    color: var(--brc-text);
}

.brc-overlay__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 25.6px;
    line-height: 1;
    color: var(--brc-text);
    background: none;
    border: 0;
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
}

.brc-overlay__close:hover {
    background: var(--brc-bg-sunken);
}

.brc-overlay__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--brc-s5);
    display: grid;
    gap: var(--brc-s5);
    /* Gruppen oben packen — sonst streckt das Grid (align-content:normal =
       stretch) die wenigen Zeilen über die volle Panel-Höhe → Riesen-Chips. */
    align-content: start;
}

.brc-overlay__foot {
    display: flex;
    gap: var(--brc-s3);
    padding: var(--brc-s4) var(--brc-s5);
    border-top: 1px solid var(--brc-border);
    background: var(--brc-bg);
    flex-shrink: 0;
}

.brc-overlay__foot .brc-button {
    flex: 1 1 auto;
}

.brc-overlay__foot .brc-button--ghost {
    flex: 0 0 auto;
}

/* --- Filter-Gruppen im Overlay --- */
.brc-fgroup {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--brc-s2);
}

.brc-fgroup__legend {
    padding: 0;
    font-size: var(--brc-fs-sm);
    font-weight: 700;
    color: var(--brc-text);
}

/* --- Aktive Selektionen als entfernbare Pills --- */
.brc-active-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brc-s2);
    padding-bottom: var(--brc-s3);
    border-bottom: 1px dashed var(--brc-border);
}

.brc-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s1);
    min-height: 32px;
    padding: var(--brc-s1) var(--brc-s3);
    font: inherit;
    font-size: var(--brc-fs-sm);
    font-weight: 600;
    color: #fff;
    background: var(--brc-red);
    border: 0;
    border-radius: var(--brc-radius-pill);
    cursor: pointer;
}

.brc-pill__x {
    font-size: 1.1em;
    line-height: 1;
}

.brc-pill--removable:hover {
    background: var(--brc-red-hover);
}

/* --- Chip-Gruppen (Kategorie / Sprache / Verfügbarkeit) --- */
.brc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brc-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s1);
    min-height: 36px;
    padding: var(--brc-s1) var(--brc-s3);
    font: inherit;
    font-size: var(--brc-fs-sm);
    color: var(--brc-text);
    background: var(--brc-bg);
    border: 1px solid var(--brc-border-strong);
    border-radius: var(--brc-radius-pill);
    cursor: pointer;
    text-transform: capitalize;
    transition: background var(--brc-dur) var(--brc-ease),
        border-color var(--brc-dur) var(--brc-ease),
        color var(--brc-dur) var(--brc-ease);
}

.brc-chip:hover {
    border-color: var(--brc-red);
}

.brc-chip--active {
    background: var(--brc-red);
    border-color: var(--brc-red);
    color: #fff;
    font-weight: 600;
}

.brc-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    font-size: var(--brc-fs-xs);
    color: var(--brc-text-subtle);
    background: var(--brc-bg-sunken);
    border-radius: var(--brc-radius-pill);
}

.brc-chip--active .brc-chip__count {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

/* =========================================================================
   Warenkorb-Leiste
   ========================================================================= */
.brc-basket-bar {
    position: sticky;
    top: var(--brc-s3);
    z-index: var(--brc-z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--brc-s3);
    margin-bottom: var(--brc-s5);
    padding: var(--brc-s3) var(--brc-s5);
    background: var(--brc-red-soft);
    border: 1px solid var(--brc-red-ring);
    border-radius: var(--brc-radius-md);
}

.brc-basket-bar__label {
    color: var(--brc-red-hover);
    font-size: var(--brc-fs-sm);
}

.brc-basket-bar__label strong {
    font-size: var(--brc-fs-md);
}

.brc-basket-bar__cta {
    flex: 0 0 auto;
}

/* =========================================================================
   Karten-Grid + Karte
   ========================================================================= */
.brc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--brc-s5);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 560px) {
    .brc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .brc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.brc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--brc-bg);
    border: 1px solid var(--brc-border);
    border-radius: var(--brc-radius-lg);
    overflow: hidden;
    box-shadow: var(--brc-shadow-card);
    transition: transform var(--brc-dur) var(--brc-ease),
        box-shadow var(--brc-dur) var(--brc-ease);
}

.brc-card:hover,
.brc-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--brc-shadow-hover);
}

.brc-card__media {
    position: relative;
    /* Prospekt-Cover sind hochformatig (DIN-nah) — Portrait-Verhältnis. */
    aspect-ratio: 3 / 4;
    background: var(--brc-bg-sunken);
    overflow: hidden;
}

.brc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--brc-dur) var(--brc-ease);
}

.brc-card:hover .brc-card__img {
    transform: scale(1.04);
}

.brc-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brc-text-subtle);
    font-size: var(--brc-fs-sm);
}

.brc-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--brc-s2);
    padding: var(--brc-s4);
    flex: 1;
}

.brc-card__title {
    margin: 0;
    font-size: var(--brc-fs-md);
    line-height: var(--brc-lh-tight);
    font-weight: 700;
    color: var(--brc-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brc-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brc-s1);
    margin: 0;
}

.brc-card__desc {
    margin: 0;
    font-size: var(--brc-fs-sm);
    color: var(--brc-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brc-tag {
    display: inline-block;
    padding: 2px var(--brc-s2);
    font-size: var(--brc-fs-xs);
    color: var(--brc-text-muted);
    background: var(--brc-bg-sunken);
    border-radius: var(--brc-radius-pill);
    text-transform: capitalize;
}

.brc-tag--category {
    color: var(--brc-red-hover);
    background: var(--brc-red-soft);
    font-weight: 600;
}

.brc-tag--lang {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Capability-Badges auf der Card --- */
.brc-badge {
    position: absolute;
    z-index: var(--brc-z-base);
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s1);
    padding: var(--brc-s1) var(--brc-s3);
    font-size: var(--brc-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    border-radius: var(--brc-radius-pill);
    box-shadow: var(--brc-shadow-sm);
}

.brc-badge--orderable {
    top: var(--brc-s3);
    left: var(--brc-s3);
    color: #fff;
    background: var(--brc-red);
}

.brc-badge--selected {
    top: var(--brc-s3);
    right: var(--brc-s3);
    color: #fff;
    background: var(--brc-success);
}

/* --- Card-Aktionen (Durchblättern / Download / Bestellen) --- */
.brc-card__action {
    flex: 1 1 auto;
    justify-content: center;
}

.brc-card__action--order.brc-card__action--in-basket {
    background: var(--brc-bg);
    color: var(--brc-red-hover);
    border: 1px solid var(--brc-red);
}

/* Hover explizit ueberschreiben: die generische Regel `.osttirol-button:hover`
   setzt background auf var(--brc-red-hover) — identisch zur Schriftfarbe des
   in-basket-Zustands (#951119) → "Entfernen" war Rot-auf-Rot unsichtbar.
   Stattdessen Ghost-Hover wie .osttirol-button--ghost:hover (rote Schrift
   auf weichem Rot-Tint). */
.brc-card__action--order.brc-card__action--in-basket:hover {
    color: var(--brc-red-hover);
    background: var(--brc-red-soft);
    border-color: var(--brc-red);
}

/* --- DW5-Warenkorb-Button + Statusmeldung (nur bei Bestand) --- */
.brc-card__cart {
    display: flex;
    flex-direction: column;
    gap: var(--brc-s1);
    margin-top: var(--brc-s2);
}

.brc-card__cart .brc-card__action--cart {
    width: 100%;
}

.brc-card__cart-msg {
    margin: 0;
    font-size: var(--brc-fs-sm);
}

.brc-card__cart-msg--success {
    color: var(--brc-success);
}

.brc-card__cart-msg--error {
    color: var(--brc-red);
}

.brc-card__cart-msg--loading {
    color: var(--brc-text-muted);
}

/* =========================================================================
   Buttons (geteilt: brc-button + osttirol-button)
   ========================================================================= */
.brc-button,
.osttirol-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--brc-s2);
    min-height: 44px;
    padding: var(--brc-s2) var(--brc-s6);
    font: inherit;
    font-size: var(--brc-fs-base);
    font-weight: 600;
    color: #fff;
    background: var(--brc-red);
    border: 1px solid var(--brc-red);
    border-radius: var(--brc-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--brc-dur) var(--brc-ease),
        border-color var(--brc-dur) var(--brc-ease),
        color var(--brc-dur) var(--brc-ease);
}

.brc-button:hover,
.osttirol-button:hover {
    background: var(--brc-red-hover);
    border-color: var(--brc-red-hover);
}

.brc-button:disabled,
.osttirol-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.brc-button--ghost,
.osttirol-button--ghost {
    color: var(--brc-red-hover);
    background: var(--brc-bg);
    border: 1px solid var(--brc-border-strong);
}

.brc-button--ghost:hover,
.osttirol-button--ghost:hover {
    color: var(--brc-red-hover);
    background: var(--brc-red-soft);
    border-color: var(--brc-red);
}

/* Action-Stack je Card: mobil gestapelt, ab 480px nebeneinander. */
.osttirol-brochure-actions {
    display: flex;
    flex-direction: column;
    gap: var(--brc-s2);
    margin-top: auto;
    padding-top: var(--brc-s3);
}

@media (min-width: 480px) {
    .osttirol-brochure-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.osttirol-brochure-actions .osttirol-button {
    flex: 1 1 auto;
}

.brc-loadmore {
    width: 100%;
}

/* =========================================================================
   Zustände: Lade / Leer / Ende / Fehler / Sentinel
   ========================================================================= */
.brc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--brc-s3);
    text-align: center;
    color: var(--brc-text-muted);
    padding: var(--brc-s8) var(--brc-s4);
}

.brc-empty {
    margin: var(--brc-s8) auto;
    max-width: 480px;
    text-align: center;
    color: var(--brc-text-muted);
}

.brc-empty__title {
    margin: 0 0 var(--brc-s2);
    font-size: var(--brc-fs-lg);
    font-weight: 700;
    color: var(--brc-text);
}

.brc-error {
    margin: var(--brc-s4) 0;
    padding: var(--brc-s3) var(--brc-s4);
    color: #7a1119;
    background: var(--brc-red-soft);
    border: 1px solid var(--brc-red);
    border-radius: var(--brc-radius-md);
    font-size: var(--brc-fs-sm);
}

.brc-end {
    color: var(--brc-text-subtle);
    font-size: var(--brc-fs-sm);
}

.brc-sentinel {
    height: 1px;
    width: 100%;
}

.brc-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--brc-border-strong);
    border-top-color: var(--brc-red);
    border-radius: 50%;
    animation: brc-spin 0.7s linear infinite;
}

.brc-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

@keyframes brc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .brc-spinner {
        animation-duration: 1.4s;
    }
    .brc-card,
    .brc-card__img {
        transition: none;
    }
}

/* =========================================================================
   Bestellformular-Modal (zentriert; Header/Footer fix, Body scrollbar)
   ========================================================================= */
.brc-order-modal {
    position: fixed;
    inset: 0;
    z-index: var(--brc-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--brc-s4);
}

.brc-order-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 25, 0.55);
    cursor: pointer;
}

.brc-order-modal__dialog {
    position: relative;
    z-index: var(--brc-z-base);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    background: var(--brc-bg);
    border-radius: var(--brc-radius-lg);
    box-shadow: var(--brc-shadow-hover);
    overflow: hidden;
}

.brc-order-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brc-s3);
    padding: var(--brc-s4) var(--brc-s5);
    border-bottom: 1px solid var(--brc-border);
    flex-shrink: 0;
}

.brc-order-modal__title {
    margin: 0;
    font-size: var(--brc-fs-lg);
    font-weight: 700;
    color: var(--brc-text);
}

.brc-order-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 25.6px;
    line-height: 1;
    color: var(--brc-text);
    background: none;
    border: 0;
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
}

.brc-order-modal__close:hover {
    background: var(--brc-bg-sunken);
}

.brc-order-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--brc-s5);
}

/* --- Bestellformular --- */
.brc-order-form {
    display: grid;
    gap: var(--brc-s5);
}

.brc-order-form__group {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--brc-s3);
}

.brc-order-form__legend {
    padding: 0;
    font-size: var(--brc-fs-sm);
    font-weight: 700;
    color: var(--brc-text);
}

.brc-order-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--brc-s3);
}

.brc-field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--brc-s3);
}

@media (min-width: 480px) {
    .brc-field-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.brc-input--short {
    max-width: 96px;
}

.brc-field--error .brc-input {
    border-color: var(--brc-red);
}

.brc-field-error {
    margin: 0;
    color: var(--brc-red-hover);
    font-size: var(--brc-fs-xs);
    font-weight: 600;
}

.brc-required {
    color: var(--brc-red);
}

.brc-submit-error {
    margin: 0;
    padding: var(--brc-s3) var(--brc-s4);
    color: #7a1119;
    background: var(--brc-red-soft);
    border: 1px solid var(--brc-red);
    border-radius: var(--brc-radius-md);
    font-size: var(--brc-fs-sm);
}

/* --- Checkbox (DSGVO) --- */
/* Label als Block mit absolut gesetzter Checkbox: der Lauftext (inkl. inline
   <a>) fliesst natuerlich. Flex wuerde jeden Textabschnitt zum eigenen
   Flex-Item machen und unschoen umbrechen. */
.brc-check-label {
    display: block;
    position: relative;
    padding-left: 30px;
    font-size: var(--brc-fs-sm);
    color: var(--brc-text-muted);
    cursor: pointer;
}

.brc-check {
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    accent-color: var(--brc-red);
    cursor: pointer;
}

.brc-check-label a {
    color: var(--brc-red-hover);
}

/* --- Warenkorb-Zusammenfassung im Formular --- */
.brc-order-basket {
    display: grid;
    gap: var(--brc-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brc-order-basket__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brc-s2);
    padding: var(--brc-s2) var(--brc-s3);
    background: var(--brc-bg-alt);
    border-radius: var(--brc-radius-sm);
    font-size: var(--brc-fs-sm);
    word-break: break-word;
}

.brc-order-basket__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 19.2px;
    line-height: 1;
    color: var(--brc-text-muted);
    background: none;
    border: 0;
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
}

.brc-order-basket__remove:hover {
    color: var(--brc-red);
    background: var(--brc-red-soft);
}

/* Mengen-Feature: Titel darf schrumpfen, Stepper/Remove bleiben fix */
.brc-order-basket__title {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* Mengen-Stepper (− Wert +) je Prospekt, Touch-Targets 44px */
.brc-qty {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--brc-border);
    border-radius: var(--brc-radius-sm);
    background: var(--brc-bg);
}

.brc-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 0;
    border-radius: var(--brc-radius-sm);
    font-size: 17.6px;
    line-height: 1;
    color: var(--brc-text);
    cursor: pointer;
}

.brc-qty__btn:hover:not(:disabled) {
    color: var(--brc-red);
    background: var(--brc-red-soft);
}

.brc-qty__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.brc-qty__value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Gesamtmenge unter der Auswahl-Liste */
.brc-order-basket__total {
    margin: var(--brc-s2) 0 0;
    font-weight: 700;
    text-align: right;
    font-size: var(--brc-fs-sm);
}

/* --- Erfolgsmeldung --- */
.brc-order-success {
    display: grid;
    gap: var(--brc-s4);
    text-align: center;
    padding: var(--brc-s6) var(--brc-s4);
}

.brc-order-success__msg {
    margin: 0;
    font-size: var(--brc-fs-md);
    font-weight: 700;
    color: var(--brc-success);
}

.brc-order-success__id {
    margin: 0;
    font-size: var(--brc-fs-sm);
    color: var(--brc-text-muted);
}


/* =========================================================================
   Reader-Modal — erstklassiges Blätterbuch (dunkle Lese-Oberfläche).
   Buch-Modus (Page-Flip) + scharfe Lese-Ebene (Zoom/Pan/Highlight),
   Thumbnail-Index, Volltextsuche. Eigene dunkle Chrome-Farben (die hellen
   --brc-* passen hier nicht); Akzent bleibt Osttirol-Rot.
   ========================================================================= */
.brc-reader {
    --rd-stage: #15151a;
    --rd-chrome: #1f2026;
    --rd-chrome-2: #2a2b33;
    --rd-line: rgba(255, 255, 255, 0.10);
    --rd-text: #ececef;
    --rd-muted: rgba(236, 236, 239, 0.62);
}

/* Modal-Shell (fixed, zentriert) */
.osttirol-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: var(--brc-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--brc-s4);
}

.osttirol-viewer-modal.is-open {
    display: flex;
}

.osttirol-viewer-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: var(--brc-z-base);
    background: rgba(12, 12, 16, 0.82);
    cursor: pointer;
}

body.osttirol-modal-open {
    overflow: hidden;
}

.brc-reader__dialog {
    position: relative;
    z-index: var(--brc-z-base);
    display: flex;
    flex-direction: column;
    width: min(1400px, 96vw);
    height: min(94vh, 1000px);
    background: var(--rd-stage);
    color: var(--rd-text);
    border-radius: var(--brc-radius-lg);
    box-shadow: var(--brc-shadow-modal);
    overflow: hidden;
}

.brc-reader :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- Kopf-/Werkzeugleiste ---- */
.brc-reader__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brc-s4);
    padding: var(--brc-s3) var(--brc-s4);
    background: var(--rd-chrome);
    border-bottom: 1px solid var(--rd-line);
    flex-shrink: 0;
}

.brc-reader__title {
    margin: 0;
    font-size: var(--brc-fs-md);
    font-weight: 700;
    color: var(--rd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.brc-reader__tools {
    display: flex;
    align-items: center;
    gap: var(--brc-s1);
    flex-shrink: 0;
}

.brc-reader__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 19.2px;
    line-height: 1;
    color: var(--rd-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
    transition: background var(--brc-dur) var(--brc-ease), color var(--brc-dur) var(--brc-ease);
}

.brc-reader__tool:hover:not(:disabled) {
    background: var(--rd-chrome-2);
}

.brc-reader__tool.is-active {
    color: #fff;
    background: var(--brc-red);
}

.brc-reader__tool:disabled {
    opacity: 0.35;
    cursor: default;
}

.brc-reader__tool--close {
    font-size: 27.2px;
    margin-left: var(--brc-s2);
}

/* ---- Suchleiste ---- */
.brc-reader__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--brc-s2);
    padding: var(--brc-s2) var(--brc-s4);
    background: var(--rd-chrome);
    border-bottom: 1px solid var(--rd-line);
    flex-shrink: 0;
}

.brc-reader__search-icon {
    color: var(--rd-muted);
    font-size: 15.2px;
}

.brc-reader__search-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 var(--brc-s3);
    font: inherit;
    font-size: var(--brc-fs-base);
    color: var(--rd-text);
    background: var(--rd-stage);
    border: 1px solid var(--rd-line);
    border-radius: var(--brc-radius-sm);
}

.brc-reader__search-input:focus {
    outline: none;
    border-color: var(--brc-red);
    box-shadow: 0 0 0 3px var(--brc-red-ring);
}

.brc-reader__search-input::placeholder {
    color: var(--rd-muted);
}

.brc-reader__search-status {
    font-size: var(--brc-fs-sm);
    color: var(--rd-muted);
    white-space: nowrap;
    min-width: 64px;
    text-align: right;
}

.brc-reader__search-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 12.8px;
    color: var(--rd-text);
    background: transparent;
    border: 1px solid var(--rd-line);
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
}

.brc-reader__search-nav:hover:not(:disabled) {
    background: var(--rd-chrome-2);
}

.brc-reader__search-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---- Körper: Index + Bühne ---- */
.brc-reader__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.brc-reader__index {
    flex: 0 0 200px;
    width: 200px;
    overflow-y: auto;
    padding: var(--brc-s3);
    background: var(--rd-chrome);
    border-right: 1px solid var(--rd-line);
}

.brc-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--brc-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brc-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: var(--brc-s1);
    background: transparent;
    border: 0;
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
}

.brc-thumb__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--rd-stage);
    border: 2px solid transparent;
    border-radius: var(--brc-radius-sm);
    overflow: hidden;
}

.brc-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brc-thumb__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rd-line);
    border-top-color: var(--brc-red);
    border-radius: 50%;
    animation: brc-spin 0.7s linear infinite;
}

.brc-thumb__n {
    font-size: var(--brc-fs-xs);
    color: var(--rd-muted);
}

.brc-thumb:hover .brc-thumb__frame {
    border-color: var(--rd-muted);
}

.brc-thumb.is-active .brc-thumb__frame {
    border-color: var(--brc-red);
}

.brc-thumb.is-active .brc-thumb__n {
    color: var(--rd-text);
    font-weight: 700;
}

/* Treffer-Markierung (Suche) */
.brc-thumb.is-hit .brc-thumb__frame::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brc-red);
    box-shadow: 0 0 0 2px var(--rd-stage);
}

/* ---- Bühne ---- */
.brc-reader__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--rd-stage);
}

/* Buch-Modus */
.brc-flipbook-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--brc-s5) var(--brc-s6);
}

/* Wegwerf-Knoten, den StPageFlip bekommt (brochures.js legt ihn bei jedem
   Oeffnen neu an). Die Deckelung ist die zweite Sicherung gegen ein zu breites
   Buch: rechnet die Breitenermittlung daneben, schneidet spaetestens das
   Layout ab, statt dem Gast die Seite ueber den Rand zu schieben. */
.brc-flipbook-mount {
    max-width: 100%;
}

.brc-flipbook-canvas {
    display: block;
    max-width: 100%;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.6));
}

/* Lese-Ebene (Zoom/Pan) */
.brc-pageview {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--brc-s5);
}

.brc-pageview.is-grab {
    cursor: grab;
}

.brc-pageview.is-grabbing {
    cursor: grabbing;
}

.brc-pageview__viewport {
    position: relative;
    will-change: transform;
}

.brc-pageview__holder {
    display: block;
}

.brc-pageview__canvas {
    display: block;
    border-radius: 2px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    user-select: none;
    -webkit-user-drag: none;
}

.brc-pageview__hl {
    position: absolute;
    background: rgba(255, 214, 0, 0.42);
    mix-blend-mode: multiply;
    border-radius: 1px;
    pointer-events: none;
}

.brc-pageview__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid var(--rd-line);
    border-top-color: var(--brc-red);
    border-radius: 50%;
    animation: brc-spin 0.7s linear infinite;
}

/* ---- Lade-/Fehlerzustand ---- */
.brc-flipbook-progress {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--brc-s4);
    padding: var(--brc-s8);
    color: var(--rd-text);
}

.brc-flipbook-progress__track {
    width: 320px;
    max-width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--brc-radius-pill);
    overflow: hidden;
}

.brc-flipbook-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--brc-red);
    border-radius: var(--brc-radius-pill);
    transition: width var(--brc-dur) var(--brc-ease);
}

.brc-flipbook-progress__text {
    font-size: var(--brc-fs-sm);
    color: var(--rd-muted);
}

.brc-flipbook-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--brc-s8);
    color: #e8c4bb;
    font-size: var(--brc-fs-sm);
    text-align: center;
}

/* ---- Fußleiste: Navigation + Zoom/Modus ---- */
.brc-reader__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brc-s3);
    padding: var(--brc-s2) var(--brc-s4);
    background: var(--rd-chrome);
    border-top: 1px solid var(--rd-line);
    flex-shrink: 0;
}

.brc-reader__nav {
    display: flex;
    align-items: center;
    gap: var(--brc-s3);
}

.brc-flipbook-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 22.4px;
    line-height: 1;
    color: var(--rd-text);
    background: transparent;
    border: 1px solid var(--rd-line);
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
    transition: background var(--brc-dur) var(--brc-ease), border-color var(--brc-dur) var(--brc-ease);
}

.brc-flipbook-btn:hover:not(:disabled) {
    background: var(--rd-chrome-2);
    border-color: var(--rd-muted);
}

.brc-flipbook-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.brc-flipbook-pager {
    font-size: var(--brc-fs-sm);
    color: var(--rd-muted);
    min-width: 110px;
    text-align: center;
}

.brc-flipbook-pager strong {
    color: var(--rd-text);
}

.brc-reader__zoom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--brc-s2);
}

.brc-reader__zoomgroup {
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s2);
}

.brc-reader__zoombtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--brc-s3);
    font: inherit;
    font-size: var(--brc-fs-base);
    font-weight: 600;
    color: var(--rd-text);
    background: transparent;
    border: 1px solid var(--rd-line);
    border-radius: var(--brc-radius-sm);
    cursor: pointer;
    transition: background var(--brc-dur) var(--brc-ease), border-color var(--brc-dur) var(--brc-ease);
}

.brc-reader__zoombtn:hover:not(:disabled) {
    background: var(--rd-chrome-2);
    border-color: var(--rd-muted);
}

.brc-reader__zoombtn:disabled {
    opacity: 0.3;
    cursor: default;
}

.brc-reader__zoombtn--text {
    color: #fff;
    background: var(--brc-red);
    border-color: var(--brc-red);
}

.brc-reader__zoombtn--text:hover:not(:disabled) {
    background: var(--brc-red-hover);
    border-color: var(--brc-red-hover);
}

.brc-reader__zoomlabel {
    min-width: 52px;
    text-align: center;
    font-size: var(--brc-fs-sm);
    color: var(--rd-text);
}

/* Card-Button "Durchblättern" */
.brc-card__action--flipbook {
    display: inline-flex;
    align-items: center;
    gap: var(--brc-s2);
}

.brc-flipbook-icon {
    font-size: 1em;
    line-height: 1;
}

@keyframes brc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .brc-thumb__spinner,
    .brc-pageview__spinner {
        animation-duration: 1.4s;
    }
}

/* ---- Mobile: Index als Overlay, kompaktere Chrome ---- */
@media (max-width: 720px) {
    .osttirol-viewer-modal {
        padding: 0;
    }
    .brc-reader__dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    .brc-reader__index {
        position: absolute;
        inset: 0;
        z-index: var(--brc-z-dropdown, 100);
        flex-basis: auto;
        width: 100%;
        border-right: 0;
    }
    .brc-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    .brc-reader__title {
        font-size: var(--brc-fs-base);
    }
    .brc-flipbook-stage {
        padding: var(--brc-s3);
    }
    .brc-reader__zoombtn--text span[aria-hidden] {
        margin: 0;
    }

    /* Der Chat-Button der Wirtsseite klebt fest unten rechts (rund, ~56 px) und
       lag genau ueber der Zoom-Bedienung des Lesers (gemessen 2026-08-05 bei
       390x844: Zoom-Gruppe x 250-381, y 792-836; Kundenbefund "Chat-Bot verdeckt
       die Moeglichkeit die PDF zu vergroessern"). Auf schmalen Schirmen steht die
       Zoom-Zeile deshalb OBEN im Fussbereich und links ausgerichtet; die untere
       Zeile mit der Seitennavigation haelt rechts Platz frei. Der Chat-Button
       selbst bleibt unangetastet - er gehoert der Wirtsseite. */
    .brc-reader__foot {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--brc-s2);
    }

    .brc-reader__zoom {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-right: 72px;
    }

    .brc-reader__nav {
        justify-content: flex-start;
        padding-right: 72px;
    }
}