/* Public service explanation and editorial checklist. No runtime dependencies. */
html.cm-guide-page { scroll-behavior: auto; }
#cartmellow .cm-service-details {
  padding-block: 56px;
  background: var(--cm-soft);
}
#cartmellow .cm-service-intro { max-width: 720px; }
#cartmellow .cm-service-intro h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.7px; }
#cartmellow .cm-service-intro > p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--cm-muted); }
#cartmellow .cm-service-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 30px; }
#cartmellow .cm-service-art { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 0 12px -18px; mix-blend-mode: multiply; }
#cartmellow .cm-service-columns h3 { font-size: 18px; font-weight: 500; }
#cartmellow .cm-service-columns p { margin-top: 10px; color: var(--cm-muted); font-size: 15px; line-height: 1.75; }
#cartmellow .cm-service-note { margin-top: 28px; font-size: 13px; color: var(--cm-muted); }
#cartmellow .cm-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
#cartmellow .cm-service-details > .cm-text-link { margin-top: 10px; }

#cartmellow .cm-public-nav { max-width: 1280px; gap: 40px; }
#cartmellow .cm-public-nav .cm-links { flex: 1; align-items: center; }
#cartmellow .cm-public-nav .cm-links > a:not(.cm-nav-cta) { display: inline-flex; align-items: center; min-height: 48px; line-height: 1.2; }
#cartmellow .cm-public-nav .cm-nav-cta { height: 44px; line-height: 1.2; }
#cartmellow .cm-public-nav .cm-links > a { white-space: nowrap; }
@media (min-width: 901px) {
  #cartmellow .cm-public-nav .cm-links > a,
  #cartmellow .cm-public-nav .cm-links > .cm-language-switch { transform: translateY(3px); }
}
#cartmellow .cm-public-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
#cartmellow .cm-language-switch { display: flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; font-size: 13px; }
#cartmellow .cm-language-switch a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 3px; color: var(--cm-muted); }
#cartmellow .cm-language-switch a[aria-current="true"] { color: var(--cm-ink); text-decoration: underline; text-underline-offset: 5px; }
#cartmellow .cm-mobile-nav { display: none; }
@media (min-width: 761px) {
  #cartmellow[lang="de"] .cm-hero h1 { font-size: clamp(42px, 5vw, 60px); }
}
#cartmellow .cm-guide { max-width: 1280px; margin: 0 auto; padding: 24px 48px 72px; }
#cartmellow .cm-guide a:not(.cm-button) { text-decoration: underline; text-underline-offset: 4px; }
#cartmellow .cm-guide a:not(.cm-button):hover { text-decoration-thickness: 2px; }
#cartmellow .cm-guide-breadcrumb { font-size: 14px; color: var(--cm-muted); }
#cartmellow .cm-guide-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
#cartmellow .cm-guide-hero { display: grid; grid-template-columns: 1.55fr 1fr; align-items: center; gap: 40px; padding: 28px 0 48px; }
#cartmellow .cm-guide-header h1 { font-size: clamp(38px, 4.5vw, 56px); line-height: 1.08; letter-spacing: -1.5px; text-wrap: wrap; }
@media (min-width: 901px) {
  #cartmellow .cm-guide-header h1 { font-size: clamp(32px, 4vw, 52px); white-space: nowrap; }
}
#cartmellow .cm-guide-header .cm-guide-deck { margin-top: 24px; font-size: 20px; color: var(--cm-ink); }
#cartmellow .cm-guide-header > p { margin-top: 16px; max-width: 48ch; font-size: 16px; line-height: 1.75; color: var(--cm-muted); }
#cartmellow .cm-guide-header > .cm-text-link { margin-top: 20px; }
#cartmellow .cm-guide-header .cm-guide-byline { font-size: 13px; margin-top: 20px; }
#cartmellow .cm-guide-visual { margin: 0; }
#cartmellow .cm-guide-visual > img { display: block; width: 100%; height: auto; }
#cartmellow .cm-guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; border-top: 1px solid var(--cm-rule); padding-top: 36px; align-items: start; }
#cartmellow .cm-guide-toc { font-size: 14px; }
#cartmellow .cm-guide-toc h2 { font-size: 16px; letter-spacing: 0; font-weight: 500; margin-bottom: 12px; }
#cartmellow .cm-guide-toc ol { margin: 0; padding: 0; list-style: none; }
#cartmellow .cm-guide-toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--cm-muted); }
#cartmellow .cm-guide-body { font-size: 16px; line-height: 1.8; }
#cartmellow .cm-guide-body p { max-width: 72ch; }
#cartmellow .cm-guide-body section { margin-top: 40px; scroll-margin-top: 24px; }
#cartmellow .cm-guide-body > section:first-child { margin-top: 0; }
#cartmellow .cm-guide-body h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.7px; margin-bottom: 18px; text-wrap: balance; }
#cartmellow .cm-guide-body h3 { font-size: 19px; font-weight: 500; line-height: 1.4; }
#cartmellow .cm-guide-body p + p { margin-top: 14px; }
#cartmellow .cm-guide-body ul { padding-left: 22px; margin: 16px 0; }
#cartmellow .cm-guide-body ul li + li { margin-top: 10px; }
#cartmellow .cm-guide-body .cm-checks { list-style: decimal-leading-zero; margin: 24px 0 0; padding-left: 36px; }
#cartmellow .cm-checks > li { padding: 24px 0 24px 8px; border-top: 1px solid var(--cm-rule); }
#cartmellow .cm-checks > li::marker { font-size: 14px; font-weight: 500; color: var(--cm-brand-yellow-text); }
#cartmellow .cm-checks p { margin-top: 10px; color: var(--cm-muted); }
#cartmellow .cm-checks p strong { font-weight: 500; color: var(--cm-ink); }
#cartmellow .cm-guide-example { margin-top: 28px; padding: 28px; background: #f5f4ee; border-radius: 8px; }
#cartmellow .cm-guide-example > p { margin-top: 14px; }
#cartmellow .cm-guide-example dl { margin: 20px 0; }
#cartmellow .cm-guide-example dl > div { display: flex; justify-content: space-between; gap: 24px; padding: 9px 0; border-bottom: 1px solid #dedfd5; }
#cartmellow .cm-guide-example dt { flex: 1; }
#cartmellow .cm-guide-example dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
#cartmellow .cm-guide-example .cm-example-total { font-weight: 600; }
#cartmellow .cm-guide-example .cm-guide-small { font-size: 14px; color: var(--cm-muted); }
#cartmellow .cm-guide-scope { border-left: 3px solid var(--cm-brand-yellow-border); padding: 4px 0 4px 20px; margin: 22px 0; }
#cartmellow .cm-guide-body .cm-guide-cta { padding: 32px; background: #f5f4ee; border-radius: 8px; }
#cartmellow .cm-guide-cta .cm-button { margin-top: 24px; }
#cartmellow .cm-guide-body .cm-guide-references { font-size: 14px; color: var(--cm-muted); }
#cartmellow .cm-guide-references h2 { font-size: 21px; }

