@import '_content/Fotobuch.Assistant/Fotobuch.Assistant.9vuhs4uhi0.bundle.scp.css';
@import '_content/Fotobuch.Editor/Fotobuch.Editor.94w20y6l43.bundle.scp.css';
@import '_content/Fotobuch.Ui/Fotobuch.Ui.xaety8dwpr.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The connection broke for good: Blazor sets display: block on this box (so its row inside does the layout). An error
   pill at the bottom centre like the error toast, with its icon, "Neu laden" and a round close button; above everything. */
#blazor-error-ui[b-vm5v0qdj96] {
    display: none; position: fixed; left: 50%; bottom: calc(var(--bottom-bar-h, 0px) + 24px); transform: translateX(-50%);
    z-index: calc(var(--z-confirm) + 1); width: max-content; max-width: calc(100vw - 24px);
}
.beu-row[b-vm5v0qdj96] {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 6px 6px 16px; border-radius: var(--r-pill);
    background: var(--error); color: var(--accent-ink); box-shadow: var(--sh-3); font-size: var(--fs-sm); font-weight: 600;
    animation: toast-in var(--t-3) var(--ease);
}
.beu-text[b-vm5v0qdj96] { flex: 1; min-width: 0; }
#blazor-error-ui .reload[b-vm5v0qdj96] {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
    background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; text-decoration: none; white-space: nowrap;
}
#blazor-error-ui .dismiss[b-vm5v0qdj96] {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-pill);
    background: transparent; color: inherit; cursor: pointer;
}
#blazor-error-ui .reload:hover[b-vm5v0qdj96], #blazor-error-ui .dismiss:hover[b-vm5v0qdj96] { background: color-mix(in srgb, currentColor 22%, transparent); }
@media (pointer: coarse) {
    #blazor-error-ui .reload[b-vm5v0qdj96], #blazor-error-ui .dismiss[b-vm5v0qdj96] { height: var(--tap); }
    #blazor-error-ui .dismiss[b-vm5v0qdj96] { width: var(--tap); }
}
@media (max-width: 760px) {
    #blazor-error-ui[b-vm5v0qdj96] { width: calc(100vw - 24px); }
    .beu-row[b-vm5v0qdj96] { border-radius: var(--r-md); }
}
@media (prefers-reduced-motion: reduce) {
    .beu-row[b-vm5v0qdj96] { animation: none; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Blazor's reconnect dialog as a kit dialog: surface, large radius, deep shadow, a ring in the accent, one primary
   button. Tokens only, so it follows light and dark. Which parts show is Blazor's (state classes on the dialog). */
.components-reconnect-first-attempt-visible[b-15nj40o7zv],
.components-reconnect-repeated-attempt-visible[b-15nj40o7zv],
.components-reconnect-failed-visible[b-15nj40o7zv],
.components-pause-visible[b-15nj40o7zv],
.components-resume-failed-visible[b-15nj40o7zv],
.components-rejoining-animation[b-15nj40o7zv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-retrying[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-failed[b-15nj40o7zv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-15nj40o7zv] {
    display: block;
}

#components-reconnect-modal[b-15nj40o7zv] {
    width: min(360px, calc(100vw - 32px)); margin: 20vh auto; padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--sh-3);
    opacity: 0;
    transition: display var(--t-3) allow-discrete, overlay var(--t-3) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-15nj40o7zv var(--t-3) both;
}
#components-reconnect-modal[open][b-15nj40o7zv] {
    animation: components-reconnect-modal-slideUp-b-15nj40o7zv var(--t-3) var(--ease) .3s, components-reconnect-modal-fadeInOpacity-b-15nj40o7zv var(--t-3) var(--ease) .3s;
    animation-fill-mode: both;
}
#components-reconnect-modal[b-15nj40o7zv]::backdrop {
    background: var(--scrim);
    animation: components-reconnect-modal-fadeInOpacity-b-15nj40o7zv var(--t-3) var(--ease);
    opacity: 1;
}

.components-reconnect-container[b-15nj40o7zv] { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
#components-reconnect-modal p[b-15nj40o7zv] { margin: 0; text-align: center; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }

/* the one primary button of this screen (Blazor shows one of the two at a time) */
#components-reconnect-modal button[b-15nj40o7zv] {
    min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
    background: var(--accent); color: var(--accent-ink); font: 600 var(--fs-md)/1 var(--font-ui); cursor: pointer;
    transition: background var(--t-1);
}
#components-reconnect-modal button:hover[b-15nj40o7zv] { background: var(--accent-hover); }
#components-reconnect-modal button:focus-visible[b-15nj40o7zv] { outline: none; box-shadow: var(--focus); }
@media (pointer: coarse) {
    #components-reconnect-modal button[b-15nj40o7zv] { min-height: var(--tap); }
}

/* two rings that spread from the middle, in the accent */
.components-rejoining-animation[b-15nj40o7zv] { position: relative; width: 64px; height: 64px; }
.components-rejoining-animation div[b-15nj40o7zv] {
    position: absolute; border: 3px solid var(--accent); opacity: 1; border-radius: 50%;
    animation: components-rejoining-animation-b-15nj40o7zv 1.5s cubic-bezier(0, .2, .8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-15nj40o7zv] { animation-delay: -.5s; }

@keyframes components-reconnect-modal-slideUp-b-15nj40o7zv {
    0% { transform: translateY(16px) scale(.98); }
    100% { transform: translateY(0); }
}
@keyframes components-reconnect-modal-fadeInOpacity-b-15nj40o7zv {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-15nj40o7zv {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes components-rejoining-animation-b-15nj40o7zv {
    0%, 4.9% { top: 32px; left: 32px; width: 0; height: 0; opacity: 0; }
    5% { top: 32px; left: 32px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 64px; height: 64px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-15nj40o7zv], #components-reconnect-modal[open][b-15nj40o7zv] { animation: none; opacity: 1; transition: none; }
    .components-rejoining-animation div[b-15nj40o7zv] { animation-duration: 3s; }
}
/* /Components/Pages/Anbieter.razor.rz.scp.css */
/* Drucken: the research one level deeper ("Recherche-Details"); the recommendations are PrintChooser */
/* the crumb row: the kit's page bar without the editor's inset, the way back on the right */
.anb-nav[b-rcx7i1cwt0] { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.anb-nav[b-rcx7i1cwt0]  .pagebar { padding: 0; }
.anb-nav[b-rcx7i1cwt0]  .crumb-host { min-width: 0; }
.anb-research-head[b-rcx7i1cwt0] { margin-bottom: var(--sp-2); }
.anb-empty-title[b-rcx7i1cwt0] { font-size: var(--fs-2xl); }
.anb-lead[b-rcx7i1cwt0] { max-width: 80ch; margin: calc(-1 * var(--sp-1)) 0 var(--sp-4); color: var(--ink-2); font-size: var(--fs-sm); }
.anb-empty code[b-rcx7i1cwt0] { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); word-break: break-all; }
.anb-empty[b-rcx7i1cwt0] { max-width: 720px; }
.anb-h2[b-rcx7i1cwt0] { margin-bottom: var(--sp-3); }
.anb-note-inline[b-rcx7i1cwt0] { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }

/* the research views as the kit's tabs (.tabs/.tab); a link marks the shown view with aria-current, not aria-selected.
   The underline is drawn inside the tab, so nothing reaches below the bar. */
.anb-tabs[b-rcx7i1cwt0] { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.anb-tabs a[b-rcx7i1cwt0] { flex: none; }
.anb-tabs a[aria-current="page"][b-rcx7i1cwt0] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.tab-count[b-rcx7i1cwt0] { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-xs); line-height: 20px; text-align: center; }

/* notes about the data: the kit's disclosure, tinted in amber */
.anb-notes[b-rcx7i1cwt0] { max-width: 960px; margin: 0 0 var(--sp-4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); }
.anb-notes[b-rcx7i1cwt0]  .disclosure { border-top: 0; }
.anb-notes[b-rcx7i1cwt0]  .disclosure > summary { color: var(--warn); }
.anb-notes[b-rcx7i1cwt0]  .disclosure > summary > .i { color: var(--warn); }
.anb-notes ul[b-rcx7i1cwt0] { margin: 0; padding-left: 20px; }
.anb-notes li + li[b-rcx7i1cwt0] { margin-top: var(--sp-1); }

/* ---- print formats: a table in the B look ---- */
.table-wrap[b-rcx7i1cwt0] { overflow-x: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.formats[b-rcx7i1cwt0] { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.formats th[b-rcx7i1cwt0], .formats td[b-rcx7i1cwt0] { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--ink-2); }
.formats thead th[b-rcx7i1cwt0] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.formats tbody tr:last-child th[b-rcx7i1cwt0], .formats tbody tr:last-child td[b-rcx7i1cwt0] { border-bottom: 0; }
.formats tbody th[b-rcx7i1cwt0] { color: var(--ink); font-weight: 600; }

/* ---- report (HTML from Markdown: the elements carry no scope attribute, hence ::deep) ---- */
.report[b-rcx7i1cwt0] { max-width: 1200px; overflow-wrap: anywhere; }
.report[b-rcx7i1cwt0]  h2 { font-size: var(--fs-xl); }
.report[b-rcx7i1cwt0]  h3 { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-lg); }
.report[b-rcx7i1cwt0]  h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); }
.report[b-rcx7i1cwt0]  table { display: block; margin: var(--sp-3) 0; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-sm); overflow-wrap: normal; }
.report[b-rcx7i1cwt0]  th, .report[b-rcx7i1cwt0]  td { padding: 6px 10px; border: 1px solid var(--line); vertical-align: top; }
.report[b-rcx7i1cwt0]  th { background: var(--surface-2); text-align: left; white-space: nowrap; }
.report[b-rcx7i1cwt0]  ul, .report[b-rcx7i1cwt0]  ol { padding-left: 20px; }
.report[b-rcx7i1cwt0]  li + li { margin-top: var(--sp-1); }
.report[b-rcx7i1cwt0]  code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); }
.report[b-rcx7i1cwt0]  blockquote { margin: var(--sp-3) 0; padding: 2px var(--sp-4); border-left: 3px solid var(--line); color: var(--ink-2); }

@media (max-width: 760px) {
    .anb-nav[b-rcx7i1cwt0] { margin-top: 0; }
}
@media (pointer: coarse) {
    .anb-tabs .tab[b-rcx7i1cwt0] { min-height: var(--tap); }
}
/* /Components/Pages/AnbieterShop.razor.rz.scp.css */
/* A shop of the research, one level below "Wo drucken wir …?" - in the Helles Studio look */
/* the crumb row: the kit's page bar without the editor's inset, the way back on the right */
.shop-nav[b-k3y4ajyokk] { margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); }
.shop-nav[b-k3y4ajyokk]  .pagebar { padding: 0; }
.shop-nav[b-k3y4ajyokk]  .crumb-host { min-width: 0; }
.shop-empty[b-k3y4ajyokk] { max-width: 720px; }

/* head: the shop's monogram beside its name, the facts as badges, the summary in a larger line */
.shop-head[b-k3y4ajyokk] { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: var(--sp-4); max-width: 960px; margin-bottom: var(--sp-5); }
.mono[b-k3y4ajyokk] {
    display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md);
    background: var(--mono, var(--surface-3)); color: var(--on-photo); font-size: var(--fs-lg); font-weight: 600; letter-spacing: .02em;
}
.shop-head-txt[b-k3y4ajyokk] { min-width: 0; }
.shop-head h1[b-k3y4ajyokk] { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.shop-meta[b-k3y4ajyokk] { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.shop-date[b-k3y4ajyokk] { color: var(--ink-3); font-size: var(--fs-sm); }
.shop-site[b-k3y4ajyokk] { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.shop-site a[b-k3y4ajyokk] { color: var(--ink-2); text-underline-offset: 3px; }
.shop-summary[b-k3y4ajyokk] { max-width: 68ch; margin: 0; color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.45; }

.shop-h2[b-k3y4ajyokk] { margin: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-xl); }
.shop-hint[b-k3y4ajyokk] { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-sm); }
.shop-places ul[b-k3y4ajyokk] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); max-width: 720px; }
.shop-places li[b-k3y4ajyokk] { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.shop-places li strong[b-k3y4ajyokk] { font-variant-numeric: tabular-nums; }
.shop-places a[b-k3y4ajyokk] { color: var(--ink); text-underline-offset: 3px; }

/* "Gut" and "Weniger gut" as two tinted fields, as in the details of the Drucken page */
.shop-procon[b-k3y4ajyokk] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); max-width: 960px; margin-top: var(--sp-5); }
.procon[b-k3y4ajyokk] { box-shadow: none; padding: var(--sp-4); }
.procon .shop-h2[b-k3y4ajyokk] { margin: 0 0 var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 600; }
.procon ul[b-k3y4ajyokk] { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.procon li + li[b-k3y4ajyokk] { margin-top: var(--sp-1); }
.pro[b-k3y4ajyokk] { background: var(--good-soft); }
.pro li[b-k3y4ajyokk]::marker { content: "+  "; color: var(--good); font-weight: 600; }
.con[b-k3y4ajyokk] { background: var(--warn-soft); }
.con li[b-k3y4ajyokk]::marker { content: "–  "; color: var(--warn); font-weight: 600; }

.shop-lines[b-k3y4ajyokk] { display: grid; gap: var(--sp-4); max-width: 960px; }

@media (max-width: 760px) {
    .shop-nav[b-k3y4ajyokk] { margin-top: 0; }
    .shop-head[b-k3y4ajyokk] { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3); }
    .mono[b-k3y4ajyokk] { width: 44px; height: 44px; font-size: var(--fs-md); }
    .shop-summary[b-k3y4ajyokk] { font-size: var(--fs-md); }
    .shop-h2[b-k3y4ajyokk] { margin-top: var(--sp-6); }
}
/* /Components/Pages/BuchUeberblick.razor.rz.scp.css */
/* The book overview in Helles Studio: crumb, the cover on a light stage with the top bar's actions, four step cards, the
   double pages as a film strip per chapter (wrapping), the photos of the book by day with square tiles. */
.bo[b-1w5tlmw713]  .bo-bar { padding: 0 0 var(--sp-3); }
.bo[b-1w5tlmw713]  .bo-crumb { flex: 0 1 460px; }

