/* Amnesty Kunstauktion – static gallery (generated, Amnesty International style guide) */
:root { --ai-yellow: #FFD100; --ai-yellow-soft: #FFF2C4; --ai-black: #000; --ai-white: #fff; --ai-text: #1A1A1A; --ai-gray-700: #4A4A4A; --ai-muted: #6A6A6A; --ai-border: #D9D9D9; --ai-gray-200: #E5E5E5; --ai-gray-100: #F2F2F2; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--ai-gray-100); color: var(--ai-text); line-height: 1.5; }
a { color: var(--ai-black); }
img { max-width: 100%; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
.gallery-header { text-align: center; padding: 32px 16px 8px; border-bottom: 4px solid var(--ai-yellow); }
.gallery-logo-link { display: inline-block; }
.gallery-logo { max-width: 180px; height: auto; }
.gallery-header h1 { margin: 12px 0 0; font-size: 1.9rem; color: var(--ai-black); }
.gallery-header h2 { margin: 2px 0 0; font-size: 1.15rem; font-weight: 500; color: var(--ai-muted); }
.gallery-main { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }
/* Preview marker of a scope-'all' run (see galleryPreviewBannerHtml()): soft Amnesty
   yellow with a black rule — impossible to overlook, but plain text instead of a
   shouting alert. Kept in print ON PURPOSE: on paper it is still the warning that
   this tree contains deactivated submissions and is not for publishing. */
.scope-note { margin: 16px 0 0; padding: 10px 14px; background: var(--ai-yellow-soft); border-left: 3px solid var(--ai-black); color: var(--ai-black); font-weight: 700; }
.intro { margin: 20px 0; padding: 16px 20px; background: var(--ai-white); border: 1px solid var(--ai-border); border-radius: 0; }
.intro-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.intro.expanded .intro-text { display: block; -webkit-line-clamp: none; overflow: visible; }
#intro-toggle { margin-top: 12px; padding: 8px 18px; background: var(--ai-yellow); color: var(--ai-black); border: none; border-radius: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
#intro-toggle:hover { background: var(--ai-black); color: var(--ai-yellow); }
#intro-toggle:focus { outline: 2px solid var(--ai-black); outline-offset: 2px; }
.block-section { margin-top: 28px; scroll-margin-top: 16px; }
/* Block jump-nav above the first section: same uppercase/letter-spacing look
   as the section headings, yellow underline instead of the full rule. */
.block-nav { margin: 18px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.block-nav a { color: var(--ai-text); text-decoration: none; border-bottom: 2px solid var(--ai-yellow); }
.block-nav a:hover, .block-nav a:focus { color: var(--ai-black); background: var(--ai-yellow); border-bottom-color: var(--ai-black); }
.block-nav-sep { color: var(--ai-muted); margin: 0 6px; }
.block-section h2 { border-bottom: 3px solid var(--ai-yellow); padding-bottom: 6px; color: var(--ai-text); text-transform: uppercase; letter-spacing: 0.08em; }
/* Grid column minimum is 322px so a full 300x300 thumbnail fits (300 + 2x10px preview padding + 2x1px card border); min() guards narrow viewports */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(322px, 100%), 1fr)); gap: 20px; margin-top: 16px; }
.card { background: var(--ai-white); border: 1px solid var(--ai-border); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.gallery-preview-wrap { position: relative; }
.gallery-preview { display: block; background: var(--ai-white); padding: 10px; text-align: center; line-height: 0; }
/* Show thumbnails at their full generated size (max 300x300), never upscaled or distorted */
.gallery-preview img { max-height: 300px; width: auto; max-width: 100%; object-fit: contain; }
.gallery-preview:hover img { opacity: .85; }
/* Placeholder boxes use the same 300px as the maximum thumbnail height; an image card is ~20px taller because .gallery-preview adds 10px padding (border-box), and landscape thumbnails stay shorter than the boxes — the grid stretches the cards, so this only concerns the preview area */
.pdf-preview { display: flex; align-items: center; justify-content: center; height: 300px; line-height: 1.4; }
.pdf-badge { display: inline-block; background: var(--ai-black); color: var(--ai-yellow); padding: 8px 16px; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.card-placeholder { height: 300px; display: flex; align-items: center; justify-content: center; color: var(--ai-muted); background: var(--ai-gray-100); font-size: 14px; }
.card-label { padding: 12px 14px; border-top: 1px solid var(--ai-border); flex: 1; display: flex; flex-direction: column; gap: 4px; }
.label-title { margin: 0; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.label-title a { text-decoration: underline; }
.label-meta { margin: 0; color: var(--ai-muted); font-size: 13.5px; }
.label-prices { margin: 0; font-size: 13.5px; }
.card-badges { position: absolute; top: 3px; right: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.card-badge { font-size: 16px; line-height: 1.35; padding: 2px 6px; font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; background: rgba(255, 255, 255, .92); border: 1px solid var(--ai-border); border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; }
.card-badge:hover { background: var(--ai-yellow); }
.card-badge:focus-visible { outline: 2px solid var(--ai-black); outline-offset: 1px; }
/* Merkliste ❤️ toggle (reuses the .card-badge look). Placed in the
   top-left corner so it never collides with the .card-badges overlay;
   the full merkliste-page/print-sheet styling follows in later steps. */
.card-like { position: absolute; top: 3px; left: 6px; cursor: pointer; background: rgba(255, 255, 255, .92); }
.card-like:hover { background: var(--ai-yellow); }
/* Pressed look: yellow fill + inner black ring, unambiguous next to the
   plain badge styling; focus-visible matches the other interactive controls. */
.card-like.is-on { background: var(--ai-yellow); border-color: var(--ai-black); box-shadow: inset 0 0 0 1px var(--ai-black); }
.card-like.is-on:hover { background: var(--ai-yellow-soft); }
.card-like:focus-visible { outline: 2px solid var(--ai-black); outline-offset: 1px; }
/* Sticky Merkliste bar (created by gallery.js only when .card-like cards
   exist): Amnesty yellow on white/black, fixed above the footer. */
.merkliste-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 10px 16px; background: var(--ai-yellow); color: var(--ai-black); border-top: 3px solid var(--ai-black); box-shadow: 0 -2px 10px rgba(0, 0, 0, .25); font-size: 15px; }
.merkliste-bar.is-hidden { display: none; }
.merkliste-bar-count { font-weight: 700; }
.merkliste-bar-link { background: var(--ai-white); color: var(--ai-black); border: 1px solid var(--ai-black); padding: 6px 14px; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.merkliste-bar-link:hover { background: var(--ai-black); color: var(--ai-yellow); }
.merkliste-bar-link:focus-visible { outline: 2px solid var(--ai-black); outline-offset: 2px; }
/* Reserve room for the fixed bar so it never covers the last card row. */
body.has-merkliste-bar { padding-bottom: 76px; }
/* Merkliste page (merkliste.html, rows rendered by gallery.js into
   #merkliste-root): Amnesty card look — white rows with a thin border,
   fixed-width thumbnail on the left, label block on the right. */
.merkliste-wrap { max-width: 900px; margin: 0 auto; padding: 0 16px 60px; }
.merkliste-heading { margin: 24px 0 0; padding-bottom: 6px; color: var(--ai-black); border-bottom: 3px solid var(--ai-yellow); text-transform: uppercase; letter-spacing: 0.08em; }
.merkliste-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.merkliste-row { display: flex; align-items: flex-start; gap: 14px; background: var(--ai-white); border: 1px solid var(--ai-border); border-radius: 0; padding: 12px 14px; }
.merkliste-thumb { flex: none; width: 110px; text-align: center; text-decoration: none; color: inherit; }
.merkliste-thumb img { max-width: 100%; max-height: 110px; width: auto; object-fit: contain; }
.merkliste-pdf, .merkliste-noimg { display: flex; align-items: center; justify-content: center; height: 90px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; }
.merkliste-pdf { background: var(--ai-black); color: var(--ai-yellow); }
.merkliste-noimg { background: var(--ai-gray-100); color: var(--ai-muted); }
.merkliste-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.merkliste-wn { margin: 0; font-size: 13px; color: var(--ai-gray-700); }
.merkliste-missing { margin: 16px 0 0; color: var(--ai-muted); font-size: 14px; }
.merkliste-empty-heading { margin: 24px 0 8px; color: var(--ai-black); }
.merkliste-empty a { font-weight: 700; }
.merkliste-remove { flex: none; background: var(--ai-white); color: var(--ai-black); border: 1px solid var(--ai-black); padding: 6px 12px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.merkliste-remove:hover { background: var(--ai-black); color: var(--ai-yellow); }
.merkliste-remove:focus-visible { outline: 2px solid var(--ai-black); outline-offset: 2px; }
/* Merkliste toolbar (rendered by gallery.js above the list): Amnesty
   outline buttons matching .merkliste-remove plus a trailing "Zur Galerie"
   back link; the min-width keeps a button from jumping when the clipboard
   feedback swaps the label. display/text-decoration/font-family normalize
   anchor-vs-button rendering (font, text decoration). */
.merkliste-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.merkliste-action { flex: 0 1 auto; min-width: 150px; background: var(--ai-white); color: var(--ai-black); border: 1px solid var(--ai-black); padding: 7px 14px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; white-space: nowrap; cursor: pointer; display: inline-block; text-decoration: none; font-family: inherit; }
.merkliste-action:hover { background: var(--ai-black); color: var(--ai-yellow); }
.merkliste-action:focus-visible { outline: 2px solid var(--ai-black); outline-offset: 2px; }
.merkliste-action:disabled { opacity: .55; cursor: default; }
.merkliste-action:disabled:hover { background: var(--ai-white); color: var(--ai-black); }
.merkliste-note { margin: 16px 0 0; color: var(--ai-muted); font-size: 14px; font-style: italic; }
.merkliste-sharelink { margin: 16px 0 0; color: var(--ai-muted); font-size: 13px; word-break: break-all; overflow-wrap: anywhere; }
#lightbox { position: fixed; inset: 0; z-index: 100; display: flex; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; --lb-stage-w: min(90vw, max(120px, 1.5 * (100vh - 140px))); --lb-stage-h: min(calc(75vh + 16px), max(120px, calc(100vh - 140px))); --lb-label-h: 78px; }
#lightbox[hidden] { display: none; }
body.no-scroll { overflow: hidden; }
html.no-scroll { overflow: hidden; }
.lb-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); }
/* .lb-content carries only the fixed-position buttons; the translateY
   compensation of adjustLabelHeight() applies to .lb-stack so that no
   transform ever lands on an ancestor of the fixed buttons. */
.lb-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 92vw; margin: auto; }
.lb-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-stack > * { flex: none; }
/* Fixed image stage: the stage keeps a constant size so stepping
   through items with the arrows does not re-flow the centered content. */
#lb-imgwrap { display: flex; align-items: center; justify-content: center; position: relative; width: var(--lb-stage-w, min(90vw, max(120px, 1.5 * (100vh - 140px)))); height: var(--lb-stage-h, min(calc(75vh + 16px), max(120px, calc(100vh - 140px)))); }
#lb-imgwrap[hidden] { display: none; }
#lb-imgwrap img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .18s ease; }
/* Lightbox loading state. The stage has a FIXED size (--lb-stage-w/-h), so the
   overlay is absolutely positioned inside it and cannot shift the layout while
   a picture arrives. The entry transition-delay of #lb-loading means a picture
   that arrives within 120 ms never flashes the spinner; the removal direction
   has no delay so the overlay is gone as soon as the picture is painted. (The
   variant this page selected (800px or 1200px), when it is already fully
   loaded, never reaches this state at all — startImageLoad() paints it on its
   fast path.) A waiting stage takes the old
   image OUT instead of leaving it in place: artwork A's photo under artwork B's
   label text is misleading. */
#lb-imgwrap.is-loading { pointer-events: none; }
#lb-imgwrap.is-loading.has-error { pointer-events: auto; }
#lb-imgwrap.is-loading #lb-img { opacity: 0; }
#lb-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
#lb-imgwrap.is-loading #lb-loading { opacity: 1; transition-delay: .12s; }
#lb-ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; }
/* The overlay's own img is toggled with the hidden attribute. Author
   declarations beat the UA sheet anyway, so the rule that would win here is the
   author's own '#lb-imgwrap img { display: block; … }' above — hiding the ghost
   needs a declaration of its own. */
#lb-ghost[hidden] { display: none; }
.lb-loading-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--ai-yellow); border-radius: 50%; animation: none; }
#lb-imgwrap.is-loading .lb-spinner { animation: lb-spin .8s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-loadtext { color: #fff; font-size: 13px; background: rgba(0, 0, 0, .55); padding: 3px 10px; }
/* Screen-reader counterpart of the stage status text: the visible line sits in
   an aria-hidden overlay inside the image link, so the announcement needs its
   own live region. Absolutely positioned ⇒ it consumes no block space and
   cannot move the stage. */
