/*
 * Comic catalogue (com_comickatalog) - frontend styles.
 *
 * Pop-art look in the colours of the Comicfan Verlag template. Every colour and size is a CSS variable:
 * define --cf-red, --cf-yellow, --cf-blue, --cf-ink, --cf-paper (or the --ck-* variables directly)
 * in the template CSS and the catalogue follows the template.
 */

.ck {
  --ck-red: var(--cf-red, #e30613);
  --ck-yellow: var(--cf-yellow, #ffd400);
  --ck-blue: var(--cf-blue, #0b4ea2);
  --ck-ink: var(--cf-ink, #14110f);
  --ck-paper: var(--cf-paper, #fffdf5);
  --ck-muted: var(--cf-muted, #5b564e);
  --ck-line: 3px solid var(--ck-ink);
  --ck-shadow: 4px 4px 0 var(--ck-ink);
  --ck-radius: 10px;
  --ck-font-display: var(--cf-font-display, "Bangers", "Impact", "Arial Narrow Bold", sans-serif);

  color: var(--ck-ink);
  line-height: 1.5;
}

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

.ck a {
  color: var(--ck-blue);
  text-underline-offset: .15em;
}

.ck a:hover,
.ck a:focus-visible {
  color: var(--ck-red);
}

.ck :focus-visible {
  outline: 3px solid var(--ck-blue);
  outline-offset: 2px;
}

/* ---- Headings ---------------------------------------------------------- */

.ck-header {
  margin-bottom: 1.5rem;
}

.ck-header--with-cover {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 40em) {
  .ck-header--with-cover:has(.ck-header__img) {
    grid-template-columns: 9rem 1fr;
  }
}

.ck-title {
  margin: 0 0 .25rem;
  font-family: var(--ck-font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--ck-yellow);
}

.ck-subtitle {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--ck-muted);
}

.ck-lead {
  margin: 0;
  color: var(--ck-muted);
}

.ck-kicker {
  margin: 0 0 .25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ck-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0 0 .75rem;
  color: var(--ck-muted);
}

.ck-section__title {
  display: inline-block;
  margin: 2rem 0 1rem;
  padding: .1rem .75rem;
  background: var(--ck-yellow);
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  font-family: var(--ck-font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ck-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.ck-count {
  margin: 1rem 0;
  font-weight: 700;
}

.ck-empty {
  padding: 1.5rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-prose {
  max-width: 70ch;
}

/* ---- Forms and buttons ------------------------------------------------- */

.ck-search {
  margin-bottom: 1rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
  box-shadow: var(--ck-shadow);
}

.ck-search__row,
.ck-entry__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.ck-search__more {
  margin-top: .75rem;
}

.ck-search__more summary,
.ck-settings summary {
  cursor: pointer;
  font-weight: 700;
}

.ck-search__more .ck-search__row {
  margin-top: .75rem;
}

.ck-search__reset {
  margin: .75rem 0 0;
}

.ck-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 9rem;
}

.ck-field--grow {
  flex: 1 1 14rem;
}

.ck-field--narrow {
  min-width: 5.5rem;
  max-width: 8rem;
}

.ck-field__label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ck input[type="search"],
.ck input[type="text"],
.ck input[type="number"],
.ck input[type="date"],
.ck select {
  width: 100%;
  min-height: 2.5rem;
  padding: .35rem .6rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ck-ink);
  font: inherit;
}

.ck-btn {
  display: inline-block;
  padding: .5rem 1.1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: #fff;
  box-shadow: 3px 3px 0 var(--ck-ink);
  color: var(--ck-ink) !important;
  font-family: var(--ck-font-display);
  font-size: 1.05rem;
  letter-spacing: .05em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

.ck-btn:hover,
.ck-btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ck-ink);
}

.ck-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ck-ink);
}

.ck-btn--primary {
  background: var(--ck-red);
  color: #fff !important;
}

.ck-btn--link {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ck-blue) !important;
  font-family: inherit;
  font-size: .95rem;
  text-decoration: underline;
  text-transform: none;
}

.ck-btn--link:hover,
.ck-btn--link:focus-visible {
  transform: none;
  box-shadow: none;
}

.ck-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
}

/* Permanent Tauschagent notice (own offers/wishes not passed on) */
.ck-agent-notice {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 2px solid var(--cf-ink, #111);
  border-left-width: 6px;
  border-radius: .5rem;
  background: #fff8d6;
  color: var(--cf-ink, #111);
}

.ck-agent-notice p {
  margin: 0;
}

.ck-agent-notice p + p {
  margin-top: .5rem;
}

.ck-agent-notice a {
  font-weight: 700;
  text-decoration: underline;
}

.ck-hint {
  margin: .25rem 0 .75rem;
  color: var(--ck-muted);
  font-size: .9rem;
}

/* ---- Covers ------------------------------------------------------------ */

.ck-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border: var(--ck-line);
  border-radius: 6px;
  background: var(--ck-yellow);
}

.ck-cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  background:
    radial-gradient(circle at 25% 25%, rgba(0, 0, 0, .18) 1.5px, transparent 2px) 0 0 / 10px 10px,
    var(--ck-yellow);
  font-family: var(--ck-font-display);
  font-size: 1.1rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.ck-header__img--logo,
.ck-header__img--portrait {
  aspect-ratio: auto;
  object-fit: contain;
}

/* ---- Grid of comics ---------------------------------------------------- */

.ck-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ck-card {
  margin: 0;
}

.ck-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit !important;
  text-decoration: none;
}

.ck-card__cover {
  box-shadow: var(--ck-shadow);
  transition: transform .12s ease;
}

.ck-card__link:hover .ck-card__cover,
.ck-card__link:focus-visible .ck-card__cover {
  transform: rotate(-1.5deg) scale(1.02);
}

.ck-card__body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem .1rem 0;
}

.ck-card__series {
  color: var(--ck-red);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ck-card__title {
  font-weight: 700;
  line-height: 1.25;
}

/* 5.55.0: publishing date on the cards (period lists, date filter) */
.ck-card__date {
  font-size: .85rem;
  font-weight: 700;
}

.ck-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .6rem;
  color: var(--ck-muted);
  font-size: .85rem;
}

/* ---- Directory lists --------------------------------------------------- */

.ck-list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ck-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .7rem .9rem;
  border-bottom: 2px dashed var(--ck-ink);
}

.ck-list__item:hover {
  background: var(--ck-yellow);
}

.ck-list__title {
  font-weight: 700;
}

.ck-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-alphabet ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.ck-alphabet a {
  display: block;
  min-width: 2rem;
  padding: .2rem .5rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ck-ink);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.ck-alphabet a:hover,
.ck-alphabet a.is-active {
  background: var(--ck-red);
  color: #fff;
}

/* ---- Comic detail ------------------------------------------------------ */

.ck-detail {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .ck-detail {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: 2.5rem;
  }
}

.ck-detail__cover .ck-cover {
  box-shadow: 6px 6px 0 var(--ck-ink);
}

.ck-credits {
  margin: 0 0 1.25rem;
}

.ck-credits > div {
  display: flex;
  gap: .75rem;
  margin-bottom: .2rem;
}

.ck-credits dt {
  min-width: 7rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .04em;
  padding-top: .1rem;
}

.ck-credits dd {
  margin: 0;
}

.ck-facts {
  width: 100%;
  max-width: 34rem;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
}

.ck-facts th,
.ck-facts td {
  padding: .35rem .5rem;
  border-bottom: 2px dashed var(--ck-ink);
  text-align: left;
  vertical-align: top;
}

.ck-facts th {
  width: 9rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ck-collect {
  max-width: 34rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-yellow);
  box-shadow: var(--ck-shadow);
}