.bo-head[b-1w5tlmw713] { display: grid; grid-template-columns: minmax(260px, 440px) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
/* the light stage of the editor (b-studio .stage): the book lies on a soft spot of light */
.bo-stage[b-1w5tlmw713] {
    display: grid; place-items: center; padding: 36px 40px; border-radius: var(--r-lg);
    background: radial-gradient(ellipse at 50% 45%, var(--surface) 0%, transparent 70%), var(--bg);
    box-shadow: inset 0 0 0 1px var(--line);
}
.bo-cover[b-1w5tlmw713] { display: block; width: 100%; box-shadow: var(--sh-spread, var(--sh-3)); }
.bo-title h1[b-1w5tlmw713] { margin: 6px 0 4px; font-size: var(--fs-2xl); }
.bo-sub[b-1w5tlmw713] { margin: 0 0 4px; }
.bo-facts[b-1w5tlmw713] { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.bo-actions[b-1w5tlmw713] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-4); }
.bo-actions .btn-ghost[b-1w5tlmw713] { --h: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.bo-actions .btn-primary[b-1w5tlmw713] { margin-left: 6px; }
.bo-check[b-1w5tlmw713] { position: relative; }
.bo-badge[b-1w5tlmw713] {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--warn); color: var(--on-photo); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.bo-badge.is-bad[b-1w5tlmw713] { background: var(--error); }

.bo-steps[b-1w5tlmw713] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.bo-step[b-1w5tlmw713] { display: grid; gap: 4px; align-content: start; padding: var(--sp-4); color: var(--ink); text-decoration: none; }
.bo-stepbar[b-1w5tlmw713] { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); margin-bottom: var(--sp-2); }
/* the colours of the steps on Start (site-start.html): done green, the next one in ink, a proposal hatched */
.bo-step.done .bo-stepbar[b-1w5tlmw713] { background: var(--good); }
.bo-step.ki .bo-stepbar[b-1w5tlmw713] { background: repeating-linear-gradient(135deg, var(--good) 0 3px, var(--good-soft) 3px 6px); }
.bo-step.warn .bo-stepbar[b-1w5tlmw713] { background: var(--warn); }
.bo-step.now .bo-stepbar[b-1w5tlmw713] { background: var(--ink); }
.bo-step b[b-1w5tlmw713] { font-weight: 600; }
.bo-state[b-1w5tlmw713] { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.bo-step.warn .bo-state[b-1w5tlmw713] { color: var(--warn); }
.bo-step.now .bo-state[b-1w5tlmw713] { color: var(--ink); font-weight: 600; }
.bo-more[b-1w5tlmw713] { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---- the double pages: a film strip per chapter (kit-v4 .rail), wrapping instead of scrolling sideways ---- */
.film[b-1w5tlmw713] { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.film-group[b-1w5tlmw713] { display: grid; gap: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
.film-label[b-1w5tlmw713] { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.film-label b[b-1w5tlmw713] { color: var(--ink); font-weight: 600; white-space: nowrap; }
.film-label span:last-child[b-1w5tlmw713] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-mark.is-neutral[b-1w5tlmw713] { background: var(--surface-3); color: var(--ink); }
.film-items[b-1w5tlmw713] { display: flex; flex-wrap: wrap; gap: 8px; }
.sp[b-1w5tlmw713] { width: 116px; display: grid; gap: 4px; justify-items: center; color: var(--ink-3); text-decoration: none; }
.sp .mini[b-1w5tlmw713] {
    position: relative; display: block; width: 116px; aspect-ratio: 594 / 210; overflow: hidden; border-radius: 2px; background: var(--mat, var(--surface));
    box-shadow: var(--sh-1); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--t-1);
}
/* the fold in the middle of a double page */
.sp:not(.sp-cover) .mini[b-1w5tlmw713]::after {
    content: ""; position: absolute; inset: 0 auto 0 calc(50% - 6px); width: 12px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .12) 55%, transparent);
}
.sp-cover .mini[b-1w5tlmw713] { aspect-ratio: 630 / 210; }
.sp .mini img[b-1w5tlmw713] { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp:hover .mini[b-1w5tlmw713] { outline-color: var(--accent); }
.sp:hover[b-1w5tlmw713] { color: var(--accent-text); }
.sp small[b-1w5tlmw713] { font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- the photos of the book ---- */
.bo-explain[b-1w5tlmw713] { margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-sm); }
.tg[b-1w5tlmw713] { margin-bottom: var(--sp-5); }
.tg-head[b-1w5tlmw713] {
    position: sticky; top: var(--header-h); z-index: 5; display: flex; align-items: center; gap: 10px; min-width: 0;
    margin: 0 calc(-1 * var(--sp-2)) 6px; padding: 8px var(--sp-2); background: var(--bg);
}
.tg-head b[b-1w5tlmw713] { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.tg-title[b-1w5tlmw713] { flex: 1; min-width: 0; color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-title[b-1w5tlmw713]::before { content: "· "; }
.tg-more[b-1w5tlmw713] { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); }
.tg-grid[b-1w5tlmw713] { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
.tt[b-1w5tlmw713] { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.tt img[b-1w5tlmw713] { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-2) var(--ease); }
.tt:hover img[b-1w5tlmw713] { transform: scale(1.05); }
.tt .inbook-mark[b-1w5tlmw713] { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; }
.tt .inbook-mark.is-queued[b-1w5tlmw713] { background: var(--accent-hover); }
.tt .inbook-mark[b-1w5tlmw713]  .i { width: 11px; height: 11px; }
.tt-more[b-1w5tlmw713] { display: grid; place-content: center; text-align: center; color: var(--ink-2); text-decoration: none; background: var(--surface-2); }
.tt-more b[b-1w5tlmw713] { font-size: var(--fs-lg); color: var(--ink); }
.tt-more span[b-1w5tlmw713] { font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) {
    .tt:hover img[b-1w5tlmw713] { transform: none; }
}

@media (max-width: 1100px) {
    .bo-steps[b-1w5tlmw713] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bo-head[b-1w5tlmw713] { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .bo[b-1w5tlmw713]  .bo-crumb { flex: 1 1 auto; }
    .bo-head[b-1w5tlmw713] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    .bo-stage[b-1w5tlmw713] { padding: 24px; }
    .bo-actions .btn-primary[b-1w5tlmw713] { order: -1; flex: 1 1 100%; margin-left: 0; }
    .bo-steps[b-1w5tlmw713] { gap: var(--sp-2); }
    .film[b-1w5tlmw713] { padding: var(--sp-3); }
    .sp[b-1w5tlmw713], .sp .mini[b-1w5tlmw713] { width: 96px; }
    .tg-grid[b-1w5tlmw713] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
}
@media (pointer: coarse) {
    .bo-actions .btn-ghost[b-1w5tlmw713] { --h: var(--tap); }
}
/* /Components/Pages/Einstellungen.razor.rz.scp.css */
/* Einstellungen ("Helles Studio"): the side navigation in the inspector's look (like Hilfe), the sections as cards,
   Darstellung as a segmented choice with icons, Technik folded away (the kit's Disclosure), reading a trip again with
   its consequence in amber and the dangerous button with an icon. Tokens only. */
.set[b-c1ddo6q646] { max-width: 1088px; margin: 0 auto; }
.set-layout[b-c1ddo6q646] { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.set-nav[b-c1ddo6q646] {
    position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: grid; gap: 2px; padding: 8px;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.set-nav a[b-c1ddo6q646] {
    display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm);
    color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.set-nav a:hover[b-c1ddo6q646] { background: var(--surface-2); color: var(--ink); }
.set-nav a:focus-visible[b-c1ddo6q646] { background: var(--accent-soft); color: var(--accent-text); }
.set-nav[b-c1ddo6q646]  .i { width: 18px; height: 18px; color: var(--ink-3); }
.set-main[b-c1ddo6q646] { min-width: 0; display: grid; gap: var(--sp-5); }
.set-section[b-c1ddo6q646] { margin: 0; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.set-section h2[b-c1ddo6q646] { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.set-section h3[b-c1ddo6q646] { margin: var(--sp-5) 0 var(--sp-1); font-size: var(--fs-md); }
.set-section h2 + h3[b-c1ddo6q646] { margin-top: var(--sp-3); }
.set-section code[b-c1ddo6q646] { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; word-break: break-all; font-size: var(--fs-sm); }
.set-group[b-c1ddo6q646] { display: grid; gap: var(--sp-5); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

.set-msg[b-c1ddo6q646] { display: flex; align-items: flex-start; gap: var(--sp-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); }
.set-msg[b-c1ddo6q646]  .i { flex: none; margin-top: 2px; }
.set-msg.is-good[b-c1ddo6q646] { background: var(--good-soft); color: var(--good); }
.set-msg.is-bad[b-c1ddo6q646] { background: var(--error-soft); color: var(--error); }
.set-msg.is-warn[b-c1ddo6q646] { background: var(--warn-soft); color: var(--ink); }
.set-msg.is-warn[b-c1ddo6q646]  .i { color: var(--warn); }

.set-pw-form[b-c1ddo6q646] { max-width: 416px; }
.set-note[b-c1ddo6q646] { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); max-width: 68ch; }

/* "Technik": folded; its summary is the section's heading line (the card's padding is the summary's) */
.set-main[b-c1ddo6q646]  .set-tech { padding: 0; border-top: 0; }
.set-main[b-c1ddo6q646]  .set-tech > summary { min-height: var(--tap); padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; row-gap: 2px; }
.set-main[b-c1ddo6q646]  .set-tech .disclosure-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400; }
.set-main[b-c1ddo6q646]  .set-tech-about { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 400; }
.set-main[b-c1ddo6q646]  .set-tech > .disclosure-body { padding: 0 var(--sp-5) var(--sp-5); }

.set-folders[b-c1ddo6q646] { margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-3); }
.set-folders dt[b-c1ddo6q646] { font-weight: 600; font-size: var(--fs-sm); }
.set-folders dt .muted[b-c1ddo6q646] { font-weight: 400; }
.set-folders dd[b-c1ddo6q646] { margin: 2px 0 0; }

.set-trips[b-c1ddo6q646] { list-style: none; margin: 0; padding: 0; }
.set-trips > li[b-c1ddo6q646] { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.set-trip-head[b-c1ddo6q646] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.set-trip-path[b-c1ddo6q646] { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.set-trip-actions[b-c1ddo6q646] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.set-check[b-c1ddo6q646] { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--ink); font-size: var(--fs-sm); }
.set-check input[b-c1ddo6q646] { width: auto; accent-color: var(--accent); }
.set-confirm[b-c1ddo6q646] { flex: 1 1 100%; font-size: var(--fs-sm); }
.set-confirm p[b-c1ddo6q646] { margin: 0 0 var(--sp-2); color: var(--ink); }
.set-confirm .toolbar[b-c1ddo6q646] { justify-content: flex-start; }
.set-consequence[b-c1ddo6q646] { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.set-consequence span[b-c1ddo6q646] { color: var(--ink); }
.set-trips .set-msg[b-c1ddo6q646] { margin: var(--sp-3) 0 0; }

/* narrow: the navigation becomes a row of pills above the sections */
@media (max-width: 1100px) {
    .set-layout[b-c1ddo6q646] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    .set-nav[b-c1ddo6q646] { position: static; display: flex; gap: 6px; padding: 0; overflow-x: auto; scrollbar-width: none; background: none; box-shadow: none; }
    .set-nav a[b-c1ddo6q646] { flex: none; min-height: 36px; padding: 0 14px; background: var(--surface-2); border-radius: var(--r-pill); }
}
@media (max-width: 760px) {
    .set-main[b-c1ddo6q646]  .set-tech > summary { padding: var(--sp-4); }
    .set-main[b-c1ddo6q646]  .set-tech > .disclosure-body { padding: 0 var(--sp-4) var(--sp-4); }
}
@media (pointer: coarse) {
    .set-nav a[b-c1ddo6q646] { min-height: var(--tap); }
    .set-check[b-c1ddo6q646] { min-height: var(--tap); }
}
/* /Components/Pages/Fotos.razor.rz.scp.css */
/* Fotos in Helles Studio (site-fotos.html): the head in one band, a sticky bar with the crumb and the filter chips, every
   day under a sticky head as one justified flow with a label tile per stop. Kit components inside the page (PageBar,
   Crumb, Chip, MenuButton, Popover, PhotoTile) are reached with ::deep. --fx-pad is the main area's edge (app.css), so the
   bar and the day heads can reach across it. */
.fx[b-ms6g3qidqe] { --row-h: 196px; --gap: 4px; --fx-pad: var(--sp-5); max-width: 1680px; margin: calc(-1 * var(--fx-pad)) auto 0; }
.fx-missing[b-ms6g3qidqe] { padding-top: var(--sp-4); }
.fx-trip-list[b-ms6g3qidqe] { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }

/* ---- the head: title + meta/meter | lens | ring | Sichten ---- */
.fx-head[b-ms6g3qidqe] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "h1 lens review btn" "sub lens review btn";
    align-items: center; column-gap: 20px; row-gap: 2px; padding: var(--sp-5) 0 var(--sp-4);
}
.fx-h1[b-ms6g3qidqe] { grid-area: h1; margin: 0; align-self: end; font-size: var(--fs-2xl); line-height: 1.1; }
.fx-sub[b-ms6g3qidqe] { grid-area: sub; display: grid; gap: 2px; align-self: start; min-width: 0; }
.meta[b-ms6g3qidqe] { color: var(--ink-3); font-size: var(--fs-sm); }
.link-q[b-ms6g3qidqe] { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-q:hover[b-ms6g3qidqe] { color: var(--ink); }
.fx-meter[b-ms6g3qidqe] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.fx-meter .bar[b-ms6g3qidqe] { flex: none; width: 72px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.fx-meter .bar i[b-ms6g3qidqe] { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--t-3) var(--ease); }
.fx-meter .bar.is-warn i[b-ms6g3qidqe] { background: var(--warn); }
.fx-meter .lm-queued[b-ms6g3qidqe] { font-size: var(--fs-sm); }
.lens-seg[b-ms6g3qidqe] { grid-area: lens; }
.lens-seg button[b-ms6g3qidqe] { white-space: nowrap; }
/* a radio group in the kit's segmented look (kit.css styles pressed, current and selected, not checked) */
.lens-seg [aria-checked="true"][b-ms6g3qidqe] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.lens-seg .count[b-ms6g3qidqe] { font-variant-numeric: tabular-nums; }
.fx-newbook[b-ms6g3qidqe] { grid-area: lens; --h: 36px; font-size: var(--fs-sm); }
.fx-review[b-ms6g3qidqe] { grid-area: review; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.fx-review b[b-ms6g3qidqe] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* the review ring: a conic arc in --good on a quiet track, cut out in the middle */
.ring[b-ms6g3qidqe] {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--surface-3) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));
}
.fx-sichten[b-ms6g3qidqe] { grid-area: btn; }
/* while photos are marked the floating bar has the one primary action */
.fx.is-selecting .fx-sichten[b-ms6g3qidqe] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---- the sticky bar (kit PageBar): crumb · chips · count · tools ---- */
.fx[b-ms6g3qidqe]  .fx-bar { margin: 0 calc(-1 * var(--fx-pad)); padding: 8px var(--fx-pad); gap: 8px; z-index: 35; }
.fx[b-ms6g3qidqe]  .fx-crumb { flex: 0 1 430px; min-width: 120px; }
.fx[b-ms6g3qidqe]  .fx-crumb .c-strong { color: var(--ink); }
/* the kit leaves out the place in a narrow crumb; here its separator stands before it, so that goes as well */
@container (max-width: 330px) {
    .fx[b-ms6g3qidqe]  .fx-crumb .c-sep:has(+ .c-place) { display: none; }
}
.vsep[b-ms6g3qidqe] { flex: none; width: 1px; height: 24px; background: var(--line); }
.fx-chips[b-ms6g3qidqe] { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.fx-chips[b-ms6g3qidqe]::-webkit-scrollbar { display: none; }
.fx-chips[b-ms6g3qidqe]  .chip { height: 32px; padding: 0 12px; font-size: var(--fs-sm); flex: none; }
.fx-chips[b-ms6g3qidqe]  .chip .chev { width: 14px; height: 14px; opacity: .7; }
.fx-chips[b-ms6g3qidqe]  .menu-button { flex: none; }
.fx-reset[b-ms6g3qidqe] { flex: none; padding: 0 6px; border: 0; background: none; font-size: var(--fs-sm); cursor: pointer; }
.fx-count[b-ms6g3qidqe] { flex: none; margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx[b-ms6g3qidqe]  .fx-bar .pagebar-tools { margin-left: 0; }
.fx[b-ms6g3qidqe]  .fx-bar .pagebar-tools .ib { position: relative; }
.fx[b-ms6g3qidqe]  .fx-bar .ib.is-on { background: var(--accent-soft); color: var(--accent-text); }
/* the phones' "Filter" and "Auswählen" */
.fx[b-ms6g3qidqe]  .fx-filter-wrap { display: none; flex: none; }
.fx[b-ms6g3qidqe]  .fx-filter { height: 36px; }
.fx-num[b-ms6g3qidqe] {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600;
}
.fx-pick[b-ms6g3qidqe] { display: none; flex: none; --h: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.fx-pick[aria-pressed="true"][b-ms6g3qidqe] { background: var(--ink); color: var(--bg); }
@media (pointer: coarse) {
    .fx-pick[b-ms6g3qidqe] { display: inline-flex; --h: var(--tap); }
    .fx-chips[b-ms6g3qidqe]  .chip { height: var(--tap); }
}

.fx-message[b-ms6g3qidqe] { margin: var(--sp-3) 0 0; }
.fx-narrow[b-ms6g3qidqe] { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.fx-narrow .link[b-ms6g3qidqe], .stop-texts .link[b-ms6g3qidqe] { border: 0; background: none; padding: 0; font-size: inherit; cursor: pointer; }
.fx-empty[b-ms6g3qidqe] {
    display: grid; justify-items: center; gap: 10px; max-width: 460px; margin: var(--sp-6) auto; padding: var(--sp-6); text-align: center;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: var(--ink-2);
}
.fx-empty[b-ms6g3qidqe]  .i { width: 32px; height: 32px; color: var(--ink-3); }
.fx-empty b[b-ms6g3qidqe] { color: var(--ink); font-weight: 600; }

/* ---- a day: sticky head under the bar ---- */
.day[b-ms6g3qidqe] { scroll-margin-top: calc(var(--header-h) + var(--bar-h, 56px)); }
.day + .day[b-ms6g3qidqe] { margin-top: var(--sp-6); }
.day-head[b-ms6g3qidqe] {
    position: sticky; top: calc(var(--header-h) + var(--bar-h, 56px)); z-index: 20; display: flex; align-items: center; gap: 12px; min-width: 0;
    margin: 0 calc(-1 * var(--fx-pad)); padding: 12px var(--fx-pad) 10px; background: var(--bg);
}
.day-head .c-mark[b-ms6g3qidqe] { min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--r-sm); font-size: var(--fs-xs); }
.c-mark.is-neutral[b-ms6g3qidqe] { background: var(--surface-3); color: var(--ink); }
.day-head h2[b-ms6g3qidqe] { margin: 0; font-size: var(--fs-xl); line-height: 1.2; white-space: nowrap; scroll-margin-top: calc(var(--header-h) + var(--bar-h, 56px) + 8px); }
.dh-tag[b-ms6g3qidqe] { flex: none; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.dh-title[b-ms6g3qidqe] { flex: 1; min-width: 0; color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-title:not(:empty)[b-ms6g3qidqe]::before { content: "· "; }
.dh-count[b-ms6g3qidqe] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-head[b-ms6g3qidqe]  .menu-button { flex: none; }
.day-sum-row[b-ms6g3qidqe] { display: flex; align-items: baseline; gap: var(--sp-2); max-width: 1100px; margin: 0 0 var(--sp-2); }
.day-summary-toggle[b-ms6g3qidqe] { flex: none; }
.day-summary[b-ms6g3qidqe] { margin: 0; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.day-summary.is-open[b-ms6g3qidqe] { -webkit-line-clamp: unset; }
.stop-texts[b-ms6g3qidqe] { display: grid; gap: 6px; max-width: 990px; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.stop-texts dt[b-ms6g3qidqe] { font-weight: 600; color: var(--ink); }
.stop-texts dd[b-ms6g3qidqe] { margin: 0; color: var(--ink-2); }
.day-edit[b-ms6g3qidqe], .stop-edit[b-ms6g3qidqe] { display: grid; gap: 2px; max-width: 740px; padding: var(--sp-3) 0; }
.edit-actions[b-ms6g3qidqe] { margin-top: var(--sp-2); }
.fx-none[b-ms6g3qidqe] { margin: var(--sp-4) 0; }

/* ---- the justified flow of a day (tiles: PhotoTile.razor.css); every stop starts with a label tile ---- */
.jg[b-ms6g3qidqe] { display: flex; flex-wrap: wrap; gap: var(--gap); padding-top: 4px; }
.jg[b-ms6g3qidqe]::after { content: ""; flex-grow: 999999; }
.jg-stop[b-ms6g3qidqe] {
    position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; width: 148px; height: var(--row-h);
    padding: 10px 12px 10px 10px; border-left: 2px solid var(--line-strong); color: var(--ink-2);
    scroll-margin-top: calc(var(--header-h) + var(--bar-h, 56px) + 60px);
}
.jg-stop[b-ms6g3qidqe] >  .i { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.jg-stop-title[b-ms6g3qidqe] {
    margin: 0; font: 600 var(--fs-sm)/1.3 var(--font-ui); color: var(--ink); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.jg-stop small[b-ms6g3qidqe] { margin-top: auto; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jg-stop .sl-short[b-ms6g3qidqe] { display: none; }
.jg-stop[b-ms6g3qidqe]  .jg-stop-menu { position: absolute; top: 4px; right: 2px; opacity: 0; transition: opacity var(--t-1); }
.jg-stop:hover[b-ms6g3qidqe]  .jg-stop-menu, .jg-stop:focus-within[b-ms6g3qidqe]  .jg-stop-menu, .jg-stop[b-ms6g3qidqe]  .jg-stop-menu.is-open { opacity: 1; }
@media (hover: none) { .jg-stop[b-ms6g3qidqe]  .jg-stop-menu { opacity: 1; } }
/* a day that is not drawn yet keeps about its height, so the page does not jump while it fills */
.jg-wait[b-ms6g3qidqe] {
    display: grid; place-items: center; width: 100%; height: calc(var(--rows, 2) * (var(--row-h) + var(--gap))); margin-top: 4px; padding: 0;
    border: 0; border-radius: var(--r-md); background: var(--surface-2); color: inherit; font-size: var(--fs-sm); cursor: pointer;
}

/* ---- popovers: filter sheet, search, more filters, legend ---- */
.fx[b-ms6g3qidqe]  .pop-search { width: 320px; padding: var(--sp-2); }
.fx[b-ms6g3qidqe]  .pop-search .field { height: 44px; }
.fx[b-ms6g3qidqe]  .pop-filter { width: 352px; padding: 14px; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.fx[b-ms6g3qidqe]  .fx-filter-pop { width: min(420px, calc(100vw - 24px)); padding: 10px; border-radius: var(--r-lg); }
.fs-head[b-ms6g3qidqe] { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 2px; }
.fs-head b[b-ms6g3qidqe] { font-size: var(--fs-md); font-weight: 600; }
.fs-head .link[b-ms6g3qidqe] { border: 0; background: none; padding: 0; font-size: var(--fs-sm); cursor: pointer; }
.fs-chips[b-ms6g3qidqe] { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 6px; }
.fs-chips[b-ms6g3qidqe]  .chip, .pf-chips[b-ms6g3qidqe]  .chip { height: 32px; font-size: var(--fs-sm); }
.fs-done[b-ms6g3qidqe] { margin-top: 12px; }
/* in the phones' sheet the further filters line up with the day and person chips */
.fx[b-ms6g3qidqe]  .fx-filter-pop .pf-sec { padding: 8px 10px 10px; }
.fx[b-ms6g3qidqe]  .fx-filter-pop .menu-group { padding-left: 10px; }
.fx[b-ms6g3qidqe]  .fx-filter-pop .pf-sec .menu-group { padding-left: 0; }
.pf-sec[b-ms6g3qidqe] { display: grid; gap: var(--sp-2); padding: var(--sp-2) 4px var(--sp-3); }
.pf-sec + .pf-sec[b-ms6g3qidqe] { border-top: 1px solid var(--line); padding-top: 14px; }
.pf-sec .menu-group[b-ms6g3qidqe] { padding: 0; }
.pf-chips[b-ms6g3qidqe] { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-row[b-ms6g3qidqe] { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0; font-size: var(--fs-md); color: var(--ink); }
.pf-select[b-ms6g3qidqe] { width: auto; min-height: 32px; padding: 4px 8px; }
.pf-foot[b-ms6g3qidqe] { display: flex; justify-content: flex-start; padding: 4px; }
.fx[b-ms6g3qidqe]  .legend { width: 320px; padding: 14px; display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.legend-row[b-ms6g3qidqe] { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.sw[b-ms6g3qidqe] {
    position: relative; width: 34px; height: 26px; border-radius: 6px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--surface-3), var(--line-strong));
}
.sw.is-out[b-ms6g3qidqe] { opacity: .35; filter: grayscale(.8); }
.sw .inbook-mark[b-ms6g3qidqe] { width: 20px; height: 20px; }
.sw .inbook-mark.is-queued[b-ms6g3qidqe] { background: var(--accent-hover); }
.sw .inbook-mark[b-ms6g3qidqe]  .i { width: 12px; height: 12px; }
.sw[b-ms6g3qidqe]  .sw-star { width: 18px; height: 18px; color: var(--on-photo); stroke: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.sw-flag[b-ms6g3qidqe] { font-weight: 600; color: var(--on-photo); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.legend-keys[b-ms6g3qidqe] { margin: 0; font-size: var(--fs-xs); }

/* ---- narrower screens: the lens moves under the title ---- */
@media (max-width: 1100px) {
    .fx-head[b-ms6g3qidqe] { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "h1 review btn" "sub review btn" "lens lens lens"; }
    .lens-seg[b-ms6g3qidqe], .fx-newbook[b-ms6g3qidqe] { justify-self: start; margin-top: 14px; }
    .fx[b-ms6g3qidqe]  .fx-crumb { flex-basis: 340px; }
    .fx[b-ms6g3qidqe]  .tool-legend-wrap { display: none; }
}

/* ---- phones: the crumb takes the bar, "Filter" and "Auswählen" replace the chips, two photos share a row ---- */
@media (max-width: 760px) {
    .fx[b-ms6g3qidqe] { --row-h: 112px; --gap: 3px; --fx-pad: var(--sp-4); }
    .fx-head[b-ms6g3qidqe] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h1 btn" "sub sub" "lens lens"; row-gap: 4px; padding: var(--sp-4) 0 var(--sp-3); }
    .fx-h1[b-ms6g3qidqe] { align-self: center; font-size: var(--fs-xl); }
    .fx-sichten[b-ms6g3qidqe] { --h: 40px; padding: 0 16px; }
    .fx-review[b-ms6g3qidqe] { display: none; }
    .fx-sub[b-ms6g3qidqe] { display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; }
    .m-dates[b-ms6g3qidqe], .m-out[b-ms6g3qidqe], .fx-meter .lm-queued[b-ms6g3qidqe] { display: none; }
    .fx-meter[b-ms6g3qidqe] { flex-wrap: nowrap; overflow: hidden; }
    .fx-meter .lm-top[b-ms6g3qidqe] { overflow: hidden; text-overflow: ellipsis; }
    .fx-meter .bar[b-ms6g3qidqe] { width: 48px; }
    .lens-seg[b-ms6g3qidqe] { width: 100%; margin-top: 8px; }
    .lens-seg button[b-ms6g3qidqe] { flex: 1; justify-content: center; padding: 0 6px; }
    .lens-seg .count[b-ms6g3qidqe] { display: none; }
    .fx[b-ms6g3qidqe]  .fx-bar { padding: 8px var(--fx-pad); gap: 6px; }
    .fx[b-ms6g3qidqe]  .fx-crumb { flex: 1 1 auto; min-width: 0; }
    .fx[b-ms6g3qidqe]  .fx-crumb .crumb, .fx[b-ms6g3qidqe]  .fx-crumb .popover { width: 100%; }
    .fx[b-ms6g3qidqe]  .fx-crumb .c-strong, .fx[b-ms6g3qidqe]  .fx-crumb .c-strong + .c-sep { display: none; }
    .vsep[b-ms6g3qidqe], .fx-chips[b-ms6g3qidqe], .fx-count[b-ms6g3qidqe], .fx[b-ms6g3qidqe]  .fx-bar .pagebar-tools { display: none; }
    .fx[b-ms6g3qidqe]  .fx-filter-wrap { display: block; }
    /* "Filter" opens across the bar's width (the sticky bar is its frame), not from the button off the screen's edge */
    .fx[b-ms6g3qidqe]  .fx-filter-wrap.popover { position: static; }
    .fx[b-ms6g3qidqe]  .fx-filter-pop { left: 8px; right: 8px; top: calc(100% + 4px); width: auto; }
    .fx-pick[b-ms6g3qidqe] { display: inline-flex; }
    /* the selection bar on phones as in site.css: icons only beside the primary "Ins Buch", and of the four decisions only
       ★ and ✕ (Gut and Vielleicht are hide-sm, kit.css; a tap in the large view), so the whole bar fits */
    .fx-sel-lbl[b-ms6g3qidqe] { display: none; }
    .day-head[b-ms6g3qidqe] { gap: 10px; padding: 10px var(--fx-pad) 8px; }
    .day-head h2[b-ms6g3qidqe] { font-size: var(--fs-lg); }
    .dh-title[b-ms6g3qidqe], .dh-tag[b-ms6g3qidqe], .dh-more[b-ms6g3qidqe] { display: none; }
    .dh-count[b-ms6g3qidqe] { margin-left: auto; }
    .jg-stop[b-ms6g3qidqe] { width: 84px; padding: 6px 6px 6px 7px; gap: 4px; }
    .jg-stop-title[b-ms6g3qidqe] { font-size: var(--fs-xs); -webkit-line-clamp: 3; flex: none; }
    .jg-stop small[b-ms6g3qidqe] { font-size: 11px; line-height: 1.3; }
    .jg-stop .sl-long[b-ms6g3qidqe] { display: none; }
    .jg-stop .sl-short[b-ms6g3qidqe] { display: inline; }
    .jg-stop[b-ms6g3qidqe] >  .i { width: 14px; height: 14px; }
    .jg-stop[b-ms6g3qidqe]  .jg-stop-menu { display: none; }
    .fx[b-ms6g3qidqe]  .pop-filter, .fx[b-ms6g3qidqe]  .legend, .fx[b-ms6g3qidqe]  .pop-search { width: calc(100vw - 24px); }
}
/* /Components/Pages/Hilfe.razor.rz.scp.css */
/* Hilfe ("Helles Studio"): the parts as quiet cards with an icon; in a part the crumb "Hilfe › Begriffe" beside the search,
   the contents in the inspector's look on the left (sticky under the top bar, the open part in the accent tint), the
   topics as cards whose text runs at most 68 characters wide. Tokens only. */
.hilfe[b-z6kziuhgpw] { max-width: 1088px; margin: 0 auto; }

.hilfe-bar[b-z6kziuhgpw] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.hilfe-bar > .hilfe-search:only-child[b-z6kziuhgpw] { margin-right: auto; }
/* the crumb's host is a size container (kit): it has no width of its own, so it gets one here */
.hilfe-bar[b-z6kziuhgpw]  .hilfe-crumb { flex: 0 1 360px; min-width: 220px; }
.hilfe-search[b-z6kziuhgpw] { flex: 1 1 280px; max-width: 544px; margin: 0; }
.hilfe-search .field[b-z6kziuhgpw] { height: var(--tap); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hilfe-search .field:focus-within[b-z6kziuhgpw] { box-shadow: var(--focus); }
.hilfe-search input[b-z6kziuhgpw] { min-height: 0; }

/* the parts: one card each, its icon, its title, its topics as a quiet list of links */
.hilfe-toc[b-z6kziuhgpw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--sp-4); align-items: start; }
.hilfe-card[b-z6kziuhgpw] { margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-4); }
.hilfe-card-head[b-z6kziuhgpw] { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-1); }
.hilfe-card-icon[b-z6kziuhgpw] { width: 36px; height: 36px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.hilfe-card-icon[b-z6kziuhgpw]  .i { width: 19px; height: 19px; }
.hilfe-card h2[b-z6kziuhgpw] { margin: 0; font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; }
.hilfe-card h2 a[b-z6kziuhgpw] { color: var(--ink); text-decoration: none; }
.hilfe-card h2 a:hover[b-z6kziuhgpw] { color: var(--accent-text); }
.hilfe-card .hilfe-intro[b-z6kziuhgpw] { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.hilfe-card-topics[b-z6kziuhgpw] { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 2px; }
.hilfe-card-topics a[b-z6kziuhgpw] { display: block; padding: 5px 8px; margin: 0 -8px; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }
.hilfe-card-topics a:hover[b-z6kziuhgpw] { background: var(--surface-2); color: var(--ink); }
.hilfe-card-topics a:target[b-z6kziuhgpw] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* a part: the contents at the side in the inspector's look, the topics beside it */
.hilfe-layout[b-z6kziuhgpw] { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.hilfe-side[b-z6kziuhgpw] {
    position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: grid; gap: 2px; padding: 8px;
    max-height: calc(100vh - var(--header-h) - var(--sp-6)); overflow-y: auto;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.hilfe-side a[b-z6kziuhgpw] {
    display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm);
    color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none;
}
.hilfe-side a:hover[b-z6kziuhgpw] { background: var(--surface-2); color: var(--ink); }
.hilfe-side-home[b-z6kziuhgpw] { font-weight: 600; border-bottom: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0; margin-bottom: 4px; }
.hilfe-side-home[b-z6kziuhgpw]  .i { width: 17px; height: 17px; color: var(--ink-3); }
.hilfe-side-part[b-z6kziuhgpw] { font-weight: 600; }
.hilfe-side-part.is-on[b-z6kziuhgpw] { background: var(--accent-soft); color: var(--accent-text); }
.hilfe-side-topics[b-z6kziuhgpw] { list-style: none; margin: 2px 0 6px 12px; padding: 0 0 0 8px; border-left: 1px solid var(--line); }
.hilfe-side-topics a[b-z6kziuhgpw] { min-height: 30px; padding: 4px 8px; font-size: var(--fs-xs); }

.hilfe-section[b-z6kziuhgpw] { margin: 0 0 var(--sp-6); scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }
.hilfe-part > h2[b-z6kziuhgpw] { margin-bottom: var(--sp-2); }
.hilfe-intro[b-z6kziuhgpw] { margin: 0 0 var(--sp-4); color: var(--ink-2); max-width: 68ch; }

.hilfe-topic[b-z6kziuhgpw] {
    margin: 0 0 var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
    background: var(--surface); box-shadow: var(--sh-1); scroll-margin-top: calc(var(--header-h) + var(--sp-3)); overflow-wrap: anywhere;
}
.hilfe-topic:target[b-z6kziuhgpw], .hilfe-topic:focus[b-z6kziuhgpw] { box-shadow: inset 0 0 0 2px var(--accent), var(--sh-1); outline: none; }
.hilfe-topic h3[b-z6kziuhgpw] { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); font-weight: 600; }
.hilfe-summary[b-z6kziuhgpw], .hilfe-body[b-z6kziuhgpw], .hilfe-place[b-z6kziuhgpw], .hilfe-see[b-z6kziuhgpw] { max-width: 68ch; }
.hilfe-summary[b-z6kziuhgpw] { margin: 0; color: var(--ink); font-size: var(--fs-md); line-height: 1.55; }
.hilfe-body[b-z6kziuhgpw] { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; }
.hilfe-body[b-z6kziuhgpw]  p { margin: var(--sp-2) 0; }
.hilfe-body[b-z6kziuhgpw]  ul, .hilfe-body[b-z6kziuhgpw]  ol { margin: var(--sp-2) 0; padding-left: 20px; }
.hilfe-body[b-z6kziuhgpw]  table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.hilfe-body[b-z6kziuhgpw]  th, .hilfe-body[b-z6kziuhgpw]  td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.hilfe-body[b-z6kziuhgpw]  code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.hilfe-place[b-z6kziuhgpw] { margin: var(--sp-2) 0 0; }
.hilfe-place a[b-z6kziuhgpw] { font-weight: 600; text-decoration: none; }
.hilfe-see[b-z6kziuhgpw] { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.hilfe-results > h2[b-z6kziuhgpw] { margin-bottom: var(--sp-3); }
.hilfe-pager[b-z6kziuhgpw] { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

@media (max-width: 1100px) {
    .hilfe-layout[b-z6kziuhgpw] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    /* the contents become a row of pills above the topics */
    .hilfe-side[b-z6kziuhgpw] { position: static; max-height: none; display: flex; gap: 6px; padding: 0; overflow-x: auto; scrollbar-width: none; background: none; box-shadow: none; }
    .hilfe-side a[b-z6kziuhgpw] { flex: none; min-height: 36px; background: var(--surface-2); border-radius: var(--r-pill); padding: 0 14px; border: 0; }
    .hilfe-side-home[b-z6kziuhgpw] { margin: 0; }
    .hilfe-side-topics[b-z6kziuhgpw] { display: none; }
}
@media (max-width: 760px) {
    .hilfe-bar[b-z6kziuhgpw] { margin-bottom: var(--sp-4); }
    .hilfe-search[b-z6kziuhgpw] { flex-basis: 100%; max-width: none; }
    .hilfe-topic[b-z6kziuhgpw] { padding: var(--sp-3) var(--sp-4); }
    .hilfe-card[b-z6kziuhgpw] { padding: var(--sp-4); }
}
@media (pointer: coarse) {
    .hilfe-side a[b-z6kziuhgpw] { min-height: var(--tap); }
    .hilfe-card-topics a[b-z6kziuhgpw] { padding: 10px 8px; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Start (site-start.html, "Helles Studio"): "Weitermachen" as a studio stage beside the book's facts, then the shelf.
   Tokens only; the spread's shadow is the editor's (--sh-spread), its fold the stage's (kit-v4 .spr::after). */
.start-error[b-mo6ykuexei] { margin-bottom: var(--sp-4); }
.start-head[b-mo6ykuexei] { margin: var(--sp-2) 0 0; }
.start-head h1[b-mo6ykuexei] { margin: 0 0 var(--sp-1); }
.start-head p[b-mo6ykuexei] { margin: 0; }

/* ---- Weitermachen ---- */
.resume[b-mo6ykuexei], .resume-skeleton[b-mo6ykuexei] {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; overflow: hidden;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.resume-stage[b-mo6ykuexei] {
    display: grid; justify-items: center; align-content: center; gap: 18px; min-width: 0; padding: 56px 56px 28px;
    background: radial-gradient(ellipse at 50% 42%, var(--surface) 0%, transparent 70%), var(--bg);
}
.resume-spread[b-mo6ykuexei] { position: relative; display: block; width: 100%; max-width: 780px; color: inherit; }
.resume-spread .spr[b-mo6ykuexei] {
    position: relative; display: block; aspect-ratio: var(--ratio, 594 / 210); overflow: hidden; border-radius: 2px;
    background: var(--surface-3); box-shadow: var(--sh-spread); transition: transform var(--t-2) var(--ease);
}
.resume-spread .spr img[b-mo6ykuexei] { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the fold in the middle of the double page */
.resume-spread .spr[b-mo6ykuexei]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 47%, rgba(0, 0, 0, .08) 49.6%, rgba(0, 0, 0, .16) 50%, rgba(255, 255, 255, .05) 50.4%, transparent 53%);
}
a.resume-spread:hover .spr[b-mo6ykuexei] { transform: translateY(-2px); }
a.resume-spread:focus-visible[b-mo6ykuexei] { box-shadow: none; }
a.resume-spread:focus-visible .spr[b-mo6ykuexei] { box-shadow: var(--focus), var(--sh-spread); }
.stage-pages[b-mo6ykuexei] {
    position: absolute; left: 0; right: 0; top: -24px; display: flex; justify-content: space-between;
    font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none;
}
.resume-crumb[b-mo6ykuexei] { width: 100%; display: flex; justify-content: center; }
.resume-crumb .crumb[b-mo6ykuexei] { padding-right: 12px; text-decoration: none; max-width: 100%; }
.resume-crumb .crumb[b-mo6ykuexei]  .i { flex: none; }
.chap-row[b-mo6ykuexei] { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chap[b-mo6ykuexei] {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: var(--r-pill);
    color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; transition: background var(--t-1);
}
.chap:hover[b-mo6ykuexei] { background: var(--surface-2); color: var(--ink); }
.chap[aria-current="true"][b-mo6ykuexei] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.chap:not(:has(.c-mark))[b-mo6ykuexei] { padding-left: 10px; }

.resume-info[b-mo6ykuexei] { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 28px 28px 24px; border-left: 1px solid var(--line); }
.resume-info .eyebrow[b-mo6ykuexei] { margin: 0; }
.resume-info h1[b-mo6ykuexei] { margin: 0; font-size: var(--fs-2xl); overflow-wrap: anywhere; }
.resume-meta[b-mo6ykuexei] { margin: -6px 0 0; color: var(--ink-3); font-size: var(--fs-sm); }
/* the four steps as thin bars with their names (Fotos · Gestalten · Druckerei · Bestellen) */
.resume-steps[b-mo6ykuexei] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.resume-steps li[b-mo6ykuexei] { display: grid; gap: 5px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.resume-steps li[b-mo6ykuexei]::before { content: ""; height: 4px; border-radius: 2px; background: var(--surface-3); }
.resume-steps li.is-done[b-mo6ykuexei]::before { background: var(--good); }
.resume-steps li.is-now[b-mo6ykuexei] { color: var(--ink); }
.resume-steps li.is-now[b-mo6ykuexei]::before { background: var(--ink); }
.resume-steps li.is-warn[b-mo6ykuexei] { color: var(--warn); }
.resume-steps li.is-warn[b-mo6ykuexei]::before { background: var(--warn); }
.resume-steps li.is-ai[b-mo6ykuexei]::before { background: repeating-linear-gradient(135deg, var(--good) 0 3px, var(--good-soft) 3px 6px); }
.rs-name[b-mo6ykuexei] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-facts[b-mo6ykuexei] { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.resume-facts li[b-mo6ykuexei] { display: flex; align-items: flex-start; gap: 8px; }
.resume-facts[b-mo6ykuexei]  .i { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--ink-3); }
.resume-facts .is-warn[b-mo6ykuexei]  .i { color: var(--warn); }
.resume-facts .is-error[b-mo6ykuexei] { color: var(--error); }
.resume-facts .is-error[b-mo6ykuexei]  .i { color: var(--error); }
.resume-facts .is-good[b-mo6ykuexei]  .i { color: var(--good); }
.resume-facts a[b-mo6ykuexei] { font-weight: 600; text-decoration: none; }
.resume-info .btn-primary[b-mo6ykuexei] { align-self: stretch; margin-top: auto; }
.resume-more[b-mo6ykuexei] { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 0 -6px; }
.resume-more .btn[b-mo6ykuexei] { --h: 34px; padding: 0 10px; font-size: var(--fs-sm); }
.resume-more[b-mo6ykuexei]  .i { width: 17px; height: 17px; }

/* until the browser says which book was last open */
.resume-skeleton .sk[b-mo6ykuexei] { display: block; height: 14px; width: 80%; border-radius: var(--r-sm); background: var(--surface-2); }
.resume-skeleton .sk-title[b-mo6ykuexei] { height: 32px; width: 70%; }
.resume-skeleton .sk-short[b-mo6ykuexei] { width: 45%; }
.resume-skeleton .spr[b-mo6ykuexei] { box-shadow: none; background: var(--surface-2); }

/* ---- after the shelf ---- */
.start-empty[b-mo6ykuexei] { margin-top: var(--sp-5); }
.start-prep-sec h2[b-mo6ykuexei] { margin-bottom: var(--sp-3); }
.start-prep-grid[b-mo6ykuexei] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
/* the people: optional, so one quiet line */
.start-people[b-mo6ykuexei] { display: flex; align-items: center; gap: 16px; margin-top: var(--sp-6); padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.faces[b-mo6ykuexei] { display: flex; flex: none; }
.faces img[b-mo6ykuexei] { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); margin-left: -8px; background: var(--surface-3); }
.faces img:first-child[b-mo6ykuexei] { margin-left: 0; }
.people-ico[b-mo6ykuexei] { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.start-people .txt[b-mo6ykuexei] { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-sm); }
.start-people .txt b[b-mo6ykuexei] { font-weight: 600; }
.start-people .btn[b-mo6ykuexei] { --h: 34px; padding: 0 12px; font-size: var(--fs-sm); }
.start-people[b-mo6ykuexei]  .btn .i { width: 17px; height: 17px; }

@media (max-width: 1100px) {
    .resume[b-mo6ykuexei], .resume-skeleton[b-mo6ykuexei] { grid-template-columns: minmax(0, 1fr) 320px; }
    .resume-stage[b-mo6ykuexei] { padding: 48px 32px 24px; }
}
@media (max-width: 900px) {
    .resume[b-mo6ykuexei], .resume-skeleton[b-mo6ykuexei] { grid-template-columns: minmax(0, 1fr); }
    .resume-info[b-mo6ykuexei] { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
    .resume-stage[b-mo6ykuexei] { padding: 24px 14px 18px; gap: 14px; }
    .stage-pages[b-mo6ykuexei] { display: none; }
    .resume-crumb .c-place[b-mo6ykuexei], .resume-crumb .c-place + .c-sep[b-mo6ykuexei] { display: none; }
    .resume-info[b-mo6ykuexei] { padding: 18px 16px; gap: 12px; }
    .resume-info h1[b-mo6ykuexei] { font-size: var(--fs-xl); }
    .chap-row[b-mo6ykuexei] { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
    .chap[b-mo6ykuexei] { flex: none; }
    .start-people[b-mo6ykuexei] { flex-wrap: wrap; }
    .start-people .btn[b-mo6ykuexei] { width: 100%; justify-content: center; }
}
@media (pointer: coarse) {
    .resume-more .btn[b-mo6ykuexei], .start-people .btn[b-mo6ykuexei] { --h: var(--tap); }
    .resume-crumb .crumb[b-mo6ykuexei] { height: var(--tap); }
    .chap[b-mo6ykuexei]::before { content: ""; position: absolute; inset: -7px -2px; }
    .resume-facts a[b-mo6ykuexei] { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
}
@media (prefers-reduced-motion: reduce) {
    a.resume-spread:hover .spr[b-mo6ykuexei] { transform: none; }
}
/* /Components/Pages/Personen.razor.rz.scp.css */
/* Personen (Helles Studio, the language of site-fotos.html): square faces first, calm cards, the groups without a name as
   one card, "Benennen" as a focus card, the statistics as a table in the B look. Tokens only. */
.pp[b-a7q9xfn3t5]  .pp-tabs { margin: 0 0 var(--sp-5); }
.pp-msg[b-a7q9xfn3t5] { margin: 0 0 var(--sp-4); }
.pp-section[b-a7q9xfn3t5] { margin-top: var(--sp-7); }
.pp-first[b-a7q9xfn3t5] { margin-top: 0; }
.pp-head[b-a7q9xfn3t5] { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.pp-head h2[b-a7q9xfn3t5] { margin: 0; }
.pp-count[b-a7q9xfn3t5] { color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pp-count-for[b-a7q9xfn3t5] { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); }
.pp-hint[b-a7q9xfn3t5] { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-sm); max-width: 68ch; }
.pp-sub[b-a7q9xfn3t5] { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-md); }
.pp-more[b-a7q9xfn3t5] { margin-top: var(--sp-4); }
.pp code[b-a7q9xfn3t5] { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); font-size: var(--fs-xs); word-break: break-all; }

/* ---- the named people: a gallery of square faces, name and numbers below (like the tiles on Fotos) ---- */
.person-grid[b-a7q9xfn3t5] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-5) var(--sp-4);
}
.person-card[b-a7q9xfn3t5] { display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; outline: none; }
.person-face[b-a7q9xfn3t5] {
    position: relative; display: block; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden;
    border-radius: var(--r-md); background: var(--surface-3); transition: box-shadow var(--t-2) var(--ease);
}
.person-card:hover .person-face[b-a7q9xfn3t5] { box-shadow: var(--sh-2); }
.person-card:focus-visible .person-face[b-a7q9xfn3t5] { box-shadow: var(--focus); }
.person-pic[b-a7q9xfn3t5] { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-2) var(--ease); }
.person-card:hover .person-pic[b-a7q9xfn3t5] { transform: scale(1.04); }
.person-pic.is-initials[b-a7q9xfn3t5] { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font: 400 var(--fs-3xl) var(--font-display); }
/* in the book "im Buch" counts for: the kit's mark, like a photo in the book on Fotos */
.person-inbook[b-a7q9xfn3t5] { position: absolute; top: 8px; right: 8px; }
.person-name[b-a7q9xfn3t5] { font-weight: 600; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.person-counts[b-a7q9xfn3t5] { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ---- the groups without a name: one calm card, a small mosaic of their faces ---- */
.pp-open[b-a7q9xfn3t5] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); }
.pp-open-faces[b-a7q9xfn3t5] { display: grid; grid-auto-flow: column; grid-auto-columns: 56px; gap: 3px; flex: none; }
.pp-open-faces img[b-a7q9xfn3t5] { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--surface-3); }
.pp-open-faces img:first-child[b-a7q9xfn3t5] { border-radius: 12px 6px 6px 12px; }
.pp-open-faces img:last-child[b-a7q9xfn3t5] { border-radius: 6px 12px 12px 6px; }
.pp-open-faces img:only-child[b-a7q9xfn3t5] { border-radius: 12px; }
.pp-open-ico[b-a7q9xfn3t5] { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--surface-2); color: var(--good); }
.pp-open-text[b-a7q9xfn3t5] { flex: 1; min-width: 240px; }
.pp-open-text h2[b-a7q9xfn3t5] { margin: 0 0 4px; font: 600 var(--fs-lg)/1.3 var(--font-ui); letter-spacing: 0; }
.pp-open-text p[b-a7q9xfn3t5] { margin: 0; font-size: var(--fs-sm); max-width: 60ch; }
.pp-open-actions[b-a7q9xfn3t5] { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* one group: quiet card in the list, the focus card in "Benennen" */
.group-list[b-a7q9xfn3t5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); align-items: start; }
.group[b-a7q9xfn3t5] { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.group.card[b-a7q9xfn3t5] { padding: var(--sp-4); }
.group-head[b-a7q9xfn3t5] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-sm); }
.face-strip[b-a7q9xfn3t5] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.group.is-focus .face-strip[b-a7q9xfn3t5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.group-more[b-a7q9xfn3t5], .group-ignore[b-a7q9xfn3t5] { justify-self: start; }
.group-answer[b-a7q9xfn3t5] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* the suggested person's face beside the question: the two faces can be compared at a glance */
.group-suggest:has(.group-suggest-face)[b-a7q9xfn3t5] { padding-left: 6px; }
.group-suggest-face[b-a7q9xfn3t5] { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.group-name[b-a7q9xfn3t5] { display: flex; align-items: center; gap: var(--sp-2); }
.group-field[b-a7q9xfn3t5] { flex: 1; min-width: 0; }
.group-field:focus-within[b-a7q9xfn3t5], .loose-name:focus-within[b-a7q9xfn3t5] { box-shadow: var(--focus); }
/* 16 px at least: phones zoom into smaller fields when they get the focus */
.group-field input[b-a7q9xfn3t5], .loose-name input[b-a7q9xfn3t5] { font-size: 16px; }

/* "Benennen": a narrower dialog than the kit's 980 px centre panel, the position like an eyebrow */
@media (min-width: 761px) {
    .pp-flow-host[b-a7q9xfn3t5]  .pp-flow { width: min(640px, calc(100% - 48px)); }
}
.pp-flow-pos[b-a7q9xfn3t5] {
    margin: 0 0 var(--sp-3); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* ---- single faces: square tiles, a name field and "Fremd" under each ---- */
.pp-loose-bar[b-a7q9xfn3t5] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.pp-loose-bar .pp-hint[b-a7q9xfn3t5] { margin: 0; }
.pp-check[b-a7q9xfn3t5] { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--ink-2); font-size: var(--fs-sm); cursor: pointer; }
.pp-check input[b-a7q9xfn3t5] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.loose-grid[b-a7q9xfn3t5] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4) var(--sp-3);
}
.loose[b-a7q9xfn3t5] { display: grid; gap: 6px; align-content: start; min-width: 0; }
.loose-name[b-a7q9xfn3t5] { height: 36px; padding: 0 2px 0 12px; }
.loose-ok[b-a7q9xfn3t5] { flex: none; }
.loose-ignore[b-a7q9xfn3t5] { justify-self: start; }

/* ---- statistics: the table of B (index.html), the people's faces in the first column ---- */
.pp-inline-label[b-a7q9xfn3t5] { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.pp-book[b-a7q9xfn3t5] { width: auto; max-width: 280px; min-height: 36px; padding: 6px 12px; font-size: var(--fs-sm); }
.pp-summary[b-a7q9xfn3t5] { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: var(--fs-sm); max-width: 80ch; }
.stats-scroll[b-a7q9xfn3t5] { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.stats[b-a7q9xfn3t5] { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.stats th[b-a7q9xfn3t5], .stats td[b-a7q9xfn3t5] { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.stats thead th[b-a7q9xfn3t5] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.stats tbody tr:last-child > *[b-a7q9xfn3t5] { border-bottom: 0; }
.stats .num[b-a7q9xfn3t5] { text-align: right; font-variant-numeric: tabular-nums; }
.stats th[scope=row][b-a7q9xfn3t5] { font-weight: 600; }
.stats-who[b-a7q9xfn3t5] { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.stats-who:hover[b-a7q9xfn3t5] { text-decoration: underline; text-underline-offset: 3px; }
.stats-face[b-a7q9xfn3t5] { display: block; width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.days[b-a7q9xfn3t5] { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.day-bar[b-a7q9xfn3t5] { position: relative; width: 10px; height: 100%; border-radius: 2px; background: var(--surface-2); }
.day-archive[b-a7q9xfn3t5], .day-book[b-a7q9xfn3t5] { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px; }
.day-archive[b-a7q9xfn3t5] { background: var(--accent-soft); }
.day-book[b-a7q9xfn3t5] { left: 2px; right: 2px; background: var(--accent); }
.together[b-a7q9xfn3t5] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px var(--sp-4); font-size: var(--fs-sm); }
.together li[b-a7q9xfn3t5] { display: flex; align-items: center; gap: 6px; }

/* ---- "Technik": folded away at the end (kit Disclosure), two quiet cards inside ---- */
.pp[b-a7q9xfn3t5]  .pp-tech { margin-top: var(--sp-8); }
.pp-tech-note[b-a7q9xfn3t5] { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 400; }
.pp-tech-cards[b-a7q9xfn3t5] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); align-items: start; padding-top: var(--sp-2); }
.pp-tech-cards .card[b-a7q9xfn3t5] { display: grid; justify-items: start; gap: var(--sp-3); min-width: 0; }
.pp-tech-cards h3[b-a7q9xfn3t5] { margin: 0; }
.pp-tech-cards p[b-a7q9xfn3t5] { margin: 0; max-width: 68ch; font-size: var(--fs-sm); }
.pp-next[b-a7q9xfn3t5] { width: 100%; color: var(--ink); font-size: var(--fs-sm); }
.pp-next[b-a7q9xfn3t5] >  .i { color: var(--good); }
.pp-tech-cards .pp-next p[b-a7q9xfn3t5] { margin: 4px 0; }
.pp-next ul[b-a7q9xfn3t5] { margin: 4px 0 var(--sp-2); padding-left: 20px; }
.face-trips[b-a7q9xfn3t5] { list-style: none; width: 100%; margin: 0; padding: 0; }
.face-trips > li[b-a7q9xfn3t5] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
    padding: 12px 0; border-top: 1px solid var(--line);
}
.face-trip-text[b-a7q9xfn3t5] { flex: 1 1 260px; min-width: 0; font-size: var(--fs-sm); }
.face-trip-path[b-a7q9xfn3t5] { margin-top: 2px; font-size: var(--fs-xs); overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .pp[b-a7q9xfn3t5]  .pp-tabs { display: flex; width: 100%; }
    .pp[b-a7q9xfn3t5]  .pp-tabs > button { flex: 1 1 0; justify-content: center; }
    .pp-section[b-a7q9xfn3t5] { margin-top: var(--sp-6); }
    .pp-first[b-a7q9xfn3t5] { margin-top: 0; }
    .pp-count-for[b-a7q9xfn3t5] { flex-basis: 100%; }
    .person-grid[b-a7q9xfn3t5] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
    .pp-open[b-a7q9xfn3t5] { gap: var(--sp-3); padding: var(--sp-4); }
    .pp-open-faces[b-a7q9xfn3t5] { grid-auto-columns: 44px; }
    .pp-open-faces img[b-a7q9xfn3t5] { width: 44px; height: 44px; }
    .pp-open-actions[b-a7q9xfn3t5] { width: 100%; }
    .pp-open-actions[b-a7q9xfn3t5]  .btn { flex: 1; }
    .group-list[b-a7q9xfn3t5] { grid-template-columns: minmax(0, 1fr); }
    .group.is-focus .face-strip[b-a7q9xfn3t5] { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .loose-grid[b-a7q9xfn3t5] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp[b-a7q9xfn3t5]  .pp-tech { margin-top: var(--sp-7); }
    /* the summary line has room for the title only; the cards inside say what they are for */
    .pp-tech-note[b-a7q9xfn3t5] { display: none; }
    .pp-tech-cards[b-a7q9xfn3t5] { grid-template-columns: minmax(0, 1fr); }
}

/* touch screens: every target 44 px (the name field grows with its button) */
@media (pointer: coarse) {
    .loose-name[b-a7q9xfn3t5] { height: var(--tap); }
    .pp-check[b-a7q9xfn3t5] { min-height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
    .person-card:hover .person-pic[b-a7q9xfn3t5] { transform: none; }
}
/* /Components/Pages/PersonPage.razor.rz.scp.css */
/* One person (Helles Studio): the crumb in the page bar, a head with her face and the books, then photos first. Tokens only. */
.ps[b-9rvilyv3ve]  .ps-bar { padding: 0 0 var(--sp-4); }
.ps[b-9rvilyv3ve]  .ps-crumb { flex: 0 1 460px; }

/* the face lines up with the name, however many lines of books and note follow */
.ps-top[b-9rvilyv3ve] { display: flex; align-items: flex-start; gap: var(--sp-4); }
.ps-face[b-9rvilyv3ve] {
    flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
    background: var(--surface-3); box-shadow: 0 0 0 3px var(--surface), var(--sh-1);
}
.ps-initials[b-9rvilyv3ve] { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font: 400 var(--fs-xl) var(--font-display); }
.ps-title[b-9rvilyv3ve] { flex: 1; min-width: 0; }
.ps-title h1[b-9rvilyv3ve] { margin: 0 0 2px; overflow-wrap: anywhere; }
.ps-counts[b-9rvilyv3ve] { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ps-note[b-9rvilyv3ve] { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 68ch; }
.ps-top[b-9rvilyv3ve]  .ps-more-menu { align-self: flex-start; }

/* how often she is in each book: a quiet pill with the book's cover, a link to its overview */
.ps-books[b-9rvilyv3ve] { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0 0; padding: 0; }
.ps-book[b-9rvilyv3ve] {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); text-decoration: none; transition: background var(--t-1);
}
.ps-book:hover[b-9rvilyv3ve] { background: var(--surface-3); color: var(--ink); }
.ps-book b[b-9rvilyv3ve] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-book .cover-xs[b-9rvilyv3ve] { width: 34px; height: 24px; }
.ps-book .cover-xs img[b-9rvilyv3ve] { display: block; width: 100%; height: 100%; object-fit: cover; }

.ps-msg[b-9rvilyv3ve] { margin: var(--sp-4) 0 0; }

/* the panels that "⋯" opens above the photos: kit cards with a head and a round close button */
.ps-panel[b-9rvilyv3ve] { display: grid; gap: var(--sp-2); max-width: 640px; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.ps-panel-head[b-9rvilyv3ve] { display: flex; align-items: center; gap: var(--sp-2); margin: 0 calc(-1 * var(--sp-2)) var(--sp-2) 0; }
.ps-panel-head h2[b-9rvilyv3ve] { flex: 1; min-width: 0; margin: 0; font: 600 var(--fs-lg)/1.3 var(--font-ui); letter-spacing: 0; }
.ps-form[b-9rvilyv3ve] { display: grid; gap: var(--sp-2); }
.ps-form label[b-9rvilyv3ve], .ps-panel > label[b-9rvilyv3ve] { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.ps-actions[b-9rvilyv3ve] { margin-top: var(--sp-2); }
.ps-row[b-9rvilyv3ve] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ps-into[b-9rvilyv3ve] { width: auto; min-width: 200px; }
.ps-delete .muted[b-9rvilyv3ve] { font-size: var(--fs-sm); }
.ps-confirm[b-9rvilyv3ve] { flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }
.ps-confirm-text[b-9rvilyv3ve] { flex: 1 1 260px; min-width: 0; color: var(--ink); font-size: var(--fs-sm); }
.ps-confirm-actions[b-9rvilyv3ve] { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.ps-section[b-9rvilyv3ve] { margin-top: var(--sp-7); }
.ps-head[b-9rvilyv3ve] { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.ps-head h2[b-9rvilyv3ve] { margin: 0; }
.ps-count[b-9rvilyv3ve] { color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ps-hint[b-9rvilyv3ve] { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); max-width: 68ch; }
.ps-sub[b-9rvilyv3ve] { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--fs-md); }
.ps-more[b-9rvilyv3ve] { margin-top: var(--sp-4); }

/* her photos: the justified rows of Fotos (photo first, 4 px apart, small radius) */
.ps-photos[b-9rvilyv3ve] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ps-photos[b-9rvilyv3ve]::after { content: ""; flex-grow: 999999; }
.ps-photos li[b-9rvilyv3ve] {
    flex-grow: calc(var(--ar) * 100); flex-basis: calc(var(--ar) * 196px); aspect-ratio: var(--ar); max-height: 300px;
    border-radius: 4px; overflow: hidden; background: var(--surface-3);
}
.ps-photos a[b-9rvilyv3ve] { display: block; width: 100%; height: 100%; outline: none; }
.ps-photos a:focus-visible[b-9rvilyv3ve] { box-shadow: inset 0 0 0 3px var(--accent); }
.ps-photos img[b-9rvilyv3ve] { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-2) var(--ease); }
.ps-photos li:hover img[b-9rvilyv3ve] { transform: scale(1.05); }

/* faces: square tiles in a grid; the suggestions with "Ja" / "Nein" under each */
.ps-faces[b-9rvilyv3ve] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-3) 8px; }
.ps-suggestions[b-9rvilyv3ve] { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.ps-suggestion[b-9rvilyv3ve] { display: grid; gap: 6px; align-content: start; }
.ps-yesno[b-9rvilyv3ve] { display: flex; gap: 4px; }
.ps-yesno .btn[b-9rvilyv3ve] { flex: 1; padding: 0 8px; }

/* the statistics: the table of B (index.html) */
.ps-scroll[b-9rvilyv3ve] { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.ps-table[b-9rvilyv3ve] { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ps-table th[b-9rvilyv3ve], .ps-table td[b-9rvilyv3ve] { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.ps-table thead th[b-9rvilyv3ve] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.ps-table tbody tr:last-child > *[b-9rvilyv3ve] { border-bottom: 0; }
.ps-table .num[b-9rvilyv3ve] { text-align: right; font-variant-numeric: tabular-nums; }
.ps-table th[scope=row][b-9rvilyv3ve] { font-weight: 600; }
.ps-table th[scope=row] a[b-9rvilyv3ve] { color: var(--ink); text-decoration: none; }
.ps-table th[scope=row] a:hover[b-9rvilyv3ve] { text-decoration: underline; text-underline-offset: 3px; }

/* per day: a quiet bar each, light for the archive, strong for the book */
.ps-days[b-9rvilyv3ve] { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.ps-day[b-9rvilyv3ve] { display: grid; grid-template-columns: 144px minmax(0, 1fr) 48px; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.ps-day-label[b-9rvilyv3ve] { color: var(--ink-2); }
.ps-day-track[b-9rvilyv3ve] { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); }
.ps-day-archive[b-9rvilyv3ve], .ps-day-book[b-9rvilyv3ve] { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.ps-day-archive[b-9rvilyv3ve] { background: var(--accent-soft); }
.ps-day-book[b-9rvilyv3ve] { background: var(--accent); }
.ps-day-num[b-9rvilyv3ve] { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .ps[b-9rvilyv3ve]  .ps-crumb { flex: 1 1 auto; }
    .ps-top[b-9rvilyv3ve] { gap: var(--sp-3); }
    .ps-face[b-9rvilyv3ve] { width: 56px; height: 56px; }
    .ps-panel[b-9rvilyv3ve] { padding: var(--sp-4); }
    .ps-section[b-9rvilyv3ve] { margin-top: var(--sp-6); }
    .ps-photos li[b-9rvilyv3ve] { flex-basis: calc(var(--ar) * 104px); }
    .ps-faces[b-9rvilyv3ve] { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .ps-suggestions[b-9rvilyv3ve] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-day[b-9rvilyv3ve] { grid-template-columns: 104px minmax(0, 1fr) 40px; }
}

/* touch screens: every target 44 px */
@media (pointer: coarse) {
    .ps-book[b-9rvilyv3ve] { height: var(--tap); }
    .ps-yesno .btn[b-9rvilyv3ve] { --h: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-photos li:hover img[b-9rvilyv3ve] { transform: none; }
}
/* /Components/Pages/Sichten.razor.rz.scp.css */
/* Sichten: the large view (PhotoViewer) with its accent line; here only what Sichten adds to it. The view is a dark stage
   (.on-stage), so surface and ink tokens are the stage's. */
.sichten[b-r35msfy5wd] { min-height: 40vh; }
.si-pad[b-r35msfy5wd] { padding: var(--sp-4) 0; }

/* where Sichten is, in the head: "Rom › Tag 2 von 3 › nur ungesichtete ▾" (its menu chooses day and photos) */
.sichten[b-r35msfy5wd]  .si-crumb { flex: 0 1 380px; min-width: 0; }

.si-more[b-r35msfy5wd] { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); }
.si-more[b-r35msfy5wd]  .btn-ghost { --h: 32px; color: var(--ink-2); background: transparent; }
.si-more[b-r35msfy5wd]  .btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.si-more[b-r35msfy5wd]  .ask-knipsi { background: var(--surface-2); color: var(--ink-2); }

/* the closing card and the series comparison take the place of the photo: a calm card on the stage */
.si-end[b-r35msfy5wd] {
    display: grid; justify-items: center; gap: var(--sp-3); max-width: 480px; padding: var(--sp-6) var(--sp-5); text-align: center;
    background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.si-end[b-r35msfy5wd]  .i-xl { width: 40px; height: 40px; color: var(--good); }
.si-end-title[b-r35msfy5wd] { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.25; }
.si-end-text[b-r35msfy5wd] { margin: 0; color: var(--ink-2); }
.si-end-actions[b-r35msfy5wd] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.si-series[b-r35msfy5wd] {
    width: min(1100px, 100%); max-height: 100%; overflow: auto; padding: var(--sp-4); border-radius: var(--r-lg);
    background: var(--surface); color: var(--ink); box-shadow: var(--sh-3);
}

@media (max-width: 760px) {
    /* the head is narrow: the crumb (trip, day, which photos) takes the place of the photo's title and progress line */
    .sichten[b-r35msfy5wd]  .si-crumb { flex: 1 1 auto; }
    .sichten[b-r35msfy5wd]  .pv-title { display: none; }
    .si-series[b-r35msfy5wd] { border-radius: 0; padding: var(--sp-3); }
    .si-end[b-r35msfy5wd] { padding: var(--sp-5) var(--sp-4); margin: 0 var(--sp-3); }
}
/* /Components/Parts/FacePhotoViewer.razor.rz.scp.css */
/* The photo of a face on the dark stage (kit Lightbox): as large as the window allows, the face boxes on top of it.
   The height left for the photo is the window minus the lightbox's head (60 px) and its line of facts below. */
.fv-photo[b-gh7isb95xr] {
    position: relative; aspect-ratio: var(--ar, 1.5); max-width: 100%;
    width: min(100%, calc((100dvh - 190px) * var(--ar, 1.5)));
}
/* the labels of the boxes may hang below the photo, so the photo itself is rounded, not cut by its frame */
.fv-photo img[b-gh7isb95xr] {
    display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm);
    background: var(--stage-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8);
}
.fv-box[b-gh7isb95xr] {
    position: absolute; border: 2px solid color-mix(in srgb, var(--on-photo) 75%, transparent); border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
}
.fv-box.is-current[b-gh7isb95xr] { border: 3px solid var(--accent); box-shadow: 0 0 0 2px var(--on-photo), 0 1px 6px rgba(0, 0, 0, .5); }
.fv-name[b-gh7isb95xr] {
    position: absolute; left: -2px; top: 100%; margin-top: 4px; padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap;
    font-size: var(--fs-xs); font-weight: 600; color: var(--on-photo); background: color-mix(in srgb, var(--stage) 78%, transparent);
}
.fv-box.is-current .fv-name[b-gh7isb95xr] { background: var(--accent); color: var(--accent-ink); }
.fv-meta[b-gh7isb95xr], .fv-note[b-gh7isb95xr] { margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.fv-note[b-gh7isb95xr] { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 760px) {
    .fv-photo[b-gh7isb95xr] { width: min(100%, calc((100dvh - 170px) * var(--ar, 1.5))); }
    /* the head is narrow: the archive link shows only its icon (its name stays in aria-label), 44 px to tap */
    .fv-l[b-gh7isb95xr] { display: none; }
    .fv-archive[b-gh7isb95xr] { --h: var(--tap); width: var(--tap); padding: 0; justify-content: center; }
}
/* /Components/Parts/FaceTile.razor.rz.scp.css */
/* One face crop (Helles Studio): a square photo tile like the tiles on Fotos, mini icon buttons lying on the photo. */
.face-tile[b-d42kx31eu3] { position: relative; flex: none; width: 76px; aspect-ratio: 1; }
.face-tile.is-large[b-d42kx31eu3] { width: 96px; }
.face-tile.is-fill[b-d42kx31eu3] { width: 100%; }
.face-open[b-d42kx31eu3] {
    position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
    background: var(--surface-3); cursor: zoom-in;
}
.face-open img[b-d42kx31eu3] { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-2) var(--ease); }
.face-open:hover img[b-d42kx31eu3] { transform: scale(1.05); }
.face-open:focus-visible[b-d42kx31eu3] { outline: none; box-shadow: var(--focus); }
/* the person's picture: an accent ring drawn above the photo (an inset shadow on the button would lie under the image) */
.face-tile.is-starred .face-open[b-d42kx31eu3]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px var(--on-photo);
}

/* mini icon buttons on the photo: a white sign on a dark round (the stage colour, dark in both themes), a shadow for light faces */
.face-btn[b-d42kx31eu3] {
    position: absolute; top: 4px; z-index: 1; width: 26px; height: 26px;
    background: color-mix(in srgb, var(--stage) 62%, transparent); color: var(--on-photo); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
/* the icon is drawn by the Icon component, outside this component's scope */
.face-btn[b-d42kx31eu3]  .i { width: 15px; height: 15px; stroke-width: 2.4; }
.face-btn:hover[b-d42kx31eu3] { background: var(--stage); color: var(--on-photo); }
/* 44 px to hit on touch screens; the visible round stays small and off the face */
.face-btn[b-d42kx31eu3]::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.face-out[b-d42kx31eu3] { right: 4px; }
.face-out:hover[b-d42kx31eu3] { background: var(--error); }
.face-star[b-d42kx31eu3] { left: 4px; }
.face-star[aria-pressed="true"][b-d42kx31eu3] { background: var(--accent); color: var(--accent-ink); }
.face-star[aria-pressed="true"][b-d42kx31eu3]  .i { fill: currentColor; }
.face-btn:disabled:hover[b-d42kx31eu3] { background: color-mix(in srgb, var(--stage) 62%, transparent); color: var(--on-photo); }

@media (max-width: 600px) {
    .face-tile[b-d42kx31eu3] { width: 68px; }
    .face-tile.is-large[b-d42kx31eu3] { width: 84px; }
    .face-tile.is-fill[b-d42kx31eu3] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .face-open:hover img[b-d42kx31eu3] { transform: none; }
}
/* /Components/Parts/PhotoDetail.razor.rz.scp.css */
/* The details of the large view (site-fotos.html "vw-side"): sections with small capital headings, fields that look like
   text until they are touched, every field saved by itself. The view is a dark stage (.on-stage), so the tokens are the
   stage's; a lone form outside it uses the page's own. */
.detail[b-xabd5a18no] { display: grid; gap: 20px; color: var(--ink); outline: none; min-width: 0; }
.detail > *[b-xabd5a18no], .detail-form > *[b-xabd5a18no] { min-width: 0; }
.detail-form[b-xabd5a18no] { display: grid; gap: 20px; margin: 0; }

.pn-sec[b-xabd5a18no] { display: grid; gap: 8px; min-width: 0; }
.pn-h[b-xabd5a18no] {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin: 0;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.pn-h label[b-xabd5a18no] { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; }
.pn-h small[b-xabd5a18no] { font-weight: 400; letter-spacing: 0; text-transform: none; }
.pn-faint[b-xabd5a18no] { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; }
.detail-status[b-xabd5a18no] { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.detail-msg[b-xabd5a18no] { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.detail-msg:not(.is-bad)[b-xabd5a18no]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.detail-msg.is-bad[b-xabd5a18no] { color: var(--error); }
.detail-msg[b-xabd5a18no]  .i { width: 14px; height: 14px; }

/* text that becomes a field when touched */
.pn-in[b-xabd5a18no] {
    width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent; color: var(--ink); font-size: var(--fs-md); line-height: 1.45; resize: vertical;
    transition: background var(--t-1), border-color var(--t-1);
}
.pn-in:hover[b-xabd5a18no] { background: var(--surface-2); }
.pn-in:focus[b-xabd5a18no] { outline: none; background: var(--bg); border-color: var(--accent); box-shadow: var(--focus); }
.pn-in.is-title[b-xabd5a18no] { font: 600 var(--fs-lg)/1.3 var(--font-ui); resize: none; overflow: hidden; }
/* the fields grow with their text where the browser can (a long title, a caption of two lines) */
textarea.pn-in[b-xabd5a18no] { field-sizing: content; min-height: 0; }
textarea.pn-in:not(.is-title)[b-xabd5a18no] { min-height: 3.2em; }
.pn-in[b-xabd5a18no]::placeholder { color: var(--ink-3); }

/* ---- the books ---- */
.pn-here[b-xabd5a18no] {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px 8px 8px; border-radius: var(--r-md);
    background: var(--accent-soft); color: var(--ink); text-decoration: none;
}
.pn-here[b-xabd5a18no] >  .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.pn-here-text[b-xabd5a18no] { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.pn-here-text small[b-xabd5a18no] { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.pn-here-text b[b-xabd5a18no] { font-weight: 600; }
.pn-here-book[b-xabd5a18no] { font-size: var(--fs-xs); color: var(--ink-2); }
.pn-here[b-xabd5a18no]  .go, .pn-book[b-xabd5a18no]  .go { flex: none; width: 16px; height: 16px; color: var(--ink-3); align-self: center; }
.pn-notin[b-xabd5a18no] {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-md);
    background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none;
}
.pn-notin[b-xabd5a18no]  .i { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.pn-books[b-xabd5a18no] { display: grid; gap: 2px; }
.pn-book[b-xabd5a18no] {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: var(--r-md);
    color: var(--ink); font-size: var(--fs-sm); text-decoration: none;
}
.pn-book:hover[b-xabd5a18no], .pn-notin:hover[b-xabd5a18no] { background: var(--surface-3); }
.pn-book .cover-xs[b-xabd5a18no] { width: 34px; height: 24px; }
.pn-book-text[b-xabd5a18no] { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.pn-book-text b[b-xabd5a18no] { font-weight: 600; }
.pn-book-text small[b-xabd5a18no] { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- people and the picture with the faces ---- */
.people-row[b-xabd5a18no] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.person-chip[b-xabd5a18no] {
    display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 2px 0 10px; border-radius: var(--r-pill);
    background: var(--surface-2); font-size: var(--fs-xs); font-weight: 600;
}
.person-chip[b-xabd5a18no] >  .i { width: 14px; height: 14px; color: var(--ink-3); }
.person-chip a[b-xabd5a18no] { color: var(--ink); text-decoration: none; }
.person-chip a:hover[b-xabd5a18no] { color: var(--accent-text); }
.chip-x[b-xabd5a18no] {
    display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-3); cursor: pointer;
}
.chip-x[b-xabd5a18no]  .i { width: 12px; height: 12px; }
.chip-x:hover[b-xabd5a18no] { background: var(--error-soft); color: var(--error); }
.people-toggle[b-xabd5a18no] { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; color: var(--ink-2); font-size: var(--fs-xs); }
.people-toggle input[b-xabd5a18no] { width: auto; min-height: 0; }
.people-form[b-xabd5a18no] { display: grid; gap: 4px; margin: 0; }
.people-form label[b-xabd5a18no] { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.people-inline[b-xabd5a18no] { display: flex; flex-wrap: wrap; gap: 6px; }
/* 16px at least: phones zoom into smaller fields when they get the focus */
.people-inline input[b-xabd5a18no] { flex: 1 1 160px; min-width: 0; width: auto; min-height: 36px; font-size: 16px; }
.people-msg[b-xabd5a18no] { margin: 0; }
.pn-point[b-xabd5a18no] { justify-self: start; padding: 0; border: 0; background: none; font-size: var(--fs-xs); cursor: pointer; }

.detail-media[b-xabd5a18no] { display: grid; gap: 4px; }
.focus-box[b-xabd5a18no] { position: relative; width: 100%; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; cursor: crosshair; }
.focus-box img[b-xabd5a18no] { display: block; width: 100%; height: 100%; object-fit: contain; }
.focus-marker[b-xabd5a18no] {
    position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
    border: 2px solid var(--on-photo); box-shadow: 0 0 0 2px var(--accent), 0 1px 4px rgba(0, 0, 0, .5); pointer-events: none;
}
.focus-marker[b-xabd5a18no]::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); }
.detail-media video[b-xabd5a18no] { display: block; width: 100%; max-height: 40vh; background: var(--stage); border-radius: var(--r-sm); }
.face-box[b-xabd5a18no] {
    position: absolute; padding: 0; border: 2px solid color-mix(in srgb, var(--on-photo) 85%, transparent); border-radius: 4px; background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); cursor: pointer;
}
.face-box:hover[b-xabd5a18no], .face-box:focus-visible[b-xabd5a18no] { border-color: var(--accent); outline: none; }
.face-box.is-named[b-xabd5a18no] { border-color: var(--on-photo); }
.face-box.is-naming[b-xabd5a18no] { border: 3px solid var(--accent); box-shadow: 0 0 0 2px var(--on-photo); }
.face-label[b-xabd5a18no] {
    position: absolute; left: -2px; top: 100%; margin-top: 3px; padding: 0 6px; border-radius: 4px; white-space: nowrap;
    font-size: var(--fs-xs); line-height: 1.5; color: var(--on-photo); background: rgba(18, 18, 17, .75); pointer-events: none;
}
.face-box:not(.is-named) .face-label[b-xabd5a18no] { background: var(--accent); }

/* ---- place and time ---- */
.detail-pair[b-xabd5a18no] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.detail-pair > div[b-xabd5a18no] { display: grid; gap: 3px; min-width: 0; }
.detail-pair .is-wide[b-xabd5a18no] { grid-column: 1 / -1; }
.detail-pair label[b-xabd5a18no] { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.detail-pair input[b-xabd5a18no], .detail-pair select[b-xabd5a18no] {
    min-height: 36px; padding: 6px 10px; font-size: var(--fs-sm); background: var(--surface-2); color: var(--ink);
    border-color: transparent; color-scheme: inherit;
}
.detail-pair input:hover[b-xabd5a18no], .detail-pair select:hover[b-xabd5a18no] { border-color: var(--line-strong); }
.detail-pair input:focus[b-xabd5a18no], .detail-pair select:focus[b-xabd5a18no] { border-color: var(--accent); }
.detail-timehint[b-xabd5a18no] { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }
.detail-timehint.is-warn[b-xabd5a18no] { color: var(--warn); }
.detail-timehint[b-xabd5a18no]  .i { flex: none; margin-top: 1px; }

/* ---- tags ---- */
.pn-tags[b-xabd5a18no] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.info-chip[b-xabd5a18no] { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); }
.info-chip.is-cat[b-xabd5a18no] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.info-chip[b-xabd5a18no]  .i { width: 12px; height: 12px; opacity: .6; }
button.info-chip[b-xabd5a18no] { cursor: pointer; }
button.info-chip:hover[b-xabd5a18no] { background: var(--surface-3); color: var(--ink); }
.pn-tag-form[b-xabd5a18no] { flex: 1 1 110px; min-width: 110px; margin: 0; }
.pn-tag-in[b-xabd5a18no] {
    width: 100%; min-height: 30px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs);
    background: transparent; color: var(--ink); border: 1px dashed var(--line-strong);
}
.pn-tag-in:focus[b-xabd5a18no] { border-style: solid; border-color: var(--accent); outline: none; }

/* ---- Verbessern: lights up once when the head's button brings it into view (fotos.js showSection) ---- */
.pn-fix[b-xabd5a18no] { border-radius: var(--r-md); }
.pn-fix.is-flash[b-xabd5a18no] { animation: pn-flash-b-xabd5a18no 1.2s var(--ease); }
@keyframes pn-flash-b-xabd5a18no {
    0% { box-shadow: 0 0 0 0 var(--accent-soft); background: var(--accent-soft); }
    100% { box-shadow: 0 0 0 10px transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-fix.is-flash[b-xabd5a18no] { animation: none; }
}

/* ---- Ausblenden as a switch (a checkbox, so it stores like every other field) ---- */
.detail-check[b-xabd5a18no] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; cursor: pointer; }
.detail-check-text[b-xabd5a18no] { display: grid; line-height: 1.35; font-size: var(--fs-sm); color: var(--ink); }
.detail-check-text small[b-xabd5a18no] { font-size: var(--fs-xs); color: var(--ink-3); }
.detail-check input[b-xabd5a18no] {
    appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; min-height: 0; margin: 0; padding: 0;
    border: 0; border-radius: var(--r-pill); background: var(--surface-3); cursor: pointer; transition: background var(--t-1);
}
.detail-check input[b-xabd5a18no]::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--on-photo); box-shadow: var(--sh-1); transition: transform var(--t-1) var(--ease);
}
.detail-check input:checked[b-xabd5a18no] { background: var(--accent); }
.detail-check input:checked[b-xabd5a18no]::after { transform: translateX(16px); }
.detail-check input:focus-visible[b-xabd5a18no] { box-shadow: var(--focus); }

/* ---- the file's facts ---- */
.facts[b-xabd5a18no] { display: grid; gap: 8px; margin: 0; font-size: var(--fs-sm); }
.facts > div[b-xabd5a18no] { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
.facts dt[b-xabd5a18no] { color: var(--ink-3); }
.facts dd[b-xabd5a18no] { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts dd small[b-xabd5a18no] { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.facts dd .badge[b-xabd5a18no] { margin-left: 6px; }
.facts a[b-xabd5a18no] { color: var(--accent-text); text-decoration: none; }
.facts a:hover[b-xabd5a18no] { text-decoration: underline; }
.facts a[b-xabd5a18no]  .i { margin-left: 4px; vertical-align: -2px; }

.detail .btn[b-xabd5a18no] { --h: 32px; }
@media (pointer: coarse) {
    .chip-x[b-xabd5a18no] { width: var(--tap); height: var(--tap); }
    .people-inline input[b-xabd5a18no], .detail-pair input[b-xabd5a18no], .detail-pair select[b-xabd5a18no] { min-height: var(--tap); }
}
/* /Components/Parts/PhotoTile.razor.rz.scp.css */
/* One tile of the justified grid (fotos.html): its width follows the aspect ratio (--ar), the row height comes from the
   page (--row-h on .jg). No script: flex-grow does the justifying. */
.tile[b-wlodnngc3z] {
    position: relative; flex-grow: calc(var(--ar) * 100); flex-basis: calc(var(--ar) * var(--row-h, 210px));
    aspect-ratio: var(--ar); max-height: calc(var(--row-h, 210px) * 1.6); margin: 0;
    border-radius: calc(var(--r-sm) / 2); overflow: hidden; background: var(--surface-3); isolation: isolate; container-type: inline-size;
    transition: background var(--t-2); -webkit-touch-callout: none; user-select: none;
}
/* a soft shade at the top while the pointer is on it or photos are being marked: the circle and the mark stay readable */
.tile[b-wlodnngc3z]::before {
    content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 56px; pointer-events: none; opacity: 0;
    background: linear-gradient(rgba(0, 0, 0, .38), transparent); transition: opacity var(--t-1);
}
.tile:hover[b-wlodnngc3z]::before, .tile:focus-within[b-wlodnngc3z]::before, .tile:has(.t-open[aria-pressed])[b-wlodnngc3z]::before { opacity: 1; }
.t-open[b-wlodnngc3z] {
    position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit;
    background: none; cursor: zoom-in;
}
.t-open:focus-visible[b-wlodnngc3z] { box-shadow: inset 0 0 0 3px var(--accent); }
.t-open img[b-wlodnngc3z] {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease), opacity var(--t-2), filter var(--t-2), border-radius var(--t-2);
}
.tile:hover .t-open img[b-wlodnngc3z] { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
    .tile:hover .t-open img[b-wlodnngc3z], .tile.is-sel .t-open img[b-wlodnngc3z] { transform: none; }
}
.t-video[b-wlodnngc3z] { display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; color: var(--ink-2); background: var(--surface-2); }
.t-file[b-wlodnngc3z] { font-size: var(--fs-xs); color: var(--ink-3); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sorted out: pale until the pointer is on it */
.tile.is-out .t-open img[b-wlodnngc3z] { opacity: .34; filter: grayscale(.75); }
.tile.is-out:hover .t-open img[b-wlodnngc3z] { opacity: 1; filter: none; }
.tile.is-hidden-photo .t-open img[b-wlodnngc3z] { opacity: .5; }
/* only the image analysis sorted it out: a quiet label bottom right, gone while the pointer is on the tile */
.t-hint[b-wlodnngc3z] {
    position: absolute; z-index: 2; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .88); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.5; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity var(--t-1);
}
.tile:hover .t-hint[b-wlodnngc3z] { opacity: 0; }
.tile.is-current[b-wlodnngc3z] { box-shadow: 0 0 0 3px var(--accent); }

/* marking: the circle top left, from hovering or once anything is marked */
.t-sel[b-wlodnngc3z] {
    position: absolute; z-index: 3; top: 8px; left: 8px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .95); background: rgba(0, 0, 0, .18); color: transparent; display: grid; place-items: center;
    opacity: 0; transition: opacity var(--t-1), background var(--t-1);
}
.t-sel[b-wlodnngc3z]  .i { width: 14px; height: 14px; stroke-width: 3; }
.tile:hover .t-sel[b-wlodnngc3z], .t-sel:focus-visible[b-wlodnngc3z], .tile:has(.t-open[aria-pressed]) .t-sel[b-wlodnngc3z] { opacity: 1; }
.tile.is-sel[b-wlodnngc3z] { background: var(--surface-2); }
.tile.is-sel .t-open img[b-wlodnngc3z] { transform: scale(.9); border-radius: calc(var(--r-sm) - 2px); }
.tile.is-sel .t-sel[b-wlodnngc3z] { background: var(--ink); border-color: var(--ink); color: var(--bg); opacity: 1; }
/* 46 px to hit, also with a finger */
.t-sel[b-wlodnngc3z]::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }

/* the book mark top right (kit .inbook-mark: accent with a white ring, visible on red motifs) */
.t-book[b-wlodnngc3z] { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 0; border: 0; transition: transform var(--t-1); }
.t-book.inbook-mark[b-wlodnngc3z] { width: 24px; height: 24px; cursor: pointer; }
.t-book.inbook-mark[b-wlodnngc3z]  .i { width: 14px; height: 14px; }
.t-book:hover[b-wlodnngc3z] { transform: scale(1.1); }
.t-book.is-queued[b-wlodnngc3z] { background: var(--accent-hover); }
.t-book.is-missing[b-wlodnngc3z] { backdrop-filter: blur(4px); }
.t-good[b-wlodnngc3z] {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--on-photo); color: var(--good); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.t-good[b-wlodnngc3z]  .i { width: 15px; height: 15px; stroke-width: 2.6; }

/* ★ Lieblingsfoto bottom left; it gives way to the buttons on hover */
.t-star[b-wlodnngc3z] { position: absolute; z-index: 2; left: 9px; bottom: 8px; width: 22px; height: 22px; color: var(--star, var(--on-photo)); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); transition: opacity var(--t-1); }
.t-star[b-wlodnngc3z]  .i { width: 22px; height: 22px; stroke: none; }
.tile:hover .t-star[b-wlodnngc3z] { opacity: 0; }

.t-flags[b-wlodnngc3z] { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: flex; gap: 4px; transition: opacity var(--t-1); }
.tile:hover .t-flags[b-wlodnngc3z] { opacity: 0; }
.t-stack[b-wlodnngc3z], .t-flag[b-wlodnngc3z] {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-pill);
    background: rgba(18, 18, 17, .62); color: var(--on-photo); font-size: var(--fs-xs); font-weight: 600; backdrop-filter: blur(6px);
}
.t-stack[b-wlodnngc3z]  .i, .t-flag[b-wlodnngc3z]  .i { width: 14px; height: 14px; }
/* a series: the photo lies on a small stack */
.tile[data-series]:not([data-series=""])[b-wlodnngc3z] { box-shadow: 4px -4px 0 -1px var(--surface-3), 8px -8px 0 -2px var(--line-strong); overflow: visible; }
.tile[data-series]:not([data-series=""]) .t-open[b-wlodnngc3z] { overflow: hidden; }

/* the buttons that come with the pointer */
.t-actions[b-wlodnngc3z] {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 34px 8px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55)); opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity var(--t-1), transform var(--t-2) var(--ease);
}
.tile:hover .t-actions[b-wlodnngc3z], .t-actions:focus-within[b-wlodnngc3z] { opacity: 1; transform: none; pointer-events: auto; }
.t-picks[b-wlodnngc3z] { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: rgba(18, 18, 17, .55); backdrop-filter: blur(8px); }
.t-picks button[b-wlodnngc3z] {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: rgba(255, 255, 255, .85); display: grid; place-items: center;
}
.t-picks button:hover[b-wlodnngc3z] { background: rgba(255, 255, 255, .18); color: var(--on-photo); }
.t-picks button[b-wlodnngc3z]  .i { width: 15px; height: 15px; stroke-width: 2.4; }
.t-picks button[aria-pressed="true"][b-wlodnngc3z] { background: var(--on-photo); color: var(--stage); }
.t-picks button[data-pick="hero"][aria-pressed="true"][b-wlodnngc3z]  .i { fill: currentColor; }
/* the suggestion of the image analysis: a dashed ring until somebody decides */
.t-picks button.is-suggested[b-wlodnngc3z] { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
.t-bookbtn[b-wlodnngc3z] {
    height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 9px; border: 0; border-radius: var(--r-pill);
    background: var(--on-photo); color: var(--stage); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap;
}
.t-bookbtn[b-wlodnngc3z]  .i { width: 15px; height: 15px; stroke-width: 2.2; }
.t-bookbtn.on[b-wlodnngc3z] { background: rgba(18, 18, 17, .6); color: var(--on-photo); backdrop-filter: blur(8px); }
.t-bookbtn.on:hover[b-wlodnngc3z] { background: var(--on-photo); color: var(--accent-text); }
@container (max-width: 250px) {
    .t-bookbtn span[b-wlodnngc3z] { display: none; }
    .t-bookbtn[b-wlodnngc3z] { padding: 0; width: 32px; justify-content: center; }
}
@container (max-width: 175px) {
    .t-picks button[data-pick="hero"][b-wlodnngc3z], .t-picks button[data-pick="vielleicht"][b-wlodnngc3z] { display: none; }
}

/* phones: no buttons on tiles, only the marks; a long press marks */
@media (max-width: 760px) {
    .tile[b-wlodnngc3z] { border-radius: 3px; }
    .tile:hover .t-open img[b-wlodnngc3z] { transform: none; }
    .t-actions[b-wlodnngc3z], .t-sel[b-wlodnngc3z] { display: none; }
    .tile.is-sel .t-sel[b-wlodnngc3z] { display: grid; top: 5px; left: 5px; width: 22px; height: 22px; }
    .t-book[b-wlodnngc3z] { top: 5px; right: 5px; }
    .t-book.inbook-mark[b-wlodnngc3z] { width: 22px; height: 22px; }
    .t-book.inbook-mark[b-wlodnngc3z]  .i { width: 12px; height: 12px; }
    .t-good[b-wlodnngc3z] { width: 20px; height: 20px; }
    .t-star[b-wlodnngc3z] { left: 5px; bottom: 4px; width: 16px; height: 16px; }
    .t-star[b-wlodnngc3z]  .i { width: 16px; height: 16px; }
    .tile:hover .t-star[b-wlodnngc3z], .tile:hover .t-flags[b-wlodnngc3z] { opacity: 1; }
    .t-flags[b-wlodnngc3z] { right: 4px; bottom: 4px; }
    .t-stack[b-wlodnngc3z], .t-flag[b-wlodnngc3z] { height: 20px; padding: 0 6px; }
}
/* /Components/Parts/PhotoViewer.razor.rz.scp.css */
/* The large view in Helles Studio (site-fotos.html "viewer") on top of the kit's Lightbox: dark in both themes, the
   Lightbox carries .on-stage, so the surface and ink tokens are the stage's here. The page's own parts are styled here,
   the kit's frame through ::deep. */

/* ---- frame: head 60 px, photo column, details column (360 px; I hides it) ---- */
.pv-host[b-3uutlpu3x3]  .lightbox.pv { grid-template-columns: minmax(0, 1fr) 0; grid-template-rows: 60px minmax(0, 1fr) auto; }
.pv-host[b-3uutlpu3x3]  .lightbox.pv.has-info { grid-template-columns: minmax(0, 1fr) 360px; }
/* Sichten: the accent line is a row of its own */
.pv-host[b-3uutlpu3x3]  .lightbox.pv.is-review { grid-template-rows: 60px auto minmax(0, 1fr) auto; }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-top { grid-column: 1 / -1; gap: 10px; min-height: 60px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-title { display: none; }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-top .btn { --h: 36px; padding: 0 12px; font-size: var(--fs-sm); background: transparent; color: var(--ink-2); }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-top .btn:hover { background: var(--surface-2); color: var(--ink); }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-top .btn .i { width: 17px; height: 17px; }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-progress { grid-column: 1 / -1; height: 3px; }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-stage { grid-column: 1; padding: 20px 76px; overflow: hidden; }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-aside {
    grid-column: 2; grid-row: 2 / -1; width: auto; min-width: 0; padding: 18px 18px 32px; overflow-x: hidden; overflow-y: auto;
    background: var(--surface); border-left: 1px solid var(--line);
}
.pv-host[b-3uutlpu3x3]  .lightbox.pv.is-review .lightbox-aside { grid-row: 3 / -1; }
.pv-host[b-3uutlpu3x3]  .pv .lightbox-bottom { grid-column: 1; display: grid; justify-items: center; gap: 8px; padding: 0 12px 16px; }

.pv-title[b-3uutlpu3x3] { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.pv-title b[b-3uutlpu3x3] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title span[b-3uutlpu3x3] { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv-photo[b-3uutlpu3x3] { display: block; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 2px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.pv-video[b-3uutlpu3x3] { display: block; max-width: 100%; max-height: 100%; border-radius: 2px; background: var(--stage); }
.pv-preload[b-3uutlpu3x3] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- the dock under the photo: one pill with the decision and the book ---- */
.pv-suggest[b-3uutlpu3x3] { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); color: var(--warn); }
.pv-suggest[b-3uutlpu3x3]  .i { width: 14px; height: 14px; }
.dock[b-3uutlpu3x3] {
    display: flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none;
    border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1);
}
.dock[b-3uutlpu3x3]::-webkit-scrollbar { display: none; }
.dock-seg[b-3uutlpu3x3] { display: flex; gap: 2px; }
.dock-btn[b-3uutlpu3x3] {
    display: inline-flex; align-items: center; gap: 7px; flex: none; height: 38px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.dock-btn[b-3uutlpu3x3]  .i { width: 18px; height: 18px; }
.dock-btn:hover[b-3uutlpu3x3] { background: var(--surface-2); color: var(--ink); }
.dock-btn kbd[b-3uutlpu3x3] { background: var(--surface-3); color: var(--ink-3); }
.dock-btn[aria-pressed="true"][b-3uutlpu3x3] { background: var(--ink); color: var(--bg); }
.dock-btn[aria-pressed="true"] kbd[b-3uutlpu3x3] { background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; }
.dock-btn[data-pick="hero"][aria-pressed="true"][b-3uutlpu3x3]  .i { fill: currentColor; }
/* the suggestion of the image analysis: a dashed ring until somebody decides */
.dock-btn.is-suggested[b-3uutlpu3x3] { box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--ink); }
.dock-btn:disabled[b-3uutlpu3x3] { opacity: .6; cursor: default; }
.dock-sep[b-3uutlpu3x3] { flex: none; width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line-strong); }
.dock-book[b-3uutlpu3x3] { padding-left: 8px; }
.dock-book .cover-xs[b-3uutlpu3x3] { width: 30px; height: 21px; }
.dock-book.is-primary[b-3uutlpu3x3] { padding: 0 14px 0 8px; background: var(--accent); color: var(--accent-ink); }
.dock-book.is-primary:hover[b-3uutlpu3x3] { background: var(--accent-hover); color: var(--accent-ink); }
.dock-book.is-primary kbd[b-3uutlpu3x3] { background: color-mix(in srgb, var(--accent-ink) 22%, transparent); color: var(--accent-ink); }

/* ---- details ---- */
.pv-info[b-3uutlpu3x3] { display: grid; align-content: start; color: var(--ink); }
.pv-correct-now[b-3uutlpu3x3] { margin: 0 0 4px; }

@media (max-width: 900px) {
    .pv-host[b-3uutlpu3x3]  .lightbox.pv.has-info { grid-template-columns: minmax(0, 1fr) 300px; }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-stage { padding: 16px 60px; }
}

/* ---- phones: one scrolling column – photo, dock, then every detail (no sheet over the photo) ---- */
@media (max-width: 760px) {
    .pv-host[b-3uutlpu3x3]  .lightbox.pv, .pv-host[b-3uutlpu3x3]  .lightbox.pv.has-info, .pv-host[b-3uutlpu3x3]  .lightbox.pv.is-review {
        grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px auto auto auto auto; overflow-y: auto; overscroll-behavior: contain;
    }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-top { position: sticky; top: 0; z-index: 3; min-height: 56px; padding: 0 6px 0 4px; background: var(--bg); }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-top .btn { width: 40px; padding: 0; justify-content: center; }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-top .btn .lbl { display: none; }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-progress { position: sticky; top: 56px; z-index: 3; }
    /* in reading order: head, (accent line), photo, dock, details – the details come after the dock in the markup's grid */
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-stage { grid-row: 2; height: 58vh; height: 58dvh; padding: 10px 0; }
    .pv-host[b-3uutlpu3x3]  .lightbox.pv.is-review .lightbox-stage { grid-row: 3; }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-nav { display: none; }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-bottom { grid-row: 3; padding: 4px 8px 12px; }
    .pv-host[b-3uutlpu3x3]  .lightbox.pv.is-review .lightbox-bottom { grid-row: 4; }
    .pv-host[b-3uutlpu3x3]  .lightbox.pv.is-review .lightbox-aside { grid-row: 5; }
    .pv-host[b-3uutlpu3x3]  .pv .lightbox-aside {
        display: block; grid-column: 1; grid-row: 4; padding: 18px 16px calc(40px + env(safe-area-inset-bottom, 0px));
        overflow: visible; border-left: 0; border-top: 1px solid var(--line);
    }
    .pv-photo[b-3uutlpu3x3] { border-radius: 0; box-shadow: none; }
    .dock[b-3uutlpu3x3] { justify-self: stretch; justify-content: space-between; }
    .dock-btn[b-3uutlpu3x3] { padding: 0 10px; min-height: var(--tap); }
    .dock-btn .lbl[b-3uutlpu3x3], .dock-btn kbd[b-3uutlpu3x3] { display: none; }
    .dock-book .lbl[b-3uutlpu3x3] { display: inline; }
    .dock-book[b-3uutlpu3x3] { padding: 0 12px 0 6px; }
}

/* the draft of "Verbessern" turns smoothly */
.pv-photo.is-draft[b-3uutlpu3x3] { transition: transform var(--t-2) var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .pv-photo.is-draft[b-3uutlpu3x3] { transition: none; }
}
/* /Components/Parts/SeriesCompare.razor.rz.scp.css */
/* "Serie vergleichen": the photos of a series side by side (Helles Studio: tokens only; on the dark stage of Sichten the
   tokens are the stage's). */
.sc[b-p9zmd0hzy8] { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; color: var(--ink); }
.sc:focus[b-p9zmd0hzy8] { outline: none; }
.sc-head[b-p9zmd0hzy8] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); }
.sc-title[b-p9zmd0hzy8] { margin: 0; font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 600; }
/* also inside the dark large view of Sichten the buttons keep the colours of the card */
.sc .btn[b-p9zmd0hzy8] { background: var(--surface-2); color: var(--ink); }
.sc .btn:hover[b-p9zmd0hzy8] { background: var(--surface-3); }
.sc .btn-primary[b-p9zmd0hzy8] { background: var(--accent); color: var(--accent-ink); }
.sc .btn-ghost[b-p9zmd0hzy8] { background: transparent; color: var(--ink-2); }
.sc .btn.is-on[b-p9zmd0hzy8] { background: var(--ink); color: var(--bg); }
.sc-error[b-p9zmd0hzy8] { margin: 0; }

/* two to six photos per row: as many as fit with at least ~150 px each */
.sc-grid[b-p9zmd0hzy8] {
    list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--sp-3);
}
@media (min-width: 1100px) { .sc-grid[b-p9zmd0hzy8] { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.sc-item[b-p9zmd0hzy8] { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; transition: box-shadow var(--t-1); }
.sc-item.is-kept[b-p9zmd0hzy8] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.sc-photo[b-p9zmd0hzy8] { display: block; aspect-ratio: var(--a); background: var(--surface-3); border-radius: var(--r-sm); overflow: hidden; }
.sc-photo img[b-p9zmd0hzy8] { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-meta[b-p9zmd0hzy8] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); font-size: var(--fs-sm); }
.sc-time[b-p9zmd0hzy8] { color: var(--ink-2); }
.sc-stars[b-p9zmd0hzy8] { color: var(--warn); letter-spacing: .05em; }
.sc-pick.is-suggestion[b-p9zmd0hzy8] { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
.sc-issues[b-p9zmd0hzy8] { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-take[b-p9zmd0hzy8] { min-height: var(--tap); }
.sc-check[b-p9zmd0hzy8] { display: flex; align-items: center; gap: 6px; margin: 0; min-height: var(--tap); color: var(--ink); font-size: var(--fs-md); }
.sc-check input[b-p9zmd0hzy8] { width: 20px; height: 20px; min-height: 0; }
.sc-actions[b-p9zmd0hzy8] { padding-top: 4px; }

/* the dialog on the photo page */
.sc-modal[b-p9zmd0hzy8] {
    position: fixed; z-index: var(--z-sheet); left: 50%; top: calc(var(--header-h) + var(--sp-4)); transform: translateX(-50%);
    width: min(1200px, calc(100vw - var(--sp-6))); max-height: calc(100dvh - var(--header-h) - var(--sp-6));
    padding: var(--sp-5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    animation: fade-in var(--t-2) var(--ease);
}
.sc-backdrop[b-p9zmd0hzy8] { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: var(--scrim); animation: fade-in var(--t-2) var(--ease); }
@media (max-width: 600px) {
    /* two side by side even on the smallest phones: comparing is the point */
    .sc-grid[b-p9zmd0hzy8] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .sc-item[b-p9zmd0hzy8] { padding: 4px; }
    .sc-take[b-p9zmd0hzy8] { padding: 4px 6px; font-size: var(--fs-sm); }
    /* ends above the phone's bottom bar (it lies on top of this dialog): the last row and "Auswahl übernehmen" stay reachable */
    .sc-modal[b-p9zmd0hzy8] { top: var(--header-h); width: 100vw; max-height: calc(100dvh - var(--header-h) - var(--bottom-bar-h, 0px)); border-radius: 0; padding: var(--sp-3); }
}
/* /Components/Providers/AppliesTo.razor.rz.scp.css */
/* "CEWE FOTOBUCH bei dm Foto – hergestellt von CEWE": the line in bold, shop and maker as quiet links */
.applies[b-7lxvnequpe] { display: grid; gap: 1px; min-width: 0; }
.applies-line[b-7lxvnequpe] { color: var(--ink); font-size: var(--fs-md); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.applies-line:hover[b-7lxvnequpe] { text-decoration: underline; text-underline-offset: 3px; }
.applies-rest[b-7lxvnequpe] { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.applies-rest a[b-7lxvnequpe] { color: var(--ink-2); text-underline-offset: 3px; }
.applies-rest a:hover[b-7lxvnequpe] { color: var(--ink); }
.applies-unsure[b-7lxvnequpe] { color: var(--warn); white-space: nowrap; }
/* /Components/Providers/CompareToggle.razor.rz.scp.css */
/* "Vergleich": a quiet ghost button; in the comparison it carries the tint of an active choice */
.cmp-toggle[b-gpabz52qvp] { white-space: nowrap; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cmp-toggle.is-on[b-gpabz52qvp] { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.cmp-toggle.is-on:hover[b-gpabz52qvp] { background: var(--accent-soft); color: var(--accent-text); }
@media (pointer: coarse) {
    .cmp-toggle[b-gpabz52qvp] { --h: var(--tap); }
}
/* /Components/Providers/CompareTray.razor.rz.scp.css */
/* the comparison as the kit's dark pill (.float-bar): sticky at the bottom of the window while the page scrolls,
   on phones above the bottom bar (--bottom-bar-h, 0 px elsewhere) */
.tray[b-nc2zk4yx6d] {
    position: sticky; bottom: calc(var(--bottom-bar-h, 0px) + 16px); z-index: 20; display: flex; width: fit-content; max-width: min(960px, 100%);
    margin: var(--sp-5) auto 0; padding: 4px 4px 4px 16px; white-space: normal;
}
.tray-count[b-nc2zk4yx6d] { flex: none; font-weight: 600; white-space: nowrap; margin-right: var(--sp-2); }
.tray-items[b-nc2zk4yx6d] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tray-items li[b-nc2zk4yx6d] {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 28px; padding: 0 2px 0 10px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--inverse-ink) 12%, transparent); font-size: var(--fs-xs);
}
.tray-items li span[b-nc2zk4yx6d] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.tray-remove[b-nc2zk4yx6d] {
    display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: inherit; cursor: pointer;
}
.tray-remove:hover[b-nc2zk4yx6d] { background: color-mix(in srgb, var(--inverse-ink) 18%, transparent); }
.tray-remove[b-nc2zk4yx6d]  .i { width: 14px; height: 14px; }
.tray-hint[b-nc2zk4yx6d] { padding: 0 8px; color: color-mix(in srgb, var(--inverse-ink) 70%, transparent); font-size: var(--fs-xs); white-space: nowrap; }

@media (max-width: 600px) {
    /* clear of the mascot in the bottom right corner */
    .tray[b-nc2zk4yx6d] { margin: var(--sp-5) 84px 0 0; }
    .tray-items[b-nc2zk4yx6d] { display: none; }
}
@media (pointer: coarse) {
    .tray-remove[b-nc2zk4yx6d] { width: var(--tap); height: var(--tap); }
}
/* /Components/Providers/CompareView.razor.rz.scp.css */
/* Two to four lines side by side, in the B table look: the first column stays put while a wide comparison scrolls */
.cmp-lead[b-64l6bi8ptv] { max-width: 80ch; margin: 0 0 var(--sp-3); color: var(--ink-2); }
.cmp-add[b-64l6bi8ptv] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); max-width: 640px; margin-bottom: var(--sp-4); }
.cmp-add label[b-64l6bi8ptv] { margin: 0; }
.cmp-add select[b-64l6bi8ptv] { flex: 1 1 220px; width: auto; min-width: 0; font-size: max(16px, var(--fs-sm)); }
.cmp-empty[b-64l6bi8ptv] { max-width: 720px; }

/* position: the visually hidden "(bester Wert)" (.sr-only, absolute) must be placed against this scroller, or it widens
   the phone page by the table's overflow (gate "site", same as PrintChooser's list) */
.cmp-wrap[b-64l6bi8ptv] { position: relative; max-width: 100%; overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.cmp[b-64l6bi8ptv] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.cmp th[b-64l6bi8ptv], .cmp td[b-64l6bi8ptv] { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.cmp thead th[b-64l6bi8ptv], .cmp thead td[b-64l6bi8ptv] { min-width: 180px; background: var(--surface-2); vertical-align: bottom; color: var(--ink); }
.cmp thead th[b-64l6bi8ptv] { font-weight: 400; }
.cmp tbody tr:last-child > *[b-64l6bi8ptv] { border-bottom: 0; }
.cmp tbody th[scope=row][b-64l6bi8ptv], .cmp-corner[b-64l6bi8ptv] {
    position: sticky; left: 0; z-index: 1; width: 152px; min-width: 128px; max-width: 176px;
    background: var(--surface); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600;
}
.cmp-corner[b-64l6bi8ptv] { background: var(--surface-2) !important; }
.cmp td[b-64l6bi8ptv] { min-width: 144px; overflow-wrap: anywhere; }
.cmp td.is-best[b-64l6bi8ptv] { background: var(--good-soft); color: var(--good); font-weight: 600; }
.cmp-section th[b-64l6bi8ptv] { padding-top: 16px; background: var(--surface); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cmp-section th[scope=colgroup][b-64l6bi8ptv] { position: static; }
.cmp-remove[b-64l6bi8ptv] { margin-top: var(--sp-2); }
.cmp-small[b-64l6bi8ptv] { margin-top: var(--sp-1); color: var(--ink-3); font-size: var(--fs-xs); }
.cmp-actions[b-64l6bi8ptv] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.cmp-actions a[b-64l6bi8ptv] { color: var(--ink-2); text-underline-offset: 3px; }

@media (max-width: 560px) {
    .cmp[b-64l6bi8ptv] { font-size: var(--fs-xs); }
    .cmp thead th[b-64l6bi8ptv], .cmp thead td[b-64l6bi8ptv] { min-width: 152px; }
    .cmp tbody th[scope=row][b-64l6bi8ptv], .cmp-corner[b-64l6bi8ptv] { width: 104px; min-width: 104px; }
    .cmp td[b-64l6bi8ptv] { min-width: 128px; }
}
/* /Components/Providers/FilterBar.razor.rz.scp.css */
/* Filters of the research views (Helles Studio): one row - the kit's search field, 32 px chips, "Mehr Filter" as a pop */
.fbar[b-003mrwv7mf] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.fbar-field-search[b-003mrwv7mf] { flex: 1 1 260px; max-width: 420px; margin: 0; }
/* 16px at least: phones zoom into smaller fields when they get the focus */
.fbar-search[b-003mrwv7mf] { font-size: max(16px, var(--fs-sm)); }
.fbar-chips[b-003mrwv7mf] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fbar-term[b-003mrwv7mf] { display: inline-flex; align-items: center; gap: 2px; }
.fbar-chips[b-003mrwv7mf]  .fbar-more-btn { white-space: nowrap; }
.fbar-chips[b-003mrwv7mf]  .fbar-more-btn .i { width: 16px; height: 16px; }

/* the pop: a small form of three selects and one switch (kit .pop is the panel) */
.fbar-chips[b-003mrwv7mf]  .fbar-pop { width: min(340px, calc(100vw - 24px)); max-width: min(340px, calc(100vw - 24px)); padding: 14px 16px 16px; }
.fbar-more[b-003mrwv7mf] { display: grid; gap: var(--sp-3); }
.fbar-pop-label[b-003mrwv7mf] { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fbar-more label[b-003mrwv7mf] { margin: 0 0 var(--sp-1); }
.fbar-check[b-003mrwv7mf] { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: var(--fs-sm); }
.fbar-check input[b-003mrwv7mf] { width: auto; min-height: 0; }
.fbar-field select[b-003mrwv7mf] { font-size: max(16px, var(--fs-sm)); }

@media (pointer: coarse) {
    .fbar-chips .chip[b-003mrwv7mf], .fbar-chips[b-003mrwv7mf]  .fbar-more-btn { height: var(--tap); }
}
/* /Components/Providers/LineCard.razor.rz.scp.css */
/* One product line on its shop's page (and in the Drucken panel): a calm card, facts as a list, prices as a B table */
.line[b-cuflsgf8gl] { display: grid; gap: var(--sp-3); scroll-margin-top: calc(var(--header-h) + 16px); }
.line:target[b-cuflsgf8gl] { box-shadow: inset 0 0 0 2px var(--line-strong), var(--sh-2); }
.line-head[b-cuflsgf8gl] { display: flex; align-items: flex-start; gap: var(--sp-3); }
.line-title[b-cuflsgf8gl] { flex: 1; min-width: 0; }
.line-title h3[b-cuflsgf8gl] { margin: 0 0 2px; font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.line-maker[b-cuflsgf8gl] { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.line-maker a[b-cuflsgf8gl] { color: var(--ink); text-underline-offset: 3px; }
.line-evidence[b-cuflsgf8gl] { max-width: 80ch; margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.line-evidence b[b-cuflsgf8gl] { color: var(--ink); font-weight: 600; }
.line h4[b-cuflsgf8gl] { margin: var(--sp-2) 0 0; color: var(--ink-3); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* places in the rankings and grades: quiet pills, the place in bold */
.line-places[b-cuflsgf8gl] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* inline-block, not flex: the space between "Qualität" and its number must stay */
.line-places li[b-cuflsgf8gl] { display: inline-block; height: 26px; line-height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); }
.line-places a[b-cuflsgf8gl] { color: inherit; text-decoration: none; }
.line-places a:hover[b-cuflsgf8gl] { color: var(--ink); text-decoration: underline; }
.line-places strong[b-cuflsgf8gl] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.line-facts[b-cuflsgf8gl] { margin: 0; display: grid; gap: 6px; }
.line-facts > div[b-cuflsgf8gl] { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-3); }
.line-facts dt[b-cuflsgf8gl] { color: var(--ink-3); font-size: var(--fs-sm); }
.line-facts dd[b-cuflsgf8gl] { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.line-formats[b-cuflsgf8gl] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.line-formats li[b-cuflsgf8gl] { padding: 1px 8px; border-radius: 6px; background: var(--surface-2); font-size: var(--fs-xs); }

.line-highlights[b-cuflsgf8gl] { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.line-highlights li[b-cuflsgf8gl]::marker { content: "★ "; color: var(--ink-3); }

.line-book[b-cuflsgf8gl] { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.line-book-price strong[b-cuflsgf8gl] { color: var(--ink); font-variant-numeric: tabular-nums; }

.prices[b-cuflsgf8gl] { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prices th[b-cuflsgf8gl], .prices td[b-cuflsgf8gl] { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.prices thead th[b-cuflsgf8gl] { background: var(--surface-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
.prices tbody tr:last-child > *[b-cuflsgf8gl] { border-bottom: 0; }
.prices .num[b-cuflsgf8gl] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prices td.num[b-cuflsgf8gl] { color: var(--ink); }
.prices tbody th[b-cuflsgf8gl] { font-weight: 400; }
.price-baseline[b-cuflsgf8gl] { display: block; color: var(--ink); font-weight: 600; }
.price-config[b-cuflsgf8gl] { display: block; color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.price-source[b-cuflsgf8gl] { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.price-source a[b-cuflsgf8gl] { color: inherit; }
.price-billed[b-cuflsgf8gl] { display: block; color: var(--ink-3); font-size: var(--fs-xs); }

.line-tests[b-cuflsgf8gl] { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.line-tests li + li[b-cuflsgf8gl] { margin-top: var(--sp-1); }

/* phones: each price becomes a small block, the numbers in a row below the description */
@media (max-width: 560px) {
    .line-facts > div[b-cuflsgf8gl] { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .prices thead[b-cuflsgf8gl] { display: none; }
    .prices[b-cuflsgf8gl], .prices tbody[b-cuflsgf8gl] { display: block; }
    .prices tr[b-cuflsgf8gl] {
        display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 2px 10px;
        padding: 8px 0; border-bottom: 1px solid var(--line);
    }
    .prices tbody tr:last-child[b-cuflsgf8gl] { border-bottom: 0; }
    .prices th[b-cuflsgf8gl], .prices td[b-cuflsgf8gl] { padding: 0; border: 0; }
    .prices tbody th[b-cuflsgf8gl] { grid-column: 1 / -1; }
    .prices td.num[b-cuflsgf8gl] { text-align: left; white-space: normal; }
    .prices td[b-cuflsgf8gl]::before { content: attr(data-label); display: block; color: var(--ink-3); font-size: 11px; }
}
/* /Components/Providers/LineFacts.razor.rz.scp.css */
.facts[b-2r5gwk7ukr] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.facts .badge[b-2r5gwk7ukr] { height: 22px; padding: 0 8px; font-size: 11px; }
/* /Components/Providers/ManufacturerView.razor.rz.scp.css */
/* Who prints for whom: one calm card per manufacturer, the shops and their lines inside */
.mk-lead[b-q20ialg71p] { max-width: 80ch; margin: 0 0 var(--sp-4); color: var(--ink-2); }
.mk-back[b-q20ialg71p] { margin: 0 0 var(--sp-3); }
.mk-empty[b-q20ialg71p] { max-width: 720px; }
.mk-grid[b-q20ialg71p] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--sp-3); align-items: start; }
.mk[b-q20ialg71p] { display: grid; gap: var(--sp-2); scroll-margin-top: calc(var(--header-h) + 16px); }
.mk.is-focus[b-q20ialg71p] { max-width: 640px; box-shadow: inset 0 0 0 2px var(--line-strong), var(--sh-1); }
.mk h3[b-q20ialg71p] { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.mk-meta[b-q20ialg71p] { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.mk-company[b-q20ialg71p] { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.mk-note[b-q20ialg71p] { margin: 0; font-size: var(--fs-sm); }
.mk-shops[b-q20ialg71p] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.mk-shops > li[b-q20ialg71p] { padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.mk-shop[b-q20ialg71p] { font-weight: 600; }
.mk-shop .muted[b-q20ialg71p] { font-weight: 400; font-size: var(--fs-sm); }
.mk-lines[b-q20ialg71p] { list-style: none; margin: var(--sp-1) 0 0; padding: 0 0 0 14px; display: grid; gap: 2px; font-size: var(--fs-sm); }
.mk-lines li[b-q20ialg71p] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-site[b-q20ialg71p] { margin: 0; font-size: var(--fs-sm); }
.mk a[b-q20ialg71p] { color: var(--ink); text-underline-offset: 3px; }

.mk-own[b-q20ialg71p] { max-width: 1120px; margin-top: var(--sp-6); }
.mk-own h3[b-q20ialg71p] { margin-bottom: var(--sp-1); }
.mk-own > p[b-q20ialg71p] { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.mk-own-list[b-q20ialg71p] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); gap: 4px var(--sp-4); }
.mk-own-list li[b-q20ialg71p] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mk-own-list .muted[b-q20ialg71p] { font-size: var(--fs-sm); }

.mk-unknown[b-q20ialg71p] { max-width: 720px; margin-top: var(--sp-5); }
.mk-unknown[b-q20ialg71p]  .disclosure-body { padding: 0 4px 16px; }
.mk-unknown p[b-q20ialg71p] { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.mk-unknown ul[b-q20ialg71p] { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
/* /Components/Providers/PriceCalculatorView.razor.rz.scp.css */
/* The price calculator: the kit's fields in one calm card, the result as rows with the price large and tabular */
.calc-lead[b-969dy9267n] { max-width: 80ch; margin: 0 0 var(--sp-4); color: var(--ink-2); }
.calc-form[b-969dy9267n] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); max-width: 960px; margin-bottom: var(--sp-4); padding: var(--sp-4); }
.calc-field[b-969dy9267n] { min-width: 0; }
.calc-field.is-wide[b-969dy9267n] { flex: 1 1 260px; max-width: 480px; }
.calc-field label[b-969dy9267n] { margin: 0 0 var(--sp-1); }
.calc-field input[b-969dy9267n] { width: 112px; font-size: max(16px, var(--fs-md)); font-variant-numeric: tabular-nums; }
.calc-field select[b-969dy9267n] { width: 100%; font-size: max(16px, var(--fs-sm)); text-overflow: ellipsis; }
.calc-check[b-969dy9267n] { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 10px; color: var(--ink); font-size: var(--fs-sm); }
.calc-check input[b-969dy9267n] { width: auto; min-height: 0; }
.calc-quick[b-969dy9267n] { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.calc-empty[b-969dy9267n] { max-width: 720px; }
.calc-count[b-969dy9267n] { margin: 0 0 var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); }

/* the rows are grids, so the list shows no numbers: no indent for them either (the order is the price) */
.calc-list[b-969dy9267n] { display: grid; gap: var(--sp-2); max-width: 960px; margin: 0; padding: 0; list-style: none; }
.calc-row[b-969dy9267n] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
    padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1);
}
.calc-main[b-969dy9267n] { display: grid; gap: 4px; min-width: 0; }
.calc-how[b-969dy9267n] { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.calc-side[b-969dy9267n] { display: grid; justify-items: end; gap: 4px; }
.calc-price[b-969dy9267n] { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-ship[b-969dy9267n] { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.calc-more[b-969dy9267n] { max-width: 960px; margin-top: var(--sp-4); }
.calc-more[b-969dy9267n]  .disclosure-body { padding: 0 4px 16px; }
.calc-more ul[b-969dy9267n] { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.calc-none[b-969dy9267n] { margin-top: var(--sp-4); color: var(--ink-2); font-size: var(--fs-sm); }

@media (max-width: 560px) {
    .calc-row[b-969dy9267n] { grid-template-columns: minmax(0, 1fr); }
    .calc-side[b-969dy9267n] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (pointer: coarse) {
    .calc-quick .chip[b-969dy9267n] { height: var(--tap); }
}
/* /Components/Providers/PrintChoiceDetail.razor.rz.scp.css */
/* The chosen printer below the recommendations (site-drucken.html .dp-detail): one card, everything open */
.dp-detail[b-fdl1i3o09e] {
    margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1);
    scroll-margin-top: calc(var(--header-h) + 16px); animation: fade-in var(--t-2) var(--ease);
}
.dd-head[b-fdl1i3o09e] { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dd-head-txt[b-fdl1i3o09e] { min-width: 0; }
.dd-head h2[b-fdl1i3o09e] { margin: 0; font-size: var(--fs-xl); overflow-wrap: anywhere; }
.dd-head small[b-fdl1i3o09e] { display: block; color: var(--ink-3); font-size: var(--fs-sm); }
.mono[b-fdl1i3o09e] {
    display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--mono, var(--surface-3)); color: var(--on-photo); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
}

/* photo first: the cover and a spread as the print renderer draws them, on a light stage */
.dd-preview[b-fdl1i3o09e] {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: end; gap: 28px; margin: 0 0 var(--sp-5); padding: 28px 28px 18px;
    border-radius: var(--r-md); background: radial-gradient(ellipse at 50% 40%, var(--surface) 0%, transparent 75%), var(--bg);
}
.dd-cover[b-fdl1i3o09e], .dd-spread[b-fdl1i3o09e] { display: grid; gap: 10px; margin: 0; min-width: 0; }
.dd-cover[b-fdl1i3o09e] { justify-items: center; }
.dd-cover .book3d[b-fdl1i3o09e] { width: 100%; }
.dd-spr[b-fdl1i3o09e] { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--surface-3); box-shadow: var(--sh-spread); }
.dd-spr img[b-fdl1i3o09e] { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-cover figcaption[b-fdl1i3o09e], .dd-spread figcaption[b-fdl1i3o09e] { color: var(--ink-3); font-size: var(--fs-xs); text-align: center; }

.dd-grid[b-fdl1i3o09e] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.dd-sec[b-fdl1i3o09e] { display: grid; align-content: start; gap: 8px; min-width: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.dd-sec.is-wide[b-fdl1i3o09e] { grid-column: 1 / -1; }
.dd-sec p[b-fdl1i3o09e] { margin: 0; overflow-wrap: anywhere; }
.dd-sec p b[b-fdl1i3o09e] { color: var(--ink); font-weight: 600; }
.dd-sec ul[b-fdl1i3o09e] { margin: 0; padding-left: 18px; }
.dd-h[b-fdl1i3o09e] { margin: 0; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dd-how[b-fdl1i3o09e] { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.price-tbl[b-fdl1i3o09e] { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.price-tbl td[b-fdl1i3o09e] { padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.price-tbl td:last-child[b-fdl1i3o09e] { padding-left: 12px; text-align: right; color: var(--ink); white-space: nowrap; }
.price-tbl tr.sum td[b-fdl1i3o09e] { padding-top: 8px; border-bottom: 0; color: var(--ink); font-size: var(--fs-md); font-weight: 600; }

.score[b-fdl1i3o09e] { display: grid; grid-template-columns: minmax(0, 1fr) 90px 32px; gap: 8px; align-items: center; }
.score i[b-fdl1i3o09e] { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.score i b[b-fdl1i3o09e] { display: block; height: 100%; border-radius: 3px; background: var(--ink-2); }
.score .num[b-fdl1i3o09e] { color: var(--ink); font-weight: 600; text-align: right; }
.score.is-total[b-fdl1i3o09e] { color: var(--ink); font-weight: 600; }

.dd-foot[b-fdl1i3o09e] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
    .dd-grid[b-fdl1i3o09e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dd-preview[b-fdl1i3o09e] { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 20px 20px 14px; }
}
@media (max-width: 760px) {
    .dp-detail[b-fdl1i3o09e] { padding: 18px 16px; }
    .dd-head h2[b-fdl1i3o09e] { font-size: var(--fs-lg); }
    .dd-preview[b-fdl1i3o09e] { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 14px 12px; }
    .dd-cover[b-fdl1i3o09e] { display: none; }
    .dd-grid[b-fdl1i3o09e] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dd-foot .btn[b-fdl1i3o09e] { flex: 1 1 100%; }
}
@media (pointer: coarse) {
    .dd-foot .btn[b-fdl1i3o09e] { --h: var(--tap); }
}
@media (prefers-reduced-motion: reduce) {
    .dp-detail[b-fdl1i3o09e] { animation: none; }
}
/* /Components/Providers/PrintChooser.razor.rz.scp.css */
/* "Wo drucken wir euer Buch?" in the Helles Studio look (Data/_ui_mockups/editor-v4/site-drucken.html) */

/* ---- head: the book's cover, the question, which book and what is assumed ---- */
.dp-head[b-8ageocoz5j] { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.dp-cover[b-8ageocoz5j] { width: 148px; }
.dp-cover.is-empty[b-8ageocoz5j] { display: grid; place-items: center; color: var(--ink-3); }
.dp-cover.is-empty[b-8ageocoz5j]  .i { width: 32px; height: 32px; }
.dp-head-txt[b-8ageocoz5j] { display: grid; gap: 6px; min-width: 0; }
.dp-head-txt .eyebrow[b-8ageocoz5j] { margin: 0; }
.dp-title[b-8ageocoz5j] { margin: 0; }
.dp-book[b-8ageocoz5j] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.dp-book b[b-8ageocoz5j] { color: var(--ink); font-weight: 600; }
.dp-facts[b-8ageocoz5j] { display: inline-flex; flex-wrap: wrap; gap: 0 6px; }
.dp-facts > span + span[b-8ageocoz5j]::before { content: "·"; margin-right: 6px; color: var(--ink-3); }
.dp-book[b-8ageocoz5j]  .book-pill { height: 36px; }
.dp-lead[b-8ageocoz5j] { max-width: 68ch; margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }

.dp-callout[b-8ageocoz5j] { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.dp-callout b[b-8ageocoz5j] { font-weight: 600; }

/* ---- every fitting printer, behind "Alle Anbieter vergleichen" ---- */
.dp-all-wrap[b-8ageocoz5j] { margin-top: var(--sp-6); }
.dp-all-wrap[b-8ageocoz5j]  .dp-all > summary { padding: 16px 4px; }
.dp-all-wrap[b-8ageocoz5j]  .dp-all .disclosure-body { padding: 0 0 var(--sp-2); }
.dp-all-sub[b-8ageocoz5j] { font-weight: 400; color: var(--ink-3); font-size: var(--fs-sm); }
.dp-all-head[b-8ageocoz5j] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.dp-all-hint[b-8ageocoz5j] { color: var(--ink-3); font-size: var(--fs-xs); }
/* position: the visually hidden header "Wählen" (.sr-only, absolute) would otherwise be placed against the page, not this
   scroller, and widen the phone page by the table's overflow */
.tbl-wrap[b-8ageocoz5j] { position: relative; overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--surface); }
.dp-list[b-8ageocoz5j] { width: 100%; min-width: 820px; border-collapse: collapse; font-size: var(--fs-sm); }
.dp-list th[b-8ageocoz5j], .dp-list td[b-8ageocoz5j] { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dp-list thead th[b-8ageocoz5j] { background: var(--surface-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
.dp-list tbody tr:last-child > *[b-8ageocoz5j] { border-bottom: 0; }
.dp-list tbody tr:hover > td[b-8ageocoz5j] { background: var(--surface-2); }
.dp-list .num[b-8ageocoz5j] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-list tr.is-chosen > td[b-8ageocoz5j], .dp-list tr.is-chosen:hover > td[b-8ageocoz5j] { background: var(--accent-soft); }
.dp-list tr.is-off > td[b-8ageocoz5j], .dp-list tr.is-off .dp-who b[b-8ageocoz5j] { color: var(--ink-3); }
.dp-list .c-ck[b-8ageocoz5j] { width: 44px; padding-right: 0; }
.dp-list .c-act[b-8ageocoz5j] { width: 1%; white-space: nowrap; text-align: right; }
.dp-eur[b-8ageocoz5j] { color: var(--ink); font-weight: 600; }
.dp-eur small[b-8ageocoz5j] { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.dp-q[b-8ageocoz5j] { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.qbar[b-8ageocoz5j] { width: 56px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.qbar i[b-8ageocoz5j] { display: block; height: 100%; border-radius: 3px; background: var(--ink-2); }
.dp-group th[b-8ageocoz5j] { padding-top: 16px; background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dp-group th span[b-8ageocoz5j] { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.dp-none td[b-8ageocoz5j] { color: var(--ink-2); }

/* the printer's name opens everything the research knows about it */
.dp-who[b-8ageocoz5j] {
    display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dp-who b[b-8ageocoz5j] { display: block; color: var(--ink); font-weight: 600; }
.dp-who small[b-8ageocoz5j] { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
button.dp-who:hover b[b-8ageocoz5j] { text-decoration: underline; text-underline-offset: 3px; }
.mono[b-8ageocoz5j] {
    display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--mono, var(--surface-3)); color: var(--on-photo); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
}
.mono.is-sm[b-8ageocoz5j] { width: 28px; height: 28px; border-radius: var(--r-sm); font-size: 11px; }

/* the comparison checkbox: 20 px to see, the whole cell to hit */
.ck[b-8ageocoz5j] {
    position: relative; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--line-strong);
    border-radius: 6px; background: var(--surface); color: transparent; cursor: pointer;
}
.ck[b-8ageocoz5j]::before { content: ""; position: absolute; inset: -12px; }
.ck[b-8ageocoz5j]  .i { width: 14px; height: 14px; stroke-width: 3; }
.ck[aria-checked="true"][b-8ageocoz5j] { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.dp-nopdf[b-8ageocoz5j] { max-width: 80ch; margin: var(--sp-3) 0 0; color: var(--ink-3); font-size: var(--fs-xs); }
.dp-nopdf b[b-8ageocoz5j] { font-weight: 600; color: var(--ink-2); }

/* ---- the research, one level deeper ---- */
.dp-research[b-8ageocoz5j] { display: flex; align-items: flex-start; gap: 10px; margin: var(--sp-4) 0 0; color: var(--ink-3); font-size: var(--fs-xs); }
.dp-research[b-8ageocoz5j]  .i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.dp-research b[b-8ageocoz5j] { color: var(--ink-2); font-weight: 600; }
.dp-research a[b-8ageocoz5j] { color: var(--ink-2); text-underline-offset: 3px; }
.dp-research a:hover[b-8ageocoz5j] { color: var(--ink); }

/* ---- the choice: a pill at the bottom of the window with the page's one primary button ---- */
.dp-chosen[b-8ageocoz5j] {
    position: sticky; bottom: calc(var(--bottom-bar-h, 0px) + 12px); z-index: 30; display: flex; align-items: center; gap: 12px; min-width: 0;
    margin-top: var(--sp-5); padding: 10px 10px 10px 16px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-2);
}
.dp-chosen[b-8ageocoz5j] >  .i { flex: none; color: var(--good); }
.dc-txt[b-8ageocoz5j] { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.dc-txt b[b-8ageocoz5j] { color: var(--ink); font-weight: 600; }
.dp-chosen .btn-primary[b-8ageocoz5j] { flex: none; }
/* Knipsi floats bottom right (60 px, 20 px from the edges): where the page column reaches the window's edge, the pill
   leaves him room instead of lying under him */
@media (max-width: 1400px) {
    .dp-chosen[b-8ageocoz5j] { margin-right: 76px; }
}

/* the comparison bar: the kit's dark pill, above the choice when there is one */
.dp-cmpbar[b-8ageocoz5j] {
    position: fixed; z-index: var(--z-selbar); left: 50%; bottom: calc(var(--bottom-bar-h, 0px) + 24px); transform: translateX(-50%);
    /* fade only: a moving keyframe would replace the centring transform while it runs */
    animation: fade-in var(--t-2) var(--ease);
}
.dp-cmpbar.is-raised[b-8ageocoz5j] { bottom: calc(var(--bottom-bar-h, 0px) + 88px); }
.dp-cmpbar.selbar[b-8ageocoz5j] { padding: 4px; }
.dp-cmp-count[b-8ageocoz5j] { padding: 0 8px 0 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the comparison inside the kit's sheet (its body has no scope attribute: the table is this component's own) */
.dp-cmp-wrap[b-8ageocoz5j] { overflow-x: auto; margin: -20px; }
.dp-cmp[b-8ageocoz5j] { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dp-cmp th[b-8ageocoz5j], .dp-cmp td[b-8ageocoz5j] { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.dp-cmp tbody th[b-8ageocoz5j] { width: 150px; color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); }
.dp-cmp thead td[b-8ageocoz5j] { background: var(--surface-2); color: var(--ink); }
.dp-cmp tbody tr:last-child > *[b-8ageocoz5j] { border-bottom: 0; }
.dp-cmp .dp-who[b-8ageocoz5j] { min-width: 0; cursor: default; }
.dp-cmp td.best[b-8ageocoz5j] { color: var(--good); font-weight: 600; }
.dp-cmp td.best[b-8ageocoz5j]::before { content: "● "; font-size: 10px; vertical-align: 2px; }

@media (max-width: 1100px) {
    .dp-list .c-paper[b-8ageocoz5j] { display: none; }
}
@media (max-width: 900px) {
    .dp-list .c-days[b-8ageocoz5j] { display: none; }
}
/* phones: the cover small beside the question, the table down to name, price and the choice */
@media (max-width: 760px) {
    .dp-head[b-8ageocoz5j] { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
    .dp-cover[b-8ageocoz5j] { width: 84px; margin-top: 4px; }
    .dp-title[b-8ageocoz5j] { font-size: var(--fs-xl); }
    .dp-facts > span:nth-child(n+3)[b-8ageocoz5j] { display: none; }
    .dp-lead[b-8ageocoz5j] { display: none; }
    .dp-list[b-8ageocoz5j] { min-width: 0; }
    .dp-list .c-q[b-8ageocoz5j], .dp-list .c-pdf[b-8ageocoz5j] { display: none; }
    .dp-list th[b-8ageocoz5j], .dp-list td[b-8ageocoz5j] { padding: 10px 8px; }
    .dp-who[b-8ageocoz5j] { min-width: 0; }
    .dp-all-hint[b-8ageocoz5j], .dp-all-sub[b-8ageocoz5j] { display: none; }
    .dp-chosen[b-8ageocoz5j] { gap: 10px; padding: 8px 8px 8px 16px; }
    .dp-chosen[b-8ageocoz5j] >  .i, .dc-l[b-8ageocoz5j], .dc-line[b-8ageocoz5j], .dc-ship[b-8ageocoz5j], .dc-long[b-8ageocoz5j] { display: none; }
    .dc-txt[b-8ageocoz5j] { font-size: var(--fs-md); }
    .dp-cmpbar.is-raised[b-8ageocoz5j] { bottom: calc(var(--bottom-bar-h, 0px) + 76px); }
    .dp-cmp tbody th[b-8ageocoz5j] { width: 96px; padding: 10px; }
    .dp-cmp td[b-8ageocoz5j] { padding: 10px; }
}
@media (pointer: coarse) {
    .dp-chosen .btn[b-8ageocoz5j], .dp-list .btn[b-8ageocoz5j] { --h: var(--tap); }
    .dp-research a[b-8ageocoz5j] { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .dp-cmpbar[b-8ageocoz5j] { animation: none; }
}
/* /Components/Providers/PrintOptionDetail.razor.rz.scp.css */
/* One printer in the details panel of the Drucken page: price and facts on top, then every section open below */
.pd[b-2m58gy3kmf] { display: grid; gap: var(--sp-4); }

.pd-top[b-2m58gy3kmf] { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-5); }
.pd-who[b-2m58gy3kmf] { flex: 1 1 340px; min-width: 0; display: grid; gap: var(--sp-2); }
.pd-line[b-2m58gy3kmf] { margin: 0; font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.pd-badges[b-2m58gy3kmf] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pd-site[b-2m58gy3kmf] { margin: 0; display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.pd-site a[b-2m58gy3kmf] { color: var(--ink-2); text-underline-offset: 3px; }
.pd-price[b-2m58gy3kmf] {
    flex: 0 1 auto; display: grid; gap: 2px; justify-items: end; text-align: right;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2);
}
.pd-price-label[b-2m58gy3kmf] { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pd-price .eur[b-2m58gy3kmf] { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; }
.pd-faint[b-2m58gy3kmf] { color: var(--ink-3); font-size: var(--fs-sm); }

/* the facts at a glance: small tiles */
.pd-facts[b-2m58gy3kmf] { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--sp-2); }
.pd-facts > div[b-2m58gy3kmf] { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.pd-facts dt[b-2m58gy3kmf] { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.pd-facts dd[b-2m58gy3kmf] { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.pd-facts small[b-2m58gy3kmf] { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }
.pd-facts small:empty[b-2m58gy3kmf] { display: none; }

.pd-summary[b-2m58gy3kmf] { margin: 0; max-width: 80ch; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }

.pd-gk[b-2m58gy3kmf] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.pd-gk > div[b-2m58gy3kmf] { padding: 14px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.pd-gk h3[b-2m58gy3kmf] { margin: 0 0 6px; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; }
.pd-gk ul[b-2m58gy3kmf] { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.pd-gk p[b-2m58gy3kmf] { margin: 0; }
.pd-gk .is-good[b-2m58gy3kmf] { background: var(--good-soft); }
.pd-gk .is-good li[b-2m58gy3kmf]::marker { content: "+  "; color: var(--good); font-weight: 600; }
.pd-gk .is-bad[b-2m58gy3kmf] { background: var(--warn-soft); }
.pd-gk .is-bad li[b-2m58gy3kmf]::marker { content: "–  "; color: var(--warn); font-weight: 600; }

.pd-sec[b-2m58gy3kmf] { display: grid; gap: var(--sp-2); }
.pd-sec h3[b-2m58gy3kmf] {
    margin: var(--sp-2) 0 0; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.pd-formula[b-2m58gy3kmf] { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pd-others[b-2m58gy3kmf] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.pd-others li[b-2m58gy3kmf] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); }

@media (max-width: 760px) {
    .pd-price[b-2m58gy3kmf] { justify-items: start; text-align: left; width: 100%; }
    .pd-gk[b-2m58gy3kmf] { grid-template-columns: 1fr; }
    .pd-facts[b-2m58gy3kmf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Providers/RankingView.razor.rz.scp.css */
/* The ranking lists in the Helles Studio look: the lists as a segmented choice, each place a calm card */
.rank-tabs[b-pqq91fudeg] { margin: 0 0 var(--sp-4); }
.rank-tabs a[b-pqq91fudeg] { white-space: nowrap; }

.rank-head[b-pqq91fudeg] { max-width: 960px; margin-bottom: var(--sp-3); }
.rank-head h2[b-pqq91fudeg] { margin: 0 0 var(--sp-1); }
.rank-desc[b-pqq91fudeg] { margin: 0 0 2px; color: var(--ink-2); }
.rank-source[b-pqq91fudeg] { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.rank-formula[b-pqq91fudeg] { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* "So liest du die Rangliste": the kit's disclosure on a quiet surface */
.howto[b-pqq91fudeg] { max-width: 960px; margin: 0 0 var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); }
.howto[b-pqq91fudeg]  .disclosure { border-top: 0; }
.howto p[b-pqq91fudeg] { max-width: 80ch; margin: 0 0 var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); }

.rank-empty[b-pqq91fudeg] { max-width: 720px; }
.rank-count[b-pqq91fudeg] { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: var(--fs-sm); }

.rank-list[b-pqq91fudeg] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 960px; }
.rank-item[b-pqq91fudeg] { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 14px 16px; }
/* the place: a quiet round number; the first three in ink (the accent belongs to the page's one primary) */
.rank-no[b-pqq91fudeg] {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2);
    color: var(--ink); font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums;
}
.rank-no.is-top[b-pqq91fudeg] { background: var(--ink); color: var(--bg); }
.rank-main[b-pqq91fudeg] { display: grid; gap: 6px; min-width: 0; }
.rank-meta[b-pqq91fudeg] { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.rank-note[b-pqq91fudeg] { margin: 0; color: var(--warn); font-size: var(--fs-xs); }
.rank-side[b-pqq91fudeg] { display: grid; justify-items: end; gap: 8px; }
.rank-score[b-pqq91fudeg] { display: grid; justify-items: end; line-height: 1.2; }
.rank-score strong[b-pqq91fudeg] { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-score span[b-pqq91fudeg] { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }

.near[b-pqq91fudeg] { max-width: 960px; margin-top: var(--sp-6); }
.near h3[b-pqq91fudeg] { margin-bottom: var(--sp-1); }
.near-lead[b-pqq91fudeg] { margin: 0 0 var(--sp-3); color: var(--ink-2); font-size: var(--fs-sm); }
.near-list[b-pqq91fudeg] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.near-list li[b-pqq91fudeg] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
    padding: 10px 14px; border-radius: var(--r-md); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong);
}
.near-reason[b-pqq91fudeg] { grid-column: 1; color: var(--warn); font-size: var(--fs-xs); }
.near-list li[b-pqq91fudeg]  .cmp-toggle { grid-column: 2; grid-row: 1 / span 2; }
.near-more[b-pqq91fudeg] { margin-top: var(--sp-3); }
.near-more[b-pqq91fudeg]  .disclosure > summary { padding-left: 4px; padding-right: 4px; }
.near-more[b-pqq91fudeg]  .disclosure-body { padding: 0; }

/* phones: number left, the score and the button under the description */
@media (max-width: 560px) {
    .rank-item[b-pqq91fudeg] { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; }
    .rank-no[b-pqq91fudeg] { width: 32px; height: 32px; font-size: var(--fs-sm); }
    .rank-side[b-pqq91fudeg] { grid-column: 2; display: flex; align-items: center; justify-content: space-between; justify-items: initial; }
    .rank-score[b-pqq91fudeg] { justify-items: start; }
    .near-list li[b-pqq91fudeg] { grid-template-columns: minmax(0, 1fr); }
    .near-list li[b-pqq91fudeg]  .cmp-toggle { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* /Components/Providers/ShopFacts.razor.rz.scp.css */
/* The shop's ordering facts, ratings, open questions and sources (Helles Studio): definition list and short lists, all open */
.sf-sec[b-s8y7iusvps] { max-width: 960px; }
.sf-h[b-s8y7iusvps] { font-size: var(--fs-xl); margin: var(--sp-7) 0 var(--sp-3); }
.sf-h.is-compact[b-s8y7iusvps] {
    margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.sf-muted[b-s8y7iusvps] { color: var(--ink-3); }
.sf-note[b-s8y7iusvps] { font-size: var(--fs-sm); color: var(--ink-2); }

.sf-kv[b-s8y7iusvps] { margin: 0; display: grid; gap: var(--sp-2); }
.sf-kv > div[b-s8y7iusvps] { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: var(--sp-3); }
.sf-kv dt[b-s8y7iusvps] { color: var(--ink-3); font-size: var(--fs-sm); }
.sf-kv dd[b-s8y7iusvps] { margin: 0; overflow-wrap: anywhere; }
.sf-tools[b-s8y7iusvps] { list-style: none; margin: 0 0 var(--sp-1); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.sf-tools .is-yes span[aria-hidden][b-s8y7iusvps] { color: var(--good); font-weight: 600; }
.sf-tools .is-no[b-s8y7iusvps], .sf-tools .is-unknown[b-s8y7iusvps] { color: var(--ink-3); }

.sf-reviews[b-s8y7iusvps] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); max-width: 640px; }
.sf-reviews li[b-s8y7iusvps] { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center; gap: 2px var(--sp-3); }
.sf-review-name[b-s8y7iusvps] { overflow-wrap: anywhere; }
.sf-review-bar[b-s8y7iusvps] { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.sf-review-bar span[b-s8y7iusvps] { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }
.sf-review-value[b-s8y7iusvps] { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.sf-review-count[b-s8y7iusvps] { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); }

.sf-list[b-s8y7iusvps] { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.sf-list li + li[b-s8y7iusvps] { margin-top: var(--sp-1); }
.sf-sources[b-s8y7iusvps] { overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .sf-h:not(.is-compact)[b-s8y7iusvps] { margin-top: var(--sp-6); }
    .sf-kv > div[b-s8y7iusvps] { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .sf-reviews li[b-s8y7iusvps] { grid-template-columns: minmax(0, 1fr) auto; }
    .sf-review-bar[b-s8y7iusvps] { display: none; }
}
/* /Components/Providers/ShopListView.razor.rz.scp.css */
/* All researched shops: calm cards with the shop's monogram, its lines and the price for our book */
.list-head[b-v7bnwdbwlf] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.list-head p[b-v7bnwdbwlf] { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.list-sort[b-v7bnwdbwlf] { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.list-sort select[b-v7bnwdbwlf] { width: auto; font-size: max(16px, var(--fs-sm)); }
.list-empty[b-v7bnwdbwlf] { max-width: 720px; }

.shop-grid[b-v7bnwdbwlf] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-3); }
.shop-card[b-v7bnwdbwlf] { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--sp-2); padding: var(--sp-4); }
.shop-card-head[b-v7bnwdbwlf] { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.mono[b-v7bnwdbwlf] {
    display: inline-grid; place-items: center; grid-row: span 2; width: 40px; height: 40px; border-radius: var(--r-md);
    background: var(--mono, var(--surface-3)); color: var(--on-photo); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
}
.shop-card-head h3[b-v7bnwdbwlf] { margin: 0; font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.shop-card-head h3 a[b-v7bnwdbwlf] { color: var(--ink); text-decoration: none; }
.shop-card-head h3 a:hover[b-v7bnwdbwlf] { text-decoration: underline; text-underline-offset: 3px; }
.shop-card-badges[b-v7bnwdbwlf] { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-card-summary[b-v7bnwdbwlf] { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.shop-card-lines[b-v7bnwdbwlf] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); align-content: start; }
.shop-card-lines > li[b-v7bnwdbwlf] { display: grid; gap: 6px; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.shop-card-row[b-v7bnwdbwlf] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.shop-card-price strong[b-v7bnwdbwlf] { color: var(--ink); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.shop-card-none[b-v7bnwdbwlf], .shop-card-hidden[b-v7bnwdbwlf] { margin: 0; font-size: var(--fs-sm); }
.shop-card-foot[b-v7bnwdbwlf] { margin: 0 -8px -6px; }
.shop-card-foot .btn[b-v7bnwdbwlf] { color: var(--ink-2); }

.pending[b-v7bnwdbwlf] { max-width: 1120px; margin-top: var(--sp-6); }
.pending[b-v7bnwdbwlf]  .disclosure-body { padding: 0 4px 16px; }
.pending p[b-v7bnwdbwlf] { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.pending-list[b-v7bnwdbwlf] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 6px var(--sp-4); }
.pending-list li[b-v7bnwdbwlf] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pending-hint[b-v7bnwdbwlf] { flex-basis: 100%; color: var(--ink-3); font-size: var(--fs-xs); }
/* /Components/Start/PreparationCard.razor.rz.scp.css */
/* A trip still being prepared: a quiet card in a dashed frame (it has nothing to do yet), its stages as a path. */
.start-prep[b-gqyfvgp7j9] { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); background: transparent; box-shadow: none; }
.start-prep h3[b-gqyfvgp7j9] { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.start-prep-unreadable[b-gqyfvgp7j9] { margin: 0; font-size: var(--fs-sm); }
/* /Components/Start/StartTripCard.razor.rz.scp.css */
/* The head of a trip on the shelf (site-start.html .trip-head): mosaic of three photos, name, one line of facts, a quiet
   line of how far it is reviewed, ghost buttons with icon and label (34 px; only icons on phones). Tokens only. */
.trip-head[b-ud3xkbzdvj] { display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 14px; }
.trip-mosaic[b-ud3xkbzdvj] { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; flex: none; }
.trip-mosaic img[b-ud3xkbzdvj], .trip-mosaic i[b-ud3xkbzdvj] { display: block; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--surface-3); }
.trip-mosaic :first-child[b-ud3xkbzdvj] { border-radius: 10px 6px 6px 10px; }
.trip-mosaic :last-child[b-ud3xkbzdvj] { border-radius: 6px 10px 10px 6px; }
.th-txt[b-ud3xkbzdvj] { flex: 1; min-width: 0; }
.th-txt h3[b-ud3xkbzdvj] { margin: 0; font-size: var(--fs-lg); }
.th-txt h3 a[b-ud3xkbzdvj] { color: var(--ink); text-decoration: none; }
.th-txt h3 a:hover[b-ud3xkbzdvj] { color: var(--accent-text); }
.th-meta[b-ud3xkbzdvj] { display: block; color: var(--ink-3); font-size: var(--fs-sm); }
.th-review[b-ud3xkbzdvj] { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--ink-3); font-size: var(--fs-xs); }
/* the reviewed share as a short bar (the ring of the Fotos page, small) */
.th-meter[b-ud3xkbzdvj] { flex: none; width: 40px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--good) var(--p, 0%), var(--surface-3) var(--p, 0%)); }
.trip-acts[b-ud3xkbzdvj] { display: flex; gap: 2px; flex: none; }
.trip-acts .btn[b-ud3xkbzdvj] { --h: 34px; padding: 0 12px; font-size: var(--fs-sm); }
.trip-acts[b-ud3xkbzdvj]  .i { width: 17px; height: 17px; }
/* the label is the tooltip only while the label itself is hidden */
.trip-acts .btn[data-tip][b-ud3xkbzdvj]::after { display: none; }

@media (max-width: 1100px) {
    .trip-acts .btn[b-ud3xkbzdvj] { width: 34px; padding: 0; }
    .trip-acts .lbl[b-ud3xkbzdvj] { display: none; }
    .trip-acts .btn[data-tip]:hover[b-ud3xkbzdvj]::after, .trip-acts .btn[data-tip]:focus-visible[b-ud3xkbzdvj]::after { display: block; }
}
@media (max-width: 760px) {
    .trip-head[b-ud3xkbzdvj] { gap: 10px; flex-wrap: wrap; }
    .trip-mosaic[b-ud3xkbzdvj] { grid-template-columns: repeat(3, 30px); }
    .trip-mosaic img[b-ud3xkbzdvj], .trip-mosaic i[b-ud3xkbzdvj] { width: 30px; height: 30px; }
    .th-review[b-ud3xkbzdvj] { display: none; }
    .trip-acts .btn[b-ud3xkbzdvj] { width: 40px; }
}
@media (pointer: coarse) {
    .trip-acts .btn[b-ud3xkbzdvj] { --h: var(--tap); width: var(--tap); }
}