@media (max-width: 1136px) {
  #cartmellow .cm-guide-layout { gap: 40px; }
  #cartmellow .cm-guide-hero { gap: 32px; }
}
@media (max-width: 900px) {
  #cartmellow .cm-public-nav { position: relative; gap: 24px; }
  #cartmellow .cm-public-nav .cm-links { display: none; }
  #cartmellow .cm-mobile-nav { display: block; margin-left: auto; }
  #cartmellow .cm-mobile-nav summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; line-height: 1; border: 1px solid var(--cm-rule); border-radius: 50%; background: #f3f3ef; cursor: pointer; list-style: none; }
  #cartmellow .cm-mobile-nav summary svg { display: block; flex: none; }
  #cartmellow .cm-mobile-nav summary::-webkit-details-marker { display: none; }
  #cartmellow .cm-mobile-nav summary:focus-visible { outline: 2px solid var(--cm-brand-yellow-text); outline-offset: 4px; }
  #cartmellow .cm-menu-close, #cartmellow .cm-mobile-nav[open] .cm-menu-open { display: none; }
  #cartmellow .cm-mobile-nav[open] .cm-menu-close { display: inline; }
  #cartmellow .cm-mobile-links { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 128px 48px max(32px, env(safe-area-inset-bottom)); overflow-y: auto; background: #fff; }
  #cartmellow .cm-mobile-links > a { display: flex; align-items: center; min-height: 56px; font-size: 30px; line-height: 1.25; }
  #cartmellow .cm-mobile-links .cm-language-switch { order: 1; margin: auto 0 0; padding-top: 32px; font-size: 16px; }
  #cartmellow .cm-mobile-links .cm-language-switch a { min-width: 44px; justify-content: center; }
  #cartmellow .cm-mobile-links .cm-nav-cta { align-self: flex-start; margin-top: 16px; min-height: 44px; font-size: 16px; }
  #cartmellow .cm-public-nav:has(.cm-mobile-nav[open]) { min-height: 96px; }
  #cartmellow .cm-public-nav:has(.cm-mobile-nav[open]) .cm-brand { position: fixed; z-index: 32; top: 24px; left: 48px; }
  #cartmellow .cm-mobile-nav[open] summary { position: fixed; z-index: 32; top: 24px; right: 48px; }
  body:has(.cm-mobile-nav[open]) { overflow: hidden; }
  body:has(.cm-mobile-nav[open]) > .skip-link,
  #cartmellow:has(.cm-mobile-nav[open]) > main,
  #cartmellow:has(.cm-mobile-nav[open]) > footer { visibility: hidden; }
  #cartmellow .cm-service-columns { gap: 24px; }
  #cartmellow .cm-guide-layout { grid-template-columns: 1fr; gap: 36px; }
  #cartmellow .cm-guide-hero { grid-template-columns: 1fr; gap: 28px; }
  #cartmellow .cm-guide-visual { max-width: 300px; width: 100%; justify-self: center; }
  #cartmellow .cm-guide-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 760px) {
  #cartmellow .cm-guide { padding-inline: 26px; }
  #cartmellow .cm-mobile-links { padding-inline: 26px; padding-top: 116px; }
  #cartmellow .cm-public-nav:has(.cm-mobile-nav[open]) { min-height: 84px; }
  #cartmellow .cm-public-nav:has(.cm-mobile-nav[open]) .cm-brand { top: 20px; left: 26px; }
  #cartmellow .cm-mobile-nav[open] summary { top: 20px; right: 26px; }
}
@media (max-width: 740px) {
  #cartmellow .cm-service-details { padding-block: 32px 40px; }
  #cartmellow .cm-service-intro h2 { font-size: 27px; }
  #cartmellow .cm-service-columns { grid-template-columns: 1fr; gap: 24px; }
  #cartmellow .cm-service-columns > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  #cartmellow .cm-service-art { grid-row: 1 / 3; width: 96px; height: 96px; margin: 0; }
  #cartmellow .cm-service-columns h3, #cartmellow .cm-service-columns p { grid-column: 2; }
  #cartmellow .cm-service-note { margin-top: 24px; }
  #cartmellow .cm-guide { padding-top: 4px; padding-bottom: 48px; }
  #cartmellow .cm-guide-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 32px; }
  #cartmellow .cm-guide-visual { max-width: 260px; width: 100%; justify-self: center; }
  #cartmellow .cm-guide-header h1 { letter-spacing: -1px; }
  #cartmellow .cm-guide-header .cm-guide-deck { font-size: 20px; }
  #cartmellow .cm-guide-header > p { font-size: 16px; }
  #cartmellow .cm-guide-layout { padding-top: 28px; }
  #cartmellow .cm-guide-body section { margin-top: 36px; }
  #cartmellow .cm-guide-body h2 { font-size: 27px; }
  #cartmellow .cm-guide-body .cm-checks { padding-left: 28px; }
  #cartmellow .cm-checks > li { padding-left: 4px; }
  #cartmellow .cm-guide-example, #cartmellow .cm-guide-body .cm-guide-cta { padding: 22px; }
}
@media (max-width: 380px) {
  #cartmellow .cm-service-columns > div { grid-template-columns: 80px minmax(0, 1fr); }
  #cartmellow .cm-service-art { width: 80px; height: 80px; }
}
@media print {
  #cartmellow { overflow: visible; }
  #cartmellow .cm-nav, #cartmellow .cm-footer, #cartmellow .cm-guide-toc, #cartmellow .cm-guide-breadcrumb, #cartmellow .cm-guide-cta, #cartmellow .cm-guide-visual, #cartmellow .cm-guide-header > .cm-text-link, .skip-link { display: none; }
  #cartmellow .cm-guide { margin: 0; padding: 0; max-width: none; }
  #cartmellow .cm-guide-hero { display: block; padding: 0 0 20px; }
  #cartmellow .cm-guide-header h1 { font-size: 30pt; }
  #cartmellow .cm-guide-layout { display: block; padding-top: 20px; }
  #cartmellow .cm-guide-body, #cartmellow .cm-guide-header > p { font-size: 11pt; }
  #cartmellow .cm-guide-body h2 { font-size: 20pt; break-after: avoid; }
  #cartmellow .cm-checks > li, #cartmellow .cm-guide-example { break-inside: avoid; }
}