.ck-collect__title {
  margin: 0 0 .5rem;
  font-family: var(--ck-font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ck-collect__state {
  margin: 0 0 .75rem;
  font-weight: 700;
}

.ck-collect__form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .5rem;
}

.ck-issues {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-issues a,
.ck-issues .is-current {
  display: block;
  min-width: 2.5rem;
  padding: .2rem .55rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.ck-issues .is-current {
  background: var(--ck-red);
  color: #fff;
}

/* ---- Collection -------------------------------------------------------- */

.ck-stats {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ck-stats li {
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
  box-shadow: var(--ck-shadow);
}

.ck-stats strong {
  font-family: var(--ck-font-display);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ck-red);
}

.ck-stats span {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ck-settings {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-settings .ck-form {
  margin-top: 1rem;
}

.ck-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.ck-tabs a {
  padding: .45rem 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius) var(--ck-radius) 0 0;
  background: #fff;
  color: var(--ck-ink);
  font-family: var(--ck-font-display);
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}

.ck-tabs a.is-active {
  background: var(--ck-blue);
  color: #fff;
}

.ck-entries {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ck-entry {
  display: grid;
  gap: 1rem;
  grid-template-columns: 5.5rem 1fr;
  margin-bottom: 1rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-entry__title {
  font-weight: 700;
  font-size: 1.1rem;
}

.ck-entry__head {
  margin-bottom: .5rem;
}

.ck-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.ck-entry__actions .ck-btn {
  padding: .3rem .8rem;
  font-size: .95rem;
}

/* ---- Pagination -------------------------------------------------------- */

.ck-pagination {
  margin: 1.5rem 0;
}

.ck-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-pagination .page-link,
.ck-pagination .pagination a,
.ck-pagination .pagination > li > span {
  display: block;
  min-width: 2.25rem;
  padding: .3rem .6rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ck-ink);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.ck-pagination .active .page-link,
.ck-pagination .active > span,
.ck-pagination .page-link:hover {
  background: var(--ck-red);
  color: #fff;
}

.ck-pagination .disabled .page-link,
.ck-pagination .disabled > span {
  opacity: .45;
}

/* 4.1.0: start / previous / next / end as arrows (template layout override) – yellow, unlike the page numbers. */
.ck-pagination .page-link--nav,
.ck-pagination .pagination a.page-link--nav,
.ck-pagination .pagination > li > span.page-link--nav {
  background: var(--ck-yellow, #ffd400);
  font-size: 1.2rem;
  line-height: 1.1;
}

.ck-pagination .pagination a.page-link--nav:hover {
  background: var(--ck-ink, #14110f);
  color: var(--ck-yellow, #ffd400);
}

.ck-pagination .page-link__arrow {
  display: inline;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ---- Modules ----------------------------------------------------------- */

.ck-mod {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-mod li {
  margin: 0 0 .6rem;
}

.ck-mod a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
}

.ck-mod a:hover .ck-mod__title,
.ck-mod a:focus-visible .ck-mod__title {
  color: var(--cf-red, #e30613);
  text-decoration: underline;
}

.ck-mod .ck-cover {
  width: 3rem;
  flex: 0 0 3rem;
  border-width: 2px;
}

.ck-mod__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ck-mod__title {
  font-weight: 700;
}

.ck-mod__meta {
  color: #5b564e;
  font-size: .85rem;
}

.ck-mod-search {
  display: flex;
  gap: .4rem;
}

.ck-mod-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.4rem;
  padding: .3rem .6rem;
  border: 2px solid #14110f;
  border-radius: 6px;
}

.ck-mod-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-mod-list li {
  margin: 0;
  border-bottom: 2px dashed rgba(20, 17, 15, .18);
}

.ck-mod-list li:last-child {
  border-bottom: 0;
}

.ck-mod-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem 0;
  color: inherit;
  text-decoration: none;
}

.ck-mod-list__title {
  font-weight: 700;
}

.ck-mod-list a:hover .ck-mod-list__title,
.ck-mod-list a:focus-visible .ck-mod-list__title {
  color: var(--cf-red, #e30613);
  text-decoration: underline;
}

.ck-mod-list__meta {
  flex: 0 0 auto;
  color: #5b564e;
  font-size: .85rem;
}

.ck-mod-more {
  margin: .8rem 0 0;
}

.ck-module .ck-grid {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .ck-btn,
  .ck-card__cover {
    transition: none;
  }
}

/* ---- 1.1.0: badges, view bar, overview, bulk actions, workplace -------- */

.ck input[type="url"],
.ck input[type="email"],
.ck textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: .35rem .6rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ck-ink);
  font: inherit;
}

.ck-muted {
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-btn--small {
  padding: .25rem .7rem;
  font-size: .9rem;
  box-shadow: 2px 2px 0 var(--ck-ink);
}

.ck-btn--ghost {
  background: transparent;
  box-shadow: none;
}

.ck-inline-form {
  display: inline-block;
  margin: 0;
}

.ck-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: .75rem 0;
}

.ck-fieldset {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
}

.ck-fieldset legend {
  padding: 0 .4rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ck-badge {
  display: inline-block;
  padding: .05rem .5rem;
  border: 2px solid var(--ck-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ck-ink);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.ck-badge--sale {
  background: var(--ck-yellow);
}

.ck-badge--wanted {
  background: var(--ck-blue);
  color: #fff;
}

.ck-badge--owned {
  background: #d9f2d4;
}

.ck-badge--draft {
  border-style: dashed;
  background: #eee;
}

.ck-badge--pending {
  background: #ffe9a8;
}

.ck-badge--rejected {
  background: var(--ck-red);
  color: #fff;
}

.ck-card {
  position: relative;
}

.ck-card__select {
  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 2;
  display: block;
  padding: .2rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
  line-height: 0;
}

.ck-card__select input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
}

.ck-card__state {
  display: block;
  margin-top: .35rem;
}

.ck-viewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.ck-viewbar .ck-tabs,
.ck-viewbar .ck-hint {
  margin-bottom: 0;
}

.ck-tabs--small a {
  padding: .25rem .75rem;
  font-size: .9rem;
}

.ck-bulk {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-bulk__title {
  margin: 0 0 .5rem;
}

.ck-bulk__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ck-overview {
  margin-bottom: 1.5rem;
}

.ck-ov-pub {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-ov-pub > summary {
  cursor: pointer;
  font-family: var(--ck-font-display);
  font-size: 1.3rem;
  letter-spacing: .04em;
}

.ck-ov-pub__count {
  margin-left: .5rem;
  color: var(--ck-muted);
  font-family: inherit;
  font-size: .85rem;
  letter-spacing: 0;
}

.ck-ov-series {
  margin: .75rem 0 0;
  padding-top: .5rem;
  border-top: 2px dashed var(--ck-ink);
}

.ck-ov-series__title {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}

.ck-ov-series__lang {
  color: var(--ck-muted);
  font-size: .8rem;
  font-weight: 400;
}

.ck-ov-series__progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: .85rem;
}

.ck-ov-series__progress progress {
  width: 10rem;
  max-width: 50%;
  height: .9rem;
  accent-color: var(--ck-red);
}

.ck-ov-issues {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-ov-issues li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ck-ov-issues.has-covers li {
  flex-direction: column;
  align-items: flex-start;
  width: 6rem;
}

.ck-ov-cover {
  display: block;
  width: 6rem;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border: 2px solid var(--ck-ink);
  border-radius: 4px;
}

.ck-ov-qty,
.ck-ov-grade {
  color: var(--ck-muted);
  font-size: .8rem;
}

.ck-entry__cover {
  display: block;
}

.ck-entry__cover .ck-cover {
  width: 100%;
  height: auto;
}

.ck-field--sale {
  min-width: 10rem;
}

.ck-steps {
  margin: .75rem 0 0;
  padding-left: 1.25rem;
}

.ck-section {
  margin-bottom: 2rem;
}

.ck-work {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.ck-work__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: .5rem;
  padding: .6rem .9rem;
  border: 2px solid var(--ck-ink);
  border-radius: 8px;
  background: var(--ck-paper);
}

.ck-work__main {
  display: flex;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
}

.ck-work__note {
  flex-basis: 100%;
  margin: .25rem 0 0;
  padding: .35rem .6rem;
  border-left: 4px solid var(--ck-red);
  background: #fff;
  font-size: .9rem;
}

.ck-work__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.ck-work--done .ck-work__item {
  border-style: dashed;
}

@media (max-width: 40em) {
  .ck-entry {
    grid-template-columns: 1fr;
  }

  .ck-ov-series__progress progress {
    max-width: 40%;
  }
}

/* Albums of a fused series on its master series page (3.2.0); 5.50.1: shows the Einband, not the fused series */
.ck-series-source {
    color: #6c757d;
    font-size: .875em;
}

/* ---- Collection lists grouped by series (3.5.0) ------------------------ */

.ck-collection-group {
    margin-top: 2rem;
}

.ck-collection-group > h2 {
    margin-bottom: .5rem;
}

.ck-series-group__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    margin: 1.6rem 0 .5rem;
    padding: .35rem .75rem .3rem;
    font-family: var(--ck-font-display);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: .03em;
    line-height: 1.2;
    background: var(--ck-yellow);
    border: var(--ck-line);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow);
}

.ck-series-group__title a {
    color: var(--ck-ink);
    text-decoration: none;
}

.ck-series-group__title a:hover,
.ck-series-group__title a:focus-visible {
    color: var(--ck-red);
}

.ck-series-group__publisher {
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--ck-ink);
    opacity: .8;
}

.ck-series-group__count {
    margin-left: auto;
    font-size: .95rem;
    color: var(--ck-muted);
}

.ck-collection-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 .5rem;
    font-size: .95rem;
}

.ck-collection-table th,
.ck-collection-table td {
    padding: .4rem .55rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(20, 17, 15, .15);
}

.ck-collection-table th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ck-muted);
    border-bottom: 2px solid var(--ck-ink);
}

.ck-collection-table .ck-col-issue {
    width: 4.5rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ck-series-group__list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0 .25rem;
}

.ck-series-group__list li {
    padding: .3rem 0;
    border-bottom: 1px dotted rgba(20, 17, 15, .3);
}

.ck-series-group__issue {
    display: inline-block;
    min-width: 3.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 5.52.0: the narrow layout of the collection table moved to the container query at .ck-series-group__table */


/* ==========================================================================
   3.6.0 – Bewertungen (Sterne) und Rezensionen
   ========================================================================== */

.ck .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Read-only stars: five grey stars, the yellow fill is cut to the score (classes in half-star steps). */
.ck-rating {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  white-space: nowrap;
}

.ck-stars {
  position: relative;
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: .08em;
}

.ck-stars::before,
.ck-stars__fill::before {
  content: "\2605\2605\2605\2605\2605";
}

.ck-stars::before {
  color: #d8d2c4;
}

.ck-stars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f2a900;
  -webkit-text-stroke: .5px var(--ck-ink);
}

.ck-stars--0 .ck-stars__fill { width: 0%; }
.ck-stars--5 .ck-stars__fill { width: 10%; }
.ck-stars--10 .ck-stars__fill { width: 20%; }
.ck-stars--15 .ck-stars__fill { width: 30%; }
.ck-stars--20 .ck-stars__fill { width: 40%; }
.ck-stars--25 .ck-stars__fill { width: 50%; }
.ck-stars--30 .ck-stars__fill { width: 60%; }
.ck-stars--35 .ck-stars__fill { width: 70%; }
.ck-stars--40 .ck-stars__fill { width: 80%; }
.ck-stars--45 .ck-stars__fill { width: 90%; }
.ck-stars--50 .ck-stars__fill { width: 100%; }

.ck-rating__value {
  font-weight: 700;
}

.ck-rating__count {
  color: var(--ck-muted);
  font-size: .9em;
}

.ck-rating--small .ck-stars {
  font-size: .95em;
}

.ck-rating--large .ck-stars {
  font-size: 1.6em;
}

.ck-rating--large .ck-rating__value {
  font-size: 1.4em;
}

.ck-card__rating {
  display: block;
  margin: .2rem 0;
  font-size: .9rem;
}

.ck-issue-list .ck-card__rating,
.ck-siblings__list .ck-card__rating,
.ck-linklist .ck-card__rating {
  display: inline-flex;
  margin: 0 0 0 .4rem;
}

/* Ratings section on album/series pages */
.ck-ratings {
  margin: 2rem 0;
  padding: 1.25rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  background: var(--ck-paper);
}

.ck-ratings h2 {
  margin-top: 0;
}

.ck-ratings h2 + .ck-empty {
  margin-top: 0;
}

.ck-ratings #ck-reviews {
  margin-top: 2rem;
}

.ck-ratings__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-bottom: 1rem;
}

.ck-ratings__label {
  margin: 0 0 .25rem;
  font-weight: 700;
}

.ck-ratings__count {
  margin: .25rem 0 0;
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-ratings__criteria {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
  align-items: center;
  margin: 0 0 1rem;
}

.ck-ratings__criteria dt {
  font-weight: 600;
}

.ck-ratings__criteria dd {
  margin: 0;
}

.ck-ratings__own {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 5px solid var(--ck-yellow);
  background: rgba(255, 212, 0, .12);
}

.ck-ratings__own p {
  margin: 0 0 .35rem;
}

.ck-ratings__ownlist {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0 0 .35rem;
  padding: 0;
  list-style: none;
  font-size: .9rem;
}

.ck-ratings__login {
  margin: 1rem 0;
  font-weight: 600;
}

/* Rating form: radio buttons shown as stars (5..1 in the markup, reversed by flexbox). */
.ck-rating-form,
.ck-review-form {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--ck-muted);
}

.ck-rating-form h3,
.ck-review-form h3 {
  margin-top: 0;
}

.ck-starinput {
  margin: 0 0 .75rem;
  padding: 0;
  border: 0;
}

.ck-starinput__legend {
  padding: 0;
  font-weight: 600;
}

.ck-starinput__hint {
  color: var(--ck-muted);
  font-weight: 400;
  font-size: .9em;
}

.ck-starinput__stars {
  display: inline-flex;
  gap: .1rem;
}

.ck-starinput__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ck-starinput__star {
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
  color: #d8d2c4;
  padding: 0 .05rem;
}

.ck-starinput__star::before {
  content: "\2605";
}

/* Stars 1..5 in DOM order: filled up to the checked one (its own label + every label before it) ... */
.ck-starinput__radio:checked + .ck-starinput__star,
.ck-starinput__star:has(~ .ck-starinput__radio:checked),
/* ... and while hovering, up to the hovered one (the rule after this one clears the stars behind it). */
.ck-starinput__stars:hover .ck-starinput__star {
  color: #f2a900;
  -webkit-text-stroke: .5px var(--ck-ink);
}

.ck-starinput__stars .ck-starinput__star:hover ~ .ck-starinput__star {
  color: #d8d2c4;
  -webkit-text-stroke: 0;
}

.ck-starinput__radio:focus-visible + .ck-starinput__star {
  outline: 3px solid var(--ck-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.ck-rating-form__criteria {
  margin: .5rem 0 1rem;
}

.ck-rating-form__criteria > summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: .5rem;
}

.ck-btn--ghost {
  background: transparent;
  box-shadow: none;
}

/* Honeypot: invisible for people, present for bots. */
.ck-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ck-captcha {
  margin: .75rem 0;
}

/* Reviews: preview (excerpt) that opens to the full text */
.ck-reviews {
  display: grid;
  gap: .75rem;
}

.ck-review details {
  border: 2px solid var(--ck-ink);
  border-radius: var(--ck-radius);
  background: #fff;
}

.ck-review summary {
  display: block;
  padding: .75rem 1rem;
  cursor: pointer;
  list-style: none;
}

.ck-review summary::-webkit-details-marker {
  display: none;
}

.ck-review summary:focus-visible {
  outline: 3px solid var(--ck-blue);
  outline-offset: 2px;
}

.ck-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  margin-bottom: .35rem;
}

.ck-review__title {
  font-size: 1.05rem;
}

.ck-review__meta {
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-review__excerpt {
  display: block;
}

.ck-review__toggle {
  display: inline-block;
  margin-top: .35rem;
  color: var(--ck-blue);
  font-weight: 700;
}

.ck-review__less,
.ck-review details[open] .ck-review__more,
.ck-review details[open] .ck-review__excerpt {
  display: none;
}

.ck-review details[open] .ck-review__less {
  display: inline;
}

.ck-review__body {
  padding: 0 1rem 1rem;
  overflow-wrap: anywhere;
}

.ck-review__body blockquote {
  margin: .5rem 0;
  padding-left: .75rem;
  border-left: 4px solid var(--ck-yellow);
}

.ck-review-status {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-radius: var(--ck-radius);
  border: 2px solid var(--ck-ink);
}

.ck-review-status p {
  margin: 0 0 .25rem;
}

.ck-review-status--pending {
  background: rgba(11, 78, 162, .08);
}

.ck-review-status--rejected {
  background: rgba(227, 6, 19, .08);
}

.ck-field--block {
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem;
}

.ck-field--block input[type="text"],
.ck-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Catalogue: rating filters */
.ck-search__ratings {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border: 2px dashed var(--ck-muted);
  border-radius: var(--ck-radius);
}

.ck-search__ratings legend {
  padding: 0 .35rem;
  font-weight: 700;
}

/* 5.55.0: Erscheinungsdatum ab / bis (same frame as the rating filters) */
.ck-search__dates {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border: 2px dashed var(--ck-muted);
  border-radius: var(--ck-radius);
}

.ck-search__dates legend {
  padding: 0 .35rem;
  font-weight: 700;
}

.ck-field--date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
}

.ck-field--date .ck-field__label {
  flex: 1 0 100%;
}

.ck-field--date input[type="date"] {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 600px) {
  .ck-ratings {
    padding: 1rem .75rem;
  }

  .ck-ratings__criteria {
    grid-template-columns: 1fr;
    gap: 0 1rem;
  }

  .ck-ratings__criteria dd {
    margin-bottom: .4rem;
  }

  .ck-starinput__star {
    font-size: 2.2rem;
  }
}


/* ==========================================================================
   3.7.0 – Varianten-Kennzeichen, weitere Auflagen, Serie zur Sammlung hinzufügen
   ========================================================================== */

.ck-variant {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .4rem;
  border: 2px solid var(--ck-ink);
  border-radius: 999px;
  background: var(--ck-yellow);
  color: var(--ck-ink);
  font-size: .75em;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

.ck-editions__list {
  padding-left: 1.2rem;
}

.ck-collect {
  margin-top: 1.25rem;
}

.ck-collect > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

.ck-collect > summary::-webkit-details-marker {
  display: none;
}

.ck-collect__form {
  margin-top: 1rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-collect__group {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border: 2px dashed var(--ck-muted);
  border-radius: var(--ck-radius);
}

.ck-collect__group legend {
  padding: 0 .35rem;
}

.ck-collect__edition {
  font-weight: 700;
  cursor: pointer;
}

.ck-collect__count {
  color: var(--ck-muted);
  font-weight: 400;
}

.ck-collect__list {
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-collect__list li {
  padding: .2rem 0;
}

.ck-collect__list label {
  cursor: pointer;
}

.ck-collect input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: .4rem;
  vertical-align: middle;
}

.ck-collect-login {
  margin-top: 1.25rem;
}

.ck-variant--edition {
  background: var(--ck-paper);
}

/* ==========================================================================
   4.0.0 – Tauschagent
   ========================================================================== */

.ck-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.ck-tabs a {
  display: inline-block;
  padding: .45rem .9rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
  color: var(--ck-ink);
  font-weight: 700;
  text-decoration: none;
}

.ck-tabs a.is-active {
  background: var(--ck-yellow);
  box-shadow: var(--ck-shadow);
}

.ck-count-badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--ck-red);
  color: #fff;
  font-size: .8em;
  line-height: 1.4;
  text-align: center;
}

.ck-agent__list {
  display: grid;
  gap: .6rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.ck-agent__link {
  display: block;
  padding: .7rem 1rem;
  border: 2px solid var(--ck-ink);
  border-radius: var(--ck-radius);
  background: #fff;
  color: var(--ck-ink);
  text-decoration: none;
}

.ck-agent__item.is-unread .ck-agent__link {
  border-left: 8px solid var(--ck-red);
}

.ck-agent__item.is-expired .ck-agent__link {
  opacity: .65;
}

.ck-agent__title {
  display: block;
  font-weight: 700;
}

.ck-agent__meta {
  display: block;
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-badge--expired {
  background: #d8d2c4;
  color: var(--ck-ink);
}

.ck-agent__album {
  display: grid;
  grid-template-columns: minmax(0, 180px) 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

.ck-agent__conversation ol {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-agent__conversation li {
  max-width: 44rem;
  padding: .6rem .9rem;
  border: 2px solid var(--ck-ink);
  border-radius: var(--ck-radius);
  background: #fff;
}

.ck-agent__conversation li.is-mine {
  margin-left: auto;
  background: rgba(255, 212, 0, .18);
}

.ck-agent__body {
  overflow-wrap: anywhere;
}

.ck-agent__contact,
.ck-agent__settings form,
.ck-agent__missing {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 2px dashed var(--ck-muted);
  border-radius: var(--ck-radius);
}

.ck-agent-link {
  margin: .5rem 0 0;
}

.ck-item-edit-open {
  cursor: pointer;
  color: var(--ck-blue);
  font-weight: 600;
}

/* 5.50.2: the one edit form of Meine Sammlung (below the list without JavaScript, in a row under the entry with it) */
.ck-item-edit-panel {
  margin: 1rem 0;
  padding: .6rem .8rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
}

.ck-item-edit-panel[hidden] {
  display: none;
}

.ck-item-edit-panel h2 {
  font-size: 1rem;
  margin: 0 0 .4rem;
}

.ck-item-edit-row > td {
  padding-top: 0;
}

.ck-item-edit-row .ck-item-edit-panel {
  margin: 0 0 .6rem;
}

.ck-item-edit__buttons {
  display: flex;
  gap: .5rem;
  margin: 0;
}

.ck-item-edit__form {
  display: grid;
  gap: .4rem;
  min-width: 14rem;
  margin: .4rem 0 .6rem;
}

/* 5.52.0 (user: use the full width): price, purchase price and date side by side, note and buttons on lines of their own */
.ck-item-edit-row .ck-item-edit__form {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .4rem 1rem;
}

.ck-item-edit-row .ck-item-edit__form label:has(textarea),
.ck-item-edit-row .ck-item-edit__buttons {
  grid-column: 1 / -1;
}

/* Collector price panel above the price field */
.ck-price-panel {
  position: relative;
  margin: .4rem 0;
  padding: .6rem .75rem;
  border: 2px solid var(--ck-ink);
  border-radius: var(--ck-radius);
  background: #fff;
  box-shadow: var(--ck-shadow);
}

.ck-price-panel__head {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}

.ck-price-panel__close {
  border: 0;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ck-price-panel__list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .35rem;
  padding: 0;
  list-style: none;
}

.ck-price-panel .is-match {
  background: var(--ck-yellow);
}

.ck-collector-prices .ck-meta-list {
  margin-bottom: .25rem;
}

@media (max-width: 600px) {
  .ck-agent__album {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   4.0.1 – Bildergalerie auf der Albumseite
   ========================================================================== */

.ck-gallery {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

.ck-gallery--single {
  grid-template-columns: minmax(0, 360px);
}

.ck-gallery__cover img,
.ck-gallery__cover .ck-cover {
  width: 100%;
  height: auto;
}

.ck-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-gallery__thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
  background: #fff;
}

.ck-gallery__link {
  display: block;
}

.ck-gallery__link:focus-visible {
  outline: 3px solid var(--ck-blue);
  outline-offset: 2px;
}

.ck-edition__item--nocover {
  grid-template-columns: 1fr;
}

.ck-lightbox {
  width: min(96vw, 1100px);
  max-width: 96vw;
  max-height: 96vh;
  padding: 2.8rem .5rem 1rem;
  border: var(--ck-line, 3px solid #14110f);
  border-radius: var(--ck-radius, 10px);
  background: var(--ck-paper, #fffdf5);
  color: var(--ck-ink, #14110f);
}

/* Open: arrow | picture | arrow – the arrows sit next to the picture, always visible and clickable with the mouse. */
.ck-lightbox[open] {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: .5rem;
}

.ck-lightbox::backdrop {
  background: rgba(20, 17, 15, .8);
}

.ck-lightbox__figure {
  grid-column: 2;
  margin: 0;
  text-align: center;
}

.ck-lightbox__img {
  max-width: 100%;
  max-height: calc(96vh - 7rem);
  height: auto;
}

.ck-lightbox__caption {
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--ck-muted, #5b564e);
}

.ck-lightbox__nav,
.ck-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--ck-ink, #14110f);
  border-radius: 999px;
  background: var(--ck-yellow, #ffd400);
  color: var(--ck-ink, #14110f);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.ck-lightbox__nav:hover,
.ck-lightbox__close:hover {
  background: var(--ck-ink, #14110f);
  color: var(--ck-yellow, #ffd400);
}

.ck-lightbox__nav--prev {
  grid-column: 1;
  grid-row: 1;
}

.ck-lightbox__nav--next {
  grid-column: 3;
  grid-row: 1;
}

.ck-lightbox__nav[hidden] {
  display: none;
}

.ck-lightbox__close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.6rem;
}

.ck-lightbox__nav:focus-visible,
.ck-lightbox__close:focus-visible {
  outline: 3px solid var(--ck-blue, #0b4ea2);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .ck-gallery {
    grid-template-columns: 1fr;
  }

  .ck-lightbox[open] {
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
    gap: .25rem;
  }

  .ck-lightbox__nav {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.5rem;
  }
}

/* 4.3.0: own collection entries edited in place (status, condition, storage location) */
.ck-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem .5rem;
  margin: 0;
}

.ck-inline__save {
  order: 10;
}

.ck .ck-inline select,
.ck .ck-inline .ck-storage-input {
  flex: none;
  width: auto;
  max-width: none;
  min-height: 2.2rem;
  padding: .2rem .4rem;
  font-size: .9rem;
}

/* The general ".ck select" (white, full width) is more specific than a single class: prefix with .ck (tester U1/U2). */
.ck .ck-inline__status {
  min-width: 6.2rem;
  font-weight: 700;
}

.ck .ck-inline__status--owned {
  background: #d9f2d4;
}

.ck .ck-inline__status--forsale {
  background: var(--ck-yellow);
}

.ck .ck-inline__status--wanted {
  background: var(--ck-blue);
  color: #fff;
}

.ck .ck-inline__status option {
  background: #fff;
  color: var(--ck-ink);
  font-weight: 400;
}

.ck .ck-inline__condition {
  min-width: 3.9rem;
}

.ck .ck-inline .ck-storage-input {
  flex: 1 1 8rem;
  min-width: 6rem;
}

.ck .ck-inline .ck-inline__field {
  display: flex;
  margin: 0;
  white-space: nowrap;
}

.ck .ck-inline .ck-inline__field--storage {
  flex: 1 1 8rem;
  min-width: 6rem;
}

/* The entry column needs the room for the three fields in one line. */
.ck-collection-table td.ck-col-entry {
  min-width: 21rem;
}

.ck-inline--js .ck-inline__save {
  display: none;
}

.ck-inline__state {
  font-size: .85rem;
  color: var(--ck-muted);
}

.ck-inline__state.is-error {
  color: var(--ck-red);
  font-weight: 700;
}

.ck-collection__entries .ck-inline {
  margin: .25rem 0;
}

/* 4.3.0: sale in the message centre */
.ck-agent__conversation li.is-system {
  justify-self: center;
  max-width: 90%;
  background: #f1efe6;
  border-style: dashed;
  text-align: center;
}

.ck-sale {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-sale h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.ck-sale__fields {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: flex-end;
}

.ck-sale__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

@media (max-width: 600px) {
  .ck-inline {
    flex-wrap: wrap;
  }

  .ck-collection-table td.ck-col-entry {
    min-width: 0;
  }
}

/* 4.4.0: "+" / "−" at the covers of the catalogue (logged-in users) */
.ck .ck-quick {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid #111;
  border-radius: 50%;
  color: #111;
  font: 700 1.35rem/1 sans-serif;
  cursor: pointer;
  box-shadow: 1px 1px 0 #111;
}

.ck .ck-quick--add {
  background: #3fbf4f;
}

.ck .ck-quick--remove {
  background: #e5484d;
}

.ck .ck-quick:hover,
.ck .ck-quick:focus-visible {
  transform: scale(1.12);
}

.ck .ck-quick:focus-visible {
  outline: 3px solid var(--ck-blue, #0b4ea2);
  outline-offset: 2px;
}

.ck .ck-quick:disabled {
  cursor: progress;
  opacity: .6;
}

.ck-quick-dialog {
  max-width: min(32rem, 92vw);
  padding: 1rem 1.25rem;
  border: 3px solid var(--ck-ink, #14110f);
  border-radius: var(--ck-radius, 10px);
  background: var(--ck-paper, #fffdf5);
  color: var(--ck-ink, #14110f);
}

.ck-quick-dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}

.ck-quick-dialog__list {
  margin: .5rem 0;
  padding: 0;
  list-style: none;
}

.ck-quick-dialog__list li {
  padding: .3rem 0;
  border-bottom: 1px dashed #bbb;
}

.ck-quick-dialog__hint {
  min-height: 1.2em;
  color: var(--ck-red, #e30613);
  font-weight: 700;
}

.ck-quick-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ck-quick-dialog__list li.is-offer {
  font-weight: 700;
}

/* ---- 5.0.0: scan pages (Quick Scan, Batch Scan, Sammlungsabfrage), page "comicfan-App" -------------------------- */

.ck-scan-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ck-scan-tile__link {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: #fff;
  box-shadow: var(--ck-shadow);
  color: var(--ck-ink) !important;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
}

.ck-scan-tile__link:hover,
.ck-scan-tile__link:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ck-ink);
}

.ck-scan-tile__icon {
  font-size: 2rem;
  line-height: 1;
}

.ck-scan-tile__title {
  font-family: var(--ck-font-display);
  font-size: 1.5rem;
  letter-spacing: .04em;
}

.ck-scan-tile__text {
  color: var(--ck-muted);
}

.ck-scan-panel {
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
}

.ck-scan-panel__camera {
  margin: 0 0 .75rem;
}

.ck-scan-panel__start {
  width: 100%;
  max-width: 24rem;
  padding: .8rem 1.2rem;
  font-size: 1.35rem;
}

.ck-scan-panel__manual {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem;
  margin: 0;
}

.ck .ck-scan-panel__manual input[type="text"] {
  font-size: 1.15rem;
  letter-spacing: .04em;
}

.ck-scan-panel__status {
  min-height: 1.5em;
  margin: .5rem 0 0;
  font-weight: 700;
}

.ck-scan-panel__status.is-error,
.ck-scan-verdict__text {
  color: var(--ck-red);
}

.ck-scan-options {
  margin: 0 0 1rem;
}

.ck-scan-options summary {
  cursor: pointer;
  font-weight: 700;
}

.ck-scan-results:empty {
  display: none;
}

.ck-scan-choose {
  font-weight: 700;
}

.ck-scan-card {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .4rem 1rem;
  margin: 0 0 1rem;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: #fff;
  box-shadow: var(--ck-shadow);
}

.ck-scan-card > .ck-scan-own,
.ck-scan-card > .ck-scan-actions,
.ck-scan-card > .ck-scan-actions__state {
  grid-column: 1 / -1;
}

.ck-scan-card--compact {
  grid-template-columns: 4.5rem 1fr;
  margin: .75rem 0 0;
  padding: .6rem;
  box-shadow: none;
}

.ck-scan-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border: 2px solid var(--ck-ink);
  border-radius: 4px;
  background: #eee;
}

.ck-scan-card__body p,
.ck-scan-card__body h2,
.ck-scan-card__body h3 {
  margin: 0 0 .2rem;
}

.ck-scan-card__title {
  font-size: 1.25rem;
  line-height: 1.25;
}

.ck-scan-card__series {
  font-weight: 700;
}

.ck-scan-card__meta,
.ck-scan-card__isbn,
.ck-scan-card__source {
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-scan-own {
  padding: .5rem .75rem;
  border-radius: 6px;
  background: var(--ck-paper);
}

.ck-scan-own p,
.ck-scan-own ul {
  margin: 0;
}

.ck-scan-own__head {
  font-weight: 700;
}

.ck-scan-own__list {
  padding-left: 1.2rem;
}

.ck-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ck .ck-scan-add {
  flex: 1 1 8rem;
  min-height: 2.75rem;
  font-size: 1.05rem;
}

.ck .ck-scan-add--owned {
  background: #d9f2d4;
}

.ck .ck-scan-add--wanted {
  background: #dbe7f7;
}

.ck .ck-scan-add--forsale {
  background: var(--ck-yellow);
}

.ck-scan-actions__state {
  min-height: 1.2em;
  margin: 0;
  font-weight: 700;
}

.ck-scan-hint {
  font-weight: 400;
}

.ck-scan-next-row {
  margin: 1rem 0;
}

.ck .ck-scan-next {
  width: 100%;
  max-width: 24rem;
  padding: .8rem 1.2rem;
  font-size: 1.35rem;
}

/* Sammlungsabfrage: big, unmistakable verdict */
.ck-scan-verdict {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 4px solid var(--ck-ink);
  border-radius: var(--ck-radius);
  background: #eee;
  box-shadow: var(--ck-shadow);
}

.ck-scan-verdict__head {
  margin: 0 0 .25rem;
  font-family: var(--ck-font-display);
  font-size: clamp(2rem, 8vw, 3.2rem);
  letter-spacing: .04em;
  line-height: 1.05;
}

.ck-scan-verdict__list {
  margin: 0 0 .5rem;
  padding-left: 1.2rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.ck-scan-verdict--owned {
  background: #b8e6ad;
}

.ck-scan-verdict--forsale {
  background: var(--ck-yellow);
}

.ck-scan-verdict--wanted {
  background: var(--ck-blue);
  color: #fff;
}

.ck-scan-verdict--wanted a,
.ck-scan-verdict--wanted .ck-scan-card__meta,
.ck-scan-verdict--wanted .ck-scan-card__isbn {
  color: var(--ck-ink);
}

.ck-scan-verdict--none {
  background: #fff;
}

.ck-scan-verdict--notfound {
  background: #ffd9d9;
}

.ck-scan-verdict--notfound .ck-scan-verdict__head {
  color: var(--ck-red);
}

.ck-scan-verdict--notfound:not(.ck-scan-verdict--big) .ck-scan-verdict__head {
  font-size: 1.8rem;
}

.ck-scan-verdict__action {
  margin: .5rem 0 0;
}

/* Batch Scan */
.ck-scan-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.ck-scan-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .5rem 0;
  border-bottom: 1px dashed #bbb;
}

.ck-scan-row__body p {
  margin: 0;
}

.ck-scan-row__title {
  font-weight: 700;
}

.ck-scan-row__series,
.ck-scan-row__meta,
.ck-scan-row__code {
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-scan-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .25rem !important;
}

.ck-scan-row__badges .ck-badge {
  white-space: normal;
}

.ck-scan-row.is-notfound .ck-scan-row__title {
  color: var(--ck-red);
}

.ck-scan-row__choose {
  margin: .3rem 0 0;
  padding: .3rem .6rem;
  border: 2px solid var(--ck-ink);
  border-radius: 6px;
}

.ck-scan-row__choose legend {
  font-size: .85rem;
  font-weight: 700;
}

.ck-scan-takeover .ck-btn--primary {
  font-size: 1.2rem;
}

.ck-scan-report {
  margin: 1rem 0;
  padding: 1rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: #fff;
}

.ck-scan-report__item.is-invalid,
.ck-scan-report__item.is-exists {
  color: var(--ck-muted);
}

/* The camera overlay (a <dialog> inside the .ck wrapper, see scan.js) */
.ck-scan-overlay {
  width: min(40rem, 96vw);
  max-width: 96vw;
  max-height: 96vh;
  padding: .75rem;
  border: 3px solid var(--ck-ink, #14110f);
  border-radius: var(--ck-radius, 10px);
  background: var(--ck-paper, #fffdf5);
  color: var(--ck-ink, #14110f);
}

.ck-scan-overlay::backdrop {
  background: rgba(0, 0, 0, .75);
}

.ck-scan-overlay__title {
  margin: 0 0 .5rem;
  font-size: 1.2rem;
}

.ck-scan-overlay__view {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  aspect-ratio: 4 / 3;
}

.ck-scan-overlay__view video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ck-scan-overlay__frame {
  position: absolute;
  inset: 30% 10%;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: border-color .15s ease;
}

.ck-scan-overlay.is-hit .ck-scan-overlay__frame {
  border-color: #3ddc4a;
  box-shadow: 0 0 0 100vmax rgba(61, 220, 74, .25);
}

/* 5.12.0: the recognised volume during the pause after a code (batch scan) */
.ck-scan-overlay__result {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0 0;
  padding: .5rem .75rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: #e9fbe9;
  color: var(--ck-ink);
}

.ck-scan-overlay__result[hidden] {
  display: none;
}

.ck-scan-overlay__result.is-miss {
  background: #fde8e8;
}

.ck-scan-overlay__result img {
  flex: none;
  width: 60px;
  height: auto;
}

.ck-scan-overlay__result p {
  margin: 0;
}

.ck-scan-overlay__result-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.ck-scan-row.is-new {
  outline: 3px solid var(--ck-blue);
  outline-offset: 2px;
}

.ck-scan-overlay__status {
  min-height: 1.5em;
  margin: .5rem 0;
  font-weight: 700;
}

.ck-scan-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.ck-scan-overlay__torch[aria-pressed="true"] {
  background: var(--ck-yellow, #ffd400);
}

@media (prefers-reduced-motion: reduce) {
  .ck-scan-overlay__frame,
  .ck-scan-tile__link {
    transition: none;
  }
}

/* comicfan-App */
.ck-app-section {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: #fff;
}

.ck-app-section h2 {
  margin-top: 0;
}

.ck-app-steps {
  padding-left: 1.4rem;
}

/* Camera symbol of the scan button, drawn in CSS (the display font has no emoji) */
.ck-scan-panel__icon {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: .9em;
  margin-right: .5em;
  border: 3px solid currentColor;
  border-radius: 4px;
  vertical-align: -.1em;
}

.ck-scan-panel__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .42em;
  height: .42em;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ck-scan-row__badges .ck-badge {
  border-radius: 8px;
}

.ck-app-check dd {
  margin: 0 0 .5rem;
  overflow-wrap: anywhere;
}

.ck-app-check code {
  font-size: .85rem;
}

.ck-scan-row__option {
  display: block;
  width: 100%;
  margin: .3rem 0;
  text-align: left;
  text-transform: none;
  font-family: inherit;
  white-space: normal;
}

/* ---- 5.2.0: Serien- und Verlagsübersicht (Logo-Karten) ---------------- */

.ck-grid--logos {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.ck-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: .5rem;
  box-sizing: border-box;
  overflow: hidden;
  border: var(--ck-line);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--ck-shadow);
  transition: transform .12s ease;
}

.ck-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ck-logo--empty {
  background:
    radial-gradient(circle at 25% 25%, rgba(0, 0, 0, .14) 1.5px, transparent 2px) 0 0 / 10px 10px,
    var(--ck-paper);
}

/* An album cover (Band 1) as the series picture: on paper instead of white. */
.ck-logo--cover {
  background: var(--ck-paper);
}

.ck-card__link:hover .ck-logo,
.ck-card__link:focus-visible .ck-logo {
  transform: rotate(-1.5deg) scale(1.02);
}

.ck-card--publisher {
  display: flex;
  flex-direction: column;
}

.ck-card--publisher .ck-card__link {
  height: auto;
}

.ck-card__labels {
  margin: .3rem .1rem 0;
  color: var(--ck-muted);
  font-size: .8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ck-card__labels > span {
  font-weight: 700;
}

/* 5.54.1: author page -- picture top left, at most as wide as the album cover (one column of .ck-gallery:
   2/5 of the width less its 1rem gap), text flows around it on the right; never cropped. Without a picture the
   page keeps its old spacing (no flow-root). */
.ck-author__intro:has(> .ck-author__portrait) {
  display: flow-root;
}

.ck-author__portrait {
  float: left;
  width: min(18rem, calc((100% - 1rem) * .4));
  margin: 0 1.5rem 1rem 0;
}

.ck-author__portrait .ck-cover {
  aspect-ratio: auto 5 / 7;
  box-shadow: 6px 6px 0 var(--ck-ink);
}

.ck-author__portrait .ck-cover--empty {
  aspect-ratio: 5 / 7;
}

.ck-author .ck-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Detail page: logo (series/publisher) above the heading, never cropped. */
.ck-header__logobox {
  max-width: 18rem;
  margin: 0 0 1rem;
}

.ck-header__logobox .ck-header__logo {
  box-shadow: var(--ck-shadow);
}

.ck-logo-credit {
  margin-top: .3rem;
  color: var(--ck-muted);
  font-size: .72rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (max-width: 30em) {
  .ck-grid--logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
  }
}

/* 5.10.0: Voreinstellungen (block on the right, hint above the lists) and "Meine Serien / Meine Alben". */
.mod-ck-prefs {
  display: grid;
  gap: .35rem;
}

.mod-ck-prefs__hint {
  margin: 0 0 .25rem;
  color: var(--ck-muted);
  font-size: .9em;
}

.mod-ck-prefs__field {
  font-weight: 700;
  margin-top: .25rem;
}

.mod-ck-prefs select {
  width: 100%;
  min-width: 0;
}

.ck-prefs-notice {
  margin: .5rem 0;
  color: var(--ck-muted);
  font-size: .95em;
}

.ck-prefs-notice a {
  text-decoration: underline;
}

.ck-mycounts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0;
}

.ck-myseries li + li {
  margin-top: .25rem;
}

/* 5.10.2: Block „Meine Sammlung“ – Meine Serien / Meine Alben unter dem Text. */
.mod-ck-mycollection__counts {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
}

.mod-ck-mycollection__counts li + li {
  margin-top: .25rem;
}

/* 5.12.0: Verlag / Label / Serie picker in „Comic vorschlagen“ */
.ck-picker {
  position: relative;
}

.ck-picker__list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  margin: .25rem 0 0;
  padding: .25rem;
  list-style: none;
  border: var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-paper);
  box-shadow: var(--ck-shadow);
}

.ck-picker__list[hidden] {
  display: none;
}

.ck-picker__option {
  display: block;
  padding: .35rem .5rem;
  border: 0;
  background: transparent;
  color: var(--ck-ink);
  text-align: left;
  cursor: pointer;
}

.ck-picker__option:hover,
.ck-picker__option[aria-selected="true"] {
  background: var(--ck-yellow);
}

.ck-picker__option:last-child {
  font-style: italic;
  border-top: 1px solid var(--ck-muted);
}

/* ===================================================================================================================
 * 5.20.0: Lagerort ändern, Lesestatus, „Was lesen andere?“, Comic-Katalog-Einstellungen
 * =================================================================================================================== */
.ck-storage-search {
  margin-top: 1rem;
}

.ck-storage-results {
  margin: 1rem 0;
}

.ck-storage-copies {
  border: 0;
  margin: .4rem 0 0;
  padding: 0;
}

.ck-storage-copies legend {
  font-size: .9rem;
  font-weight: 700;
  padding: 0;
}

.ck-storage-copies .ck-check {
  display: block;
  margin: .2rem 0;
}

.ck-storage-row__notowned {
  color: var(--ck-red);
  margin-top: .3rem !important;
}

.ck-reading {
  margin: 1.5rem 0;
}

.ck-reading__counts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
}

.ck-reading__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem;
}

.ck-reading-badge {
  margin-left: .35rem;
  font-size: .75rem;
}

.ck-reading-ranking {
  margin: 1.5rem 0;
}

.ck-reading-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ck-reading-row {
  display: grid;
  grid-template-columns: 2.5rem 4.5rem 1fr;
  gap: .75rem;
  align-items: start;
  padding: .6rem 0;
  border-bottom: 1px dashed #bbb;
}

.ck-reading-list--mine .ck-reading-row {
  grid-template-columns: 4.5rem 1fr;
}

.ck-reading-row__place {
  font-family: var(--ck-font-display);
  font-size: 1.6rem;
  line-height: 1;
}

.ck-reading-row__cover img,
.ck-reading-row__cover .ck-cover {
  width: 4.5rem;
  height: auto;
}

.ck-reading-row__body p {
  margin: 0 0 .15rem;
}

.ck-reading-row__series,
.ck-reading-row__subtitle,
.ck-reading-row__isbn {
  color: var(--ck-muted);
  font-size: .9rem;
}

.ck-reading-row__title {
  font-weight: 700;
}

.ck-reading-row__details summary {
  cursor: pointer;
  font-size: .9rem;
}

.ck-reading-pager,
.ck-reading-more,
.ck-reading-mine__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: .75rem 0;
}

.ck-settings__section {
  margin: 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #bbb;
}

@media (max-width: 480px) {
  .ck-reading-row {
    grid-template-columns: 2rem 3.5rem 1fr;
  }

  .ck-reading-row__cover img,
  .ck-reading-row__cover .ck-cover {
    width: 3.5rem;
  }
}

/* 5.21.0 (tester): hidden buttons of the collection import really hidden (.ck-btn sets display) */
.ck-chimport .ck-btn[hidden] {
  display: none;
}

/* 5.51.0: Scanolino import on "Sammlung importieren" */
.ck-scanolino {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ck-line);
}

.ck-scanolino__choices select {
  max-width: 100%;
}

.ck-scanolino__open {
  margin-left: .4rem;
  font-size: .85em;
}

.ck-scanolino__none ul {
  max-height: 20rem;
  overflow: auto;
}

/* 5.52.0: Sammlungsdruck (Auswahlliste + Optionen), Cover-Thumbnails, „komplette Serie“ */
.ck-pdf-form {
  margin: 0 0 1rem;
}

.ck-collection-table .ck-col-thumb {
  width: 44px;
  min-width: 44px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* Fixed box regardless of the template's img { max-width: 100%; height: auto } -- a squeezed table
   column must not shrink the cover. */
.ck-collection-table img.ck-thumb,
.ck-thumb {
  display: block;
  box-sizing: content-box;
  width: 36px;
  min-width: 36px;
  max-width: none;
  height: 50px;
  margin: 0;
  /* fills the box; a wrap-around (landscape) cover shows its right half, the front, and not a tiny strip */
  object-fit: cover;
  object-position: right top;
  background: rgba(0, 0, 0, 0.04);
}

.ck-thumb--empty {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}

.ck-row-missing td {
  color: var(--ck-muted);
}

.ck-row-missing a {
  color: var(--ck-muted);
  font-style: italic;
}

/* 5.52.0: every series table of Meine Sammlung with the same column widths (each series is a table of its own; with
   automatic widths each one was as wide as its content, and the entry column pushed them past the content area) */
.ck-mycollection {
  container: ck-collection / inline-size;
}

.ck-collection-table.ck-series-group__table {
  table-layout: fixed;
}

.ck-series-group__table .ck-col-issue {
  width: 4rem;
}

.ck-series-group__table .ck-col-thumb {
  width: calc(36px + 1.1rem);
}

.ck-series-group__table th.ck-col-entry {
  width: 21rem;
}

.ck-series-group__table .ck-col-price {
  width: 6.5rem;
}

.ck-series-group__table .ck-col-notes {
  width: 18%;
}

.ck-series-group__table .ck-col-actions {
  width: 4rem;
  white-space: nowrap;
}

/* 5.52.0: Bearbeiten / Löschen as small icons (the text as tooltip and for screen readers) */
.ck-series-group__table .ck-col-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  color: var(--ck-blue);
  text-decoration: none;
}

.ck-series-group__table .ck-col-actions a:hover,
.ck-series-group__table .ck-col-actions a:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}

.ck-series-group__table .ck-col-actions .ck-item-remove {
  color: var(--ck-red);
}

.ck-icon {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  -webkit-mask: var(--ck-icon) center / contain no-repeat;
  mask: var(--ck-icon) center / contain no-repeat;
}

.ck-icon--edit {
  --ck-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.ck-icon--delete {
  --ck-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

.ck-series-group__table td {
  overflow-wrap: anywhere;
}

/* user 2026-11-05: the storage field much narrower (it took the whole rest of the line) */
.ck .ck-series-group__table .ck-inline .ck-inline__field--storage,
.ck .ck-series-group__table .ck-inline .ck-storage-input {
  flex: 0 1 9.5rem;
  width: 9.5rem;
  min-width: 6rem;
}

/* Too narrow for the columns side by side: every row as the same grid -- number (and cover) on the left, title and
   actions in the first line, entry, price and note below the title. */
@container ck-collection (max-width: 62rem) {
  .ck-collection-table.ck-series-group__table,
  .ck-series-group__table tbody {
    display: block;
  }

  .ck-series-group__table thead {
    display: none;
  }

  /* user 2026-11-05: the note right of the storage field (the entry column is as wide as the three fields) */
  .ck-series-group__table tr {
    display: grid;
    grid-template-columns: 3.5rem 21.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "issue title title actions"
      "issue entry notes notes"
      "issue price price price";
    padding: .4rem 0;
    border-bottom: 1px solid rgba(20, 17, 15, .15);
  }

  .ck-series-group__table--covers tr {
    grid-template-columns: 3.5rem calc(52px + .6rem) 21.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "issue thumb title title actions"
      "issue thumb entry notes notes"
      "issue thumb price price price";
  }

  .ck-series-group__table td {
    border: 0;
    padding: .1rem .3rem;
  }

  .ck-series-group__table td:empty {
    display: none;
  }

  .ck-series-group__table .ck-col-issue { grid-area: issue; width: auto; }
  .ck-series-group__table .ck-col-thumb { grid-area: thumb; width: auto; }
  .ck-series-group__table .ck-col-title { grid-area: title; }
  .ck-series-group__table td.ck-col-entry { grid-area: entry; min-width: 0; }
  .ck-series-group__table .ck-col-price { grid-area: price; width: auto; font-size: .88rem; }
  .ck-series-group__table .ck-col-notes { grid-area: notes; width: auto; font-size: .88rem; }
  .ck-series-group__table .ck-col-actions { grid-area: actions; width: auto; }

  .ck-series-group__table .ck-inline {
    flex-wrap: wrap;
  }

  .ck-series-group__table .ck-col-notes {
    align-self: center;
  }

  /* user 2026-11-05: the edit form under an entry over the whole width (not in the number column of the grid) */
  .ck-series-group__table tr.ck-item-edit-row,
  .ck-series-group__table tr.ck-item-edit-row > td {
    display: block;
    width: auto;
  }

  /* user 2026-11-05: the cover as high as the title and entry lines together */
  .ck-collection-table img.ck-thumb,
  .ck-series-group__table .ck-thumb {
    width: 52px;
    min-width: 52px;
    height: 72px;
  }
}

/* Too narrow for the note beside the entry fields (phones): the note below them */
@container ck-collection (max-width: 38rem) {
  .ck-series-group__table tr {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "issue title actions"
      "issue entry entry"
      "issue notes notes"
      "issue price price";
  }

  .ck-series-group__table--covers tr {
    grid-template-columns: 3.5rem calc(52px + .6rem) minmax(0, 1fr) auto;
    grid-template-areas:
      "issue thumb title actions"
      "issue thumb entry entry"
      "issue thumb notes notes"
      "issue thumb price price";
  }
}

/* 5.53.0: Ab 18 -- deutliche Kennzeichnung und Platzhalter statt Cover/Medien */
.ck-badge--adult {
  color: #fff;
  font-weight: 800;
  background: #c8102e;
  border-color: #c8102e;
}

.ck-cover--adult {
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #1a1a1a;
}

.ck-cover--adult > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  background: #c8102e;
  border: 3px solid #fff;
  border-radius: 50%;
}

.ck-thumb--adult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: #c8102e;
}

.ck-adult-note {
  margin: .25rem 0 0;
  font-weight: 700;
}

/* 5.55.0: "Meine Neuerscheinungen" / "Meine Vorschau" -- one block per series */
.ck-period-series + .ck-period-series {
  margin-top: 1.5rem;
}

.ck-period-series .ck-series-heading {
  font-size: 1.2rem;
  margin: 0 0 .6rem;
}

/* 2026-11-10 (user): album detail -- series name above number/title, larger than the breadcrumb */
.ck-album__series {
  margin: 0 0 .2rem;
  font-family: var(--ck-font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.ck-album__series a {
  text-decoration: none;
}

.ck-album__series a:hover,
.ck-album__series a:focus-visible {
  text-decoration: underline;
}

/* 2026-11-10 (user): album detail -- "Auflage" heading plain like the field labels (ISBN, ...), not a display heading */
.ck-album .ck-edition > h2 {
  margin: 1.5rem 0 .25rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  line-height: inherit;
  text-transform: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  color: inherit;
}