.lb-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#lb-imgwrap.has-error .lb-spinner { display: none; }
/* Reduced motion: a static ring instead of the rotation; the German status
   text still tells the visitor what is happening. The rule repeats the WHOLE
   #lb-imgwrap.is-loading .lb-spinner selector: a bare class rule is
   out-specified by the id rule, and two identical selectors are decided by
   source order — this block is the later of the two. */
@media (prefers-reduced-motion: reduce) {
    #lb-imgwrap.is-loading .lb-spinner { animation: none; }
}
/* Lightbox badge row (rendered by gallery.js from the JSON 'badges' key):
   chips above the fixed-size stage, centered on the near-black backdrop. One
   chip box measures 26.25px (15px x 1.35 line-height + 4px padding + 2px
   border), so min-height is that box rounded up to 27px — an item without
   badges and an item with one row of chips occupy the same height, which is
   what keeps paging from shifting the stage vertically. min-height is a
   floor: chips that wrap to a second row do grow the row. */
.lb-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 27px; }
.lb-badge { font-size: 15px; line-height: 1.35; padding: 2px 8px; font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; background: rgba(255, 255, 255, .92); color: var(--ai-black); border: 1px solid var(--ai-border); border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; }
.lb-badge:hover { background: var(--ai-yellow); }
.lb-badge:focus-visible { outline: 2px solid var(--ai-white); outline-offset: 1px; }
#lb-pdf { background: var(--ai-yellow); color: var(--ai-black); padding: 10px 22px; border-radius: 0; text-decoration: none; font-weight: 700; min-height: var(--lb-stage-h, min(calc(75vh + 16px), max(120px, calc(100vh - 140px)))); display: flex; align-items: center; }
#lb-pdf[hidden] { display: none; }
#lb-nofile { color: #fff; font-size: 15px; min-height: var(--lb-stage-h, min(calc(75vh + 16px), max(120px, calc(100vh - 140px)))); display: flex; align-items: center; justify-content: center; }
#lb-nofile[hidden] { display: none; }
#lb-label { background: var(--ai-text); color: #fff; border-radius: 0; padding: 10px 18px; width: var(--lb-stage-w, min(90vw, max(120px, 1.5 * (100vh - 140px)))); min-height: var(--lb-label-h, 78px); overflow: auto; scrollbar-color: var(--ai-muted) var(--ai-text); scrollbar-gutter: stable; box-sizing: border-box; text-align: center; }
#lb-label .label-meta, #lb-label .label-prices { margin: 0; color: #B3B3B3; font-size: 13px; line-height: 17px; }
#lb-label .label-title { margin-bottom: 4px; font-size: 15px; line-height: 20px; }
#lb-label .label-title a { color: var(--ai-yellow); }
#lb-close { position: fixed; top: 10px; right: 14px; width: 44px; height: 44px; font-size: 28px; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; z-index: 2; }
#lb-close:hover { color: var(--ai-yellow); }
.lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 44px; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; z-index: 2; }
#lb-prev { left: 12px; }
#lb-next { right: 12px; }
.lb-arrow:hover { color: var(--ai-yellow); }
/* Lightbox ❤️ (created by gallery.js, fixed next to the close button):
   same size/background treatment as the other lightbox controls; the
   pressed state reuses the filled AI-yellow look of .card-like.is-on. */
.lightbox-like { position: fixed; top: 10px; right: 70px; width: 44px; height: 44px; font-size: 26px; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; z-index: 2; }
.lightbox-like:hover { color: var(--ai-yellow); }
.lightbox-like.is-on { background: var(--ai-yellow); color: var(--ai-black); box-shadow: inset 0 0 0 2px var(--ai-black); }
.lightbox-like:focus-visible { outline: 2px solid var(--ai-white); outline-offset: 2px; }
.lb-hint { color: #B3B3B3; font-size: 12px; margin: 0; }
.back-link { margin: 20px 0 0; }
.back-link a { text-decoration: none; }
.back-link a:hover { text-decoration: underline; }
.artist-name { margin: 24px 0 8px; color: var(--ai-black); }
.artist-text { margin: 16px 0; line-height: 1.6; }
.artist-work { margin-top: 28px; background: var(--ai-white); border: 1px solid var(--ai-border); border-radius: 0; padding: 16px 20px; }
.artist-work-artist { margin: 0 0 6px; color: var(--ai-muted); font-weight: 600; }
.artist-work-detail-heading { font-size: 1rem; margin: 12px 0 4px; }
.artist-work-detail { margin: 0 0 8px; line-height: 1.6; }
.artist-website { margin: 12px 0 0; }
.artist-work-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.artist-work-images a { display: block; text-align: center; }
.artist-work-images img { max-height: 600px; width: auto; max-width: 100%; object-fit: contain; border: 1px solid var(--ai-border); border-radius: 0; background: var(--ai-white); }
.pdf-open { display: inline-block; margin-top: 8px; font-weight: 600; }
.gallery-footer { background: var(--ai-black); color: #fff; padding: 24px 16px; text-align: center; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.gallery-footer a { color: #fff; text-decoration: none; }
.gallery-footer a:hover { text-decoration: underline; }
/* Artist pages: the margin-trick (margin: 12px -37px 0 on .artist-work-images) widens
   the image area by the 37px horizontal chrome on the left side (gallery-main padding
   16 + artist-work padding 20 + border 1) so it already spans the full viewport client
   width; wide images fill it via max-width: 100%. Narrower images are centered via text-align: center and are never upscaled
   or distorted (width/height auto). */
.artist-page .gallery-main { max-width: none; }
.artist-page .artist-work { margin-left: auto; margin-right: auto; }
.artist-page .artist-work > h2, .artist-page .artist-work-artist, .artist-page .artist-work .label-meta, .artist-page .artist-work-detail-heading, .artist-page .artist-work-detail, .artist-page .back-link, .artist-page .artist-name, .artist-page .artist-text, .artist-page .artist-website { max-width: 1200px; margin-left: auto; margin-right: auto; }
.artist-page .artist-work-images { display: block; margin: 12px -37px 0; }
.artist-page .artist-work-images a { display: block; text-align: center; margin-bottom: 14px; }
.artist-page .artist-work-images img { max-width: 100%; max-height: 100vh; width: auto; height: auto; }
@media (max-width: 640px) {
    .gallery-header h1 { font-size: 1.5rem; }
    #lb-prev { top: auto; bottom: 12px; left: 12px; transform: none; }
    #lb-next { top: auto; bottom: 12px; right: 12px; transform: none; }
    .gallery-footer { flex-direction: column; gap: 10px; }
    #lightbox { --lb-stage-w: calc(100vw - 24px); --lb-label-h: 78px; --lb-stage-h: min(calc(55vh - 16px), calc(100vh - 244px)); --lb-stage-h: min(calc(55svh - 16px), calc(100svh - 244px)); padding-bottom: 58px; }
    .lb-content { max-width: none; }
    .lb-hint { display: none; }
    /* Bar may wrap to two lines on narrow screens — reserve more room. */
    body.has-merkliste-bar { padding-bottom: 110px; }
    /* Merkliste rows stay thumbnail-left on mobile, just tighter. */
    .merkliste-row { gap: 10px; padding: 10px 12px; }
    .merkliste-thumb { width: 90px; }
    .merkliste-thumb img { max-height: 90px; }
}
/* Never print the INTERACTIVE controls (❤️ buttons, sticky bar, Merkliste
   toolbar/remove buttons). The .card-badge artist-page links stay printed —
   they carry the document/PDF/image hints and had no print rules before. */
@media print {
    .card-like, .lightbox-like, .merkliste-bar, .merkliste-actions, .merkliste-remove, .block-nav { display: none; }
    /* The bar is hidden in print — do not reserve its bottom padding. */
    body.has-merkliste-bar { padding-bottom: 0; }
}
/* Merkliste print sheet: compact black-on-white list. The bar, the like
   buttons and the toolbar/remove controls are already hidden by the rule
   above — only the footer needs dropping here; everything else loses
   its backgrounds/shadows and keeps rows intact across page breaks. */
@media print {
    body.merkliste { background: #fff; color: #000; }
    body.merkliste .gallery-footer { display: none; }
    body.merkliste .merkliste-sharelink { display: block; color: #000; }
    body.merkliste .gallery-header { padding: 8px 0 4px; border-bottom: 2px solid #000; }
    body.merkliste .gallery-logo, body.merkliste .gallery-logo-link, body.merkliste .gallery-header h2 { display: none; }
    body.merkliste .gallery-header h1 { margin: 0; font-size: 1.2rem; }
    body.merkliste .merkliste-heading { margin-top: 12px; font-size: 1.05rem; }
    body.merkliste .merkliste-row { background: #fff; border: 1px solid #000; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
    body.merkliste .merkliste-thumb { width: 90px; }
    body.merkliste .merkliste-thumb img { max-height: 90px; }
    body.merkliste .merkliste-pdf { background: #fff; color: #000; border: 1px solid #000; }
    body.merkliste .merkliste-noimg { background: #fff; color: #000; }
    body.merkliste a { color: #000; }
}