/** Shopify CDN: Minification failed

Line 621:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:1) */
/* one line down to 320px: the client line is 297px at 12px, it wrapped to two lines below 360 */
@media (max-width: 359px) { .announcement-bar { font-size: 11px; letter-spacing: 0; padding-inline: 10px; } }
/* L2 (2026-10-17): one line on every screen. The parts are flex items in a one-line-high box: where the whole text does
   not fit, the part after " · " wraps onto a second line that is clipped. The browser measures the fit, no breakpoint. */
.announcement-bar p { display: flex; flex-wrap: wrap; justify-content: center; height: 1.6em; line-height: 1.6; overflow: hidden; }
/* very low phones sideways (568x320, L3): less padding, same type, so the hero button fits the first screen */
@media (orientation: landscape) and (max-height: 340px) { .announcement-bar { padding-block: 5px; } }
/* END_SECTION:announcement-bar */

/* START_SECTION:apps (INDEX:2) */
/* L33: Pandectes writes 65 % type (10.4px) inline on its cookie table and breaks words inside cookie names; the table
   keeps the 13.5px floor for legal text and scrolls sideways on narrow screens instead */
#pandectes-declaration-container > p:first-child { font-size: var(--t-small) !important; }
#pandectes-declaration-container table { font-size: var(--t-small) !important; border-collapse: collapse; margin-bottom: 0 !important; }
#pandectes-declaration-container th, #pandectes-declaration-container td { overflow-wrap: normal !important; padding: 8px 10px !important; border: 1px solid var(--line); vertical-align: top; }
#pandectes-declaration-container .cookie-table { margin: 0 0 40px; max-width: 100%; overflow-x: auto; }
#pandectes-declaration-container .cookie-table:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 749px) {
  #pandectes-declaration-container table { width: max-content !important; }
  #pandectes-declaration-container th, #pandectes-declaration-container td { white-space: nowrap; }
}
/* END_SECTION:apps */

/* START_SECTION:b2b-funnel (INDEX:4) */
/* 2026-10-19 (T7, Nachtrag Für Profis): next to the 814 px form the 222 px "Unterlagen" card left about 590 px empty (1024 to 1920).
   One column from 861 px as on phones: the card above the form, both as wide as the use-case row; the form puts its four short fields in
   two columns, the message field and everything after it span both */
@media (min-width: 861px) {
  .b2b .b2b__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .b2b .b2b__grid > div:first-child { position: static; }
  .b2b .b2b__norms p { max-width: 75ch; }
  .b2b .b2b__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .b2b .b2b__form > * { grid-column: 1 / -1; }
  .b2b .b2b__form > .contact-form__row:has(input:not([type="hidden"]), select) { grid-column: auto; }
  .b2b .b2b__form > .button { justify-self: start; }
}
/* END_SECTION:b2b-funnel */

/* START_SECTION:blog-teaser (INDEX:8) */
/* --- Ratgeber teaser (rebuilt 2026-10-15): large card left, two compact cards right, like the set cards --- */
.ratgeber-teaser { background: var(--bg); }
.rt__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 36px; }
.rt__head h2 { font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.05; margin: 14px 0 10px; }
.rt__head p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 52ch; }
.rt__all { flex: none; padding-block: 10px; color: var(--ink); font-weight: 600; font-size: var(--t-small); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rt__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.rt-card { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: stretch; background: var(--card); border-radius: var(--r-lg); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.rt-card--lead { grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.rt-card__media { position: relative; overflow: hidden; background: var(--line); }
.rt-card__media picture, .rt-card__media img { display: block; width: 100%; height: 100%; }
.rt-card__media img { object-fit: cover; transition: transform .35s ease; }
.rt-card--lead .rt-card__media { aspect-ratio: 16 / 10; }
.rt-card:not(.rt-card--lead) .rt-card__media img { object-position: 28% 50%; }
.rt-card__body { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px; }
.rt-card--lead .rt-card__body { padding: 26px 30px 30px; }
.rt-card__cat { font-size: var(--t-small); font-weight: 600; color: var(--lime-deep); }
.rt-card__title { margin: 6px 0 8px; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.rt-card--lead .rt-card__title { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.15; }
.rt-card__title a { color: var(--ink); text-decoration: none; }
.rt-card__text { margin: 0 0 14px; color: var(--muted); font-size: var(--t-body); line-height: 1.55; }
/* "what you learn": in the type of the "Weiterlesen" link (ink, 600, small), lime dots (Alex 2026-10-15); side by side in the large card,
   stacked in the compact cards */
.rt-card__points { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rt-card--lead .rt-card__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px; }
@media (max-width: 520px) { .rt-card--lead .rt-card__points { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.rt-card__points li { position: relative; padding-left: 15px; color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.45; }
.rt-card__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.rt-card__more { margin-top: auto; color: var(--ink); font-weight: 600; font-size: var(--t-small); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* --- lead magnet "Hygieneplan" (copy worker mock card.css / bar.css, 2026-10-15) --- */
.rt__head:has(.lm-card) { align-items: center; }
.rt__all-row { margin: -16px 0 24px; }
/* lead magnet card, dialog and bar rules live in sections/footer.liquid since 18.10.: this section is not rendered (audit A-ALEX-02) */
/* the whole card opens the article, as the set and step cards; hover lift on pointer devices only */
.rt-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.rt-card__title a:focus-visible { outline: none; }
.rt-card__title a:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (hover: hover) {
  .rt-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(16,29,23,.04), 0 4px 10px rgba(16,29,23,.05), 0 26px 50px -22px rgba(16,29,23,.3); }
  .rt-card:hover .rt-card__media img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-card, .rt-card__media img { transition: none; }
  .rt-card:hover, .rt-card:hover .rt-card__media img { transform: none; }
}
@media (max-width: 960px) {
  .rt__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rt-card--lead { grid-row: auto; }
  .rt__head { margin-bottom: 26px; }
}
/* phones: every card with its photo on top (the long article titles were cramped next to a 104 px photo) */
@media (max-width: 520px) {
  .rt-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rt-card__media { aspect-ratio: 2 / 1; }
  .rt-card--lead .rt-card__media { aspect-ratio: 16 / 10; }
  .rt-card__body, .rt-card--lead .rt-card__body { padding: 18px 20px 22px; }
}
/* END_SECTION:blog-teaser */

/* START_SECTION:cart-drawer (INDEX:10) */
p.drawer__title { font-family: var(--font-display); font-weight: 600; line-height: 1.06; }
.cx__ship { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--lime-deep); }
.cart-vol { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--lime-deep); }
/* cart drawer rebuild 2026-09-29. Layout shell (dialog, body, scroll) stays in base.css.
   .cfs / .ctrust / .cx are shared with the cart page: this section renders on every page. */
.cd { width: min(460px, 100vw); background: var(--bg); }
.cd__head { padding: 18px 22px; background: var(--bg); }
.cd .drawer__count { font-family: var(--font-body); font-size: var(--t-small); font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.cd__freeship { padding: 14px 22px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.cfs__note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 10px; font-size: var(--t-small); color: var(--ink); }
.cfs__cost { color: var(--muted); font-size: var(--t-small); }
.cfs__bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cfs__bar span { display: block; height: 100%; border-radius: 999px; background: var(--lime); }
.cfs--reached .cfs__note { margin: 0; justify-content: flex-start; gap: 8px; align-items: center; }
.cfs--reached .icon { color: var(--lime-deep); }
.cd .drawer__scroll { padding: 18px 22px 24px; }
.cd__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cd__line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cd__line:first-child { padding-top: 4px; }
.cd__media { display: block; aspect-ratio: 1; background: #fff; border-radius: var(--r); overflow: hidden; }
.cd__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cd__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cd__title { font-weight: 600; font-size: var(--t-body); line-height: 1.3; color: var(--ink); text-decoration: none; }
.cd__title:hover { text-decoration: underline; }
.cd__price { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }
.cd__meta { margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-micro); color: var(--muted); }
.cd__meta .base-price { color: var(--muted); font-size: var(--t-small); }
.cd__controls { display: flex; align-items: center; gap: 14px; }
.cd__qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.cd__qty button { border: 0; background: none; width: 44px; height: 44px; font-size: 17px; cursor: pointer; color: var(--ink); }
.cd__qty input { width: 36px; height: 44px; border: 0; text-align: center; font-size: var(--t-small); font-weight: 600; font-family: var(--font-body); background: none; }
.cd__remove { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; padding: 12px 4px; min-height: 44px; font-family: var(--font-body); }
.cd__line .biocide-warning--inline { margin: 12px 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.cd__foot { background: var(--paper); padding: 16px 22px 18px; border-top: 1px solid var(--line); }
.cd__subtotal { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.cd__subtotal strong { font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.cd__tax { margin: 2px 0 14px; font-size: var(--t-small); color: var(--muted); }
.cd__tax a { color: inherit; }
.cd__checkout { width: 100%; padding: 16px 28px; font-size: var(--t-lead); }
.cd__foot .ctrust { margin-top: 12px; gap: 4px 14px; font-size: 12px; }
.cd__foot .cd__pay { margin-top: 10px; }
@media (max-height: 760px) { .cd__foot .cd__pay { display: none; } }
.cd__pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; opacity: .85; }
.ctrust { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: var(--t-micro); color: var(--muted); }
.ctrust li { display: inline-flex; align-items: center; gap: 6px; }
.ctrust .icon { color: var(--lime-deep); }
.cx { margin-top: 22px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.cx__head { margin: 0 0 12px; font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.cx__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.cx__media { display: block; aspect-ratio: 1; background: var(--bg); border-radius: var(--r-sm); overflow: hidden; }
.cx__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cx__title { display: block; font-weight: 600; font-size: var(--t-small); color: var(--ink); text-decoration: none; line-height: 1.3; }
.cx__reason { margin: 3px 0 6px; font-size: var(--t-micro); color: var(--muted); line-height: 1.45; }
.cx__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--t-small); }
.cx__variant { color: var(--muted); font-size: var(--t-micro); }
.cx__price .base-price { color: var(--muted); font-size: var(--t-small); }
.cx .biocide-warning--inline { margin: 12px 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.cx__add { margin-top: 12px; width: 100%; min-height: 44px; border: 1px solid var(--forest); border-radius: 999px; background: #fff; color: var(--forest); font-weight: 600; font-size: var(--t-small); font-family: var(--font-body); cursor: pointer; }
.cx__add:hover { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.cd__empty { display: flex; flex-direction: column; }
.cd__empty-lead { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 8px 0 8px; }
.cd__empty-sub { color: var(--muted); font-size: var(--t-small); line-height: 1.55; margin: 0 0 20px; }
.cd__empty-cta { width: 100%; }
.cd__cats { margin-top: 26px; }
.cd__cats ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cd__cats a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: var(--t-small); text-decoration: none; }
.cd__cats a .icon { color: var(--muted); }
.cd__empty .ctrust { justify-content: flex-start; margin-top: 22px; }
@media (max-width: 420px) { .cd__line { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } }
/* END_SECTION:cart-drawer */

/* START_SECTION:contact-block (INDEX:12) */
/* 2026-09-29: the later ".section { padding: x 0 }" rule zeroed the side gutter, so the page
   sat 28px left of the header edge; a photo opens the info card. 20.10.2026: on phones too the form comes first
   (the card used to come first so the phone number sat in the first screen; the number is gone, the form is the way in) */
.section.contact-page { padding-inline: 28px; }
.contact-info { overflow: hidden; }
/* design system (M-023): one card, white, 18px, no border; dark forest stays a full band, never a rounded box */
.contact-page .contact-info { background: var(--card); color: var(--ink); border-radius: var(--r-lg); }
.contact-page .contact-info h2 { color: var(--ink); }
.contact-page .contact-info > p { color: var(--muted); }
.contact-page .contact-info__note { color: var(--faint); }
.contact-info__media { margin: -34px -30px 26px; aspect-ratio: 16 / 9; overflow: hidden; }
.contact-info__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the call-back line under the form: calm, a hairline above, the button reads like a link (tap area 44px) */
.contact-page__callback { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.contact-page__callback button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 4px; cursor: pointer; }
.contact-page__callback .icon { display: inline-block; flex: none; color: var(--lime-deep); }
/* side by side (sweep H21, Alex 18.10.: "Ja, alle 9"): the photo at the card's foot, so mail and phone sit in the first
   screen (phone was at page y 894 at 1280 x 800) */
@media (min-width: 861px) {
  .contact-page .contact-info { display: flex; flex-direction: column; }
  .contact-page .contact-info__media { order: 9; margin: 26px -30px -34px; }
}
/* END_SECTION:contact-block */

/* START_SECTION:cookie-list (INDEX:13) */
/* cookie-list (2026-10-17): the theme's own cookie declaration; legal text keeps the 13.5px floor */
.section.cookie-list { padding-top: var(--s4); padding-bottom: var(--s7); } /* the page head sits right above, in this section */
/* the column of the other legal pages (body .shopify-policy__container: 760px, 28px inside), heading included
   (sweep H19, Alex 18.10.: "Ja, alle 9"); the page head comes from another section, :has() finds it */
.cookie-list > .wrap, main:has(.cookie-list) .page--title-only { max-width: 760px; margin-inline: auto; padding-inline: 28px; }
.cookie-list__intro { max-width: 68ch; margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.6; }
.cookie-list__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 20px 0 8px; }
.cookie-list .cookie-list__open { width: auto; flex: none; min-height: 44px; margin: 0; padding: 10px 22px; }
.cookie-list__date { color: var(--faint); font-size: var(--t-small); }
.cookie-list__cat { margin: 48px 0 0; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; }
.cookie-list__cat-text { max-width: 68ch; margin: 8px 0 16px; color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
.cookie-list__table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; }
.cookie-list__table th, .cookie-list__table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie-list__table thead th { color: var(--faint); font-size: var(--t-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--line-strong); }
.cookie-list__table tbody th { font-weight: 600; }
.cookie-list__table code { font-family: inherit; overflow-wrap: anywhere; }
.cookie-list__table th:first-child { width: 22%; }
.cookie-list__table td:last-child { width: 14%; white-space: nowrap; }
.cookie-list__domain { display: block; color: var(--faint); }
/* phones: every cookie becomes a small card, no sideways scrolling */
@media (max-width: 749px) {
  .cookie-list__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cookie-list__table, .cookie-list__table tbody, .cookie-list__table tr, .cookie-list__table th, .cookie-list__table td { display: block; width: auto; }
  .cookie-list__table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cookie-list__table th, .cookie-list__table td { padding: 2px 0; border: 0; }
  .cookie-list__table td:last-child { width: auto; white-space: normal; }
  .cookie-list__table th:first-child { width: auto; }
  .cookie-list__table td::before { content: attr(data-label) ": "; color: var(--faint); font-weight: 600; }
}
/* END_SECTION:cookie-list */

/* START_SECTION:faq-section (INDEX:15) */
.home-faq__item summary .faq__q { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; margin: 0; text-wrap: inherit; }
/* FAQ page: the cards take the column of the old list next to the sticky topics */
@media (min-width: 1024px) { .faq-layout > .faq-topics { grid-column: 2; grid-row: 1 / span 3; } }
.faq-topics { margin: 0; }
.faq-topics > .faq__cat:first-child { margin-top: 0; }
/* L35 (2026-10-17): topic chips at least 44px tall (were 40px), the tap size used across the shop */
.faq__nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* below 1024 the chip row sticks under the header: a jump to a chapter left its heading under the row (375 and
   568 x 320, TQ point 46). html scroll-padding-top (sections/header) keeps the header's room; the row's own height
   (--faq-nav-h, set by the script above) comes on top */
@media (max-width: 1023px) { .faq-topics .faq__cat { scroll-margin-top: calc(var(--faq-nav-h, 60px) + 12px); } }
/* L10 B10: the chapter being read */
.faq__nav a[aria-current="true"] { border-color: var(--lime); background: var(--lime-soft); }
/* phones: the chip row scrolls sideways; a fade at the right edge says there is more at every width
   (at 360px the third chip started 2px past the edge, so nothing showed) */
@media (max-width: 700px) {
  .faq__nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
}
/* END_SECTION:faq-section */

/* START_SECTION:final-cta (INDEX:17) */
.final-cta__box { display: contents; }
/* card variant: rounded forest card on the page ground, copy left, white product stage right (phones: stage on top) */
.final-cta--card { background: var(--bg); text-align: left; }
.final-cta--card .final-cta__box { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); background: var(--forest); color: #e6eee4; border-radius: var(--r-xl); overflow: hidden; }
.final-cta--card .final-cta__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(36px, 5vw, 64px); }
/* Alex 2026-10-15: let it flow; the heading breaks after "passende", the text after "Böden," (full column width) */
.final-cta--card h2 { color: #fff; max-width: none; margin: 0 0 var(--s3); text-wrap: balance; }
.final-cta--card .final-cta__copy p { max-width: none; margin: 0 0 28px; text-wrap: pretty; }
.final-cta--card .final-cta__copy p.final-cta__fud { justify-content: flex-start; align-self: stretch; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.final-cta__stage { display: grid; place-items: center; background: var(--card); padding: clamp(24px, 4vw, 48px); }
.final-cta__stage img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
@media (max-width: 960px) {
  .final-cta--card .final-cta__box { grid-template-columns: minmax(0, 1fr); }
  .final-cta__stage { order: -1; aspect-ratio: 16 / 10; padding: 20px; }
  .final-cta__stage img { height: 100%; max-height: none; }
  .final-cta--card .final-cta__copy { padding: 30px 24px 32px; }
  .final-cta--card h2 { max-width: none; }
}
/* 2026-10-15 (Alex "optimieren und fixen"): the text ran 1164 px wide at 1280; now a readable measure, balanced */
.final-cta.section--dark p { max-width: 54ch; margin-inline: auto; text-wrap: balance; }
.final-cta__tel { white-space: nowrap; }
.final-cta__tel, .final-cta__help { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.final-cta p.final-cta__fud { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: none; margin: 22px 0 0; color: #9db3a4; font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
.final-cta__fud .icon { display: block; flex: none; color: var(--lime); }
/* four benefits, 2 x 2 under a hairline (one column on phones) */
.final-cta__perks { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; align-self: stretch; text-align: left; }
.final-cta__perks li { display: flex; align-items: flex-start; gap: 10px; color: #cfdcd2; font-size: var(--t-small); line-height: 1.45; }
.final-cta__perks .icon { display: block; flex: none; color: var(--lime); }
.final-cta__perks li span { text-wrap: balance; }
.section--dark .final-cta__perks { max-width: 620px; margin-inline: auto; }
.final-cta__perk-line { display: block; }
/* the first column takes the width of its longest line, so a two-line item stays two lines; between 961 and
   1199 px the copy column is too narrow for two columns, so the benefits stack */
.final-cta--card .final-cta__perks { grid-template-columns: max-content minmax(0, 1fr); }
@media (min-width: 961px) and (max-width: 1199px) { .final-cta--card .final-cta__perks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .final-cta__perks, .final-cta--card .final-cta__perks { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* the reply line under the contact button (20.10.2026) */
.final-cta--contact .final-cta__note { margin: 12px 0 0; font-size: var(--t-small); }
/* END_SECTION:final-cta */

/* START_SECTION:footer (INDEX:18) */
/* Alex 2026-10-15 (option B): no floating hCaptcha badge; every protected form shows snippets/captcha-note instead.
   The footer renders on every page, so the rule lives here (base.css has no budget left). */
body #shop-hcaptcha-badge-container { display: none; }
/* doubled class: wins over section rules like .lm-dialog p without !important */
p.captcha-note.captcha-note { margin: 8px 0 0; color: var(--faint); font-size: 12px; line-height: 1.5; }
.captcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.section--dark p.captcha-note.captcha-note { color: #7f9a8b; }
/* footer rebuild 2026-09-29: help band on top, brand + three link groups, two columns on phones */
/* help block (2026-10-15): open on the dark footer, the photo of the two people left, copy and two contact lines right */
.site-footer .site-footer__help { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 5.5vw, 80px); margin-bottom: 64px; }
/* the photo takes the height of the copy column (the img is out of flow, so it never sets the row height) */
.site-footer__help-media { position: relative; margin: 0; min-height: 300px; overflow: hidden; border-radius: var(--r-xl); background: #e9e9e7; }
.site-footer__help-media picture, .site-footer__help-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.site-footer__help-copy { align-self: center; }
.site-footer__help-media img { object-fit: cover; object-position: 50% 22%; }
.site-footer__help-title { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; color: #fff; }
.site-footer__help-text { margin: 14px 0 0; max-width: 46ch; color: #b9c9bd; font-size: var(--t-body); line-height: 1.55; }
.site-footer .site-footer__help-about { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-footer .site-footer__help-about:hover { color: var(--lime); }
/* Audit A40 (2026-10-16): tap area at least 44 px tall without moving the text (Apple HIG 44 pt, WCAG 2.5.8 minimum 24). */
.site-footer .site-footer__help-about { position: relative; }
.site-footer .site-footer__help-about::after { content: ""; position: absolute; inset: -12px -6px; } /* L10 34: 21.6px + 2 x 12 = 45.6px (11px gave 43.6, sweep 39) */
.site-footer__help-about .icon { display: block; flex: none; color: var(--lime); transition: transform .2s ease; }
.site-footer__help-about:hover .icon { transform: translateX(3px); }
.site-footer__help-list { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid #1b3229; }
.site-footer .site-footer__help-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; margin: 0; padding: 16px 0; border-top: 1px solid #1b3229; color: #fff; text-decoration: none; }
.site-footer__help-row small { grid-column: 1; color: #7f9a8b; font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.site-footer__help-row strong { grid-column: 1; margin-top: 2px; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 28px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
.site-footer__help-go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #2a463a; border-radius: 50%; color: var(--lime); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.site-footer__help-go .icon { display: block; }
.site-footer .site-footer__help-row:hover { color: #fff; }
.site-footer .site-footer__help-row:hover .site-footer__help-go { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
/* L9 (2026-10-17): the same contact rows on light ground (snippets/help-row in final-cta and on the contact page) */
.site-footer__help-note { margin: 14px 0 0; color: #b9c9bd; font-size: var(--t-small); line-height: 1.5; }
.site-footer__help-list.help-rows--light { margin: 0; border-bottom-color: var(--line); }
.help-rows--light .site-footer__help-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.help-rows--light .site-footer__help-row small { color: var(--muted); }
/* 18px floor: in the narrow contact card at 375px "support@vipibax.de" broke at 21px */
.help-rows--light .site-footer__help-row strong { font-size: clamp(18px, 2.3vw, 28px); }
.site-footer__help-value { grid-column: 1; margin-top: 2px; font-size: var(--t-body); line-height: 1.5; }
.help-rows--light .site-footer__help-go { border-color: var(--line-strong); color: var(--lime-deep); }
.help-rows--light .site-footer__help-row:hover { color: var(--ink); }
.help-rows--light .site-footer__help-row:hover .site-footer__help-go { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.site-footer__tagline { color: #7f9a8b; margin: 14px 0 16px; max-width: 280px; line-height: 1.5; }
@media (max-width: 640px) {
  .site-footer .site-footer__help { grid-template-columns: minmax(0, 1fr); }
  .site-footer__help-media { min-height: 0; aspect-ratio: 4 / 3; }
}
/* L20 (2026-10-17): language and country row above the legal line; border of the help-row circles, label colour of
   "TELEFON", lime chevron, pill like the collection sort select; 44px tall */
.site-footer__locale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 28px; }
.site-footer__locale label { display: grid; gap: 6px; color: #7f9a8b; font-size: var(--t-micro); font-weight: 600; }
.site-footer__locale select { min-height: 44px; max-width: 100%; padding: 0 42px 0 18px; border: 1px solid #2a463a; border-radius: 999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b4dc00' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 18px center; color: #fff; font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer; }
.site-footer__locale select:hover { border-color: #7f9a8b; }
.site-footer__locale select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.site-footer__locale option { color: var(--ink); background: #fff; }
@media (max-width: 480px) { .site-footer__locale { display: grid; grid-template-columns: minmax(0, 1fr); } .site-footer__locale select { width: 100%; } }
@media (max-width: 820px) {
  .site-footer .site-footer__help { margin-bottom: 48px; }
  .site-footer__help-go { width: 46px; height: 46px; }
  .site-footer .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer .site-footer__cols > div:first-child { grid-column: 1 / -1; }
}
/* 44px touch rows on phones and tablets (M-014); desktop keeps the tight list. L10 31 (2026-10-17): up to 1024px, the
   tablets from 821px had 26px rows (sweep: 834x1120 to 1024x1366) */
@media (max-width: 1024px) {
  .site-footer .site-footer__cols nav a { margin: 0; padding-block: 12px; }
}
/* --- lead magnet "Hygieneplan": card, dialog and bar (moved from sections/blog-teaser.liquid 18.10., audit A-ALEX-02 / A-DS-02:
   that section is disabled, so its stylesheet never shipped and the bar showed in Arial on 38 pages) --- */
.lm-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; flex: 1 1 400px; max-width: 470px; background: var(--lime-soft); border: 1px solid var(--lime-line); border-radius: var(--r-lg); padding: 20px 24px 20px 20px; }
.lm-card__thumb { transform: rotate(-4deg); filter: drop-shadow(0 14px 20px rgba(14,43,35,.22)); }
.lm-card__thumb img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.lm-card__badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-deep); }
.lm-card h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: -.01em; margin: 6px 0; }
.lm-card p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.lm-card__btn { padding: 12px 20px; font-size: 15px; }
/* the background repeats the two columns, so a sub-pixel gap at the bottom never shows the white UA background */
.lm-dialog { border: 0; padding: 0; background: linear-gradient(90deg, var(--forest) 260px, var(--paper) 260px); border-radius: var(--r-xl); max-width: 760px; width: calc(100% - 32px); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); }
/* L21 (2026-10-17): on short and sideways phones the form ran past the window (375x667 lost the hCaptcha line,
   360x584 and 568x320 the button). The window keeps 16px to every edge and scrolls inside. */
.lm-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.lm-dialog::backdrop { background: rgba(8,23,17,.55); backdrop-filter: blur(2px); }
.lm-dialog[open] { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.lm-dialog__media { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--forest); }
.lm-dialog__media > img { width: 100%; height: auto; transform: rotate(-4deg); border-radius: 6px; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); }
.lm-sheets { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1 / 1.2; }
.lm-sheet { position: absolute; width: 74%; border-radius: 4px; background: #fff; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); }
.lm-sheet picture, .lm-sheet img { display: block; width: 100%; height: auto; border-radius: 4px; }
.lm-sheet--back { right: 0; top: 9%; transform: rotate(5deg); }
.lm-sheet--front { left: 0; top: 0; transform: rotate(-4deg); }
.lm-dialog__body { position: relative; padding: 34px 34px 28px; background: var(--paper); }
.lm-dialog__close { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.lm-dialog__close:hover { background: var(--line); }
.lm-dialog h2 { font-family: var(--font-display); font-size: 30px; letter-spacing: -.02em; line-height: 1.08; margin: 8px 0 12px; }
.lm-dialog p { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0 0 18px; }
.lm-dialog label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.lm-field { display: flex; gap: 8px; padding: 6px; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; }
.lm-field:focus-within { border-color: var(--forest); box-shadow: 0 0 0 3px var(--lime-soft); }
.lm-field input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; outline: 0; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.lm-field .button { padding: 12px 20px; }
.lm-dialog .lm-consent { margin: 12px 0 0; font-size: 12px; }
.lm-dialog .lm-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lm-dialog .lm-error { color: #9b2c1f; font-weight: 600; }
/* bar v4 (Alex 2026-10-15, after rejecting the dark strip): a floating mini copy of the Hygieneplan card, bottom right */
.lmb { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 340px; min-height: 104px; padding: 16px 48px 16px 106px; background: var(--lime-soft); border: 1px solid var(--lime-line); border-radius: var(--r-lg); box-shadow: 0 26px 50px -24px rgba(14,43,35,.5); transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease, visibility .2s; }
.lmb[hidden] { display: none; }
.lmb.is-off { visibility: hidden; opacity: 0; transform: translateY(12px); pointer-events: none; }
/* Alex 2026-10-15: 4 % larger and shifted left, so the sheet breaks out over the top and left edge of the card */
.lmb__cover { position: absolute; left: 4px; bottom: 16px; width: 81px; height: auto; border-radius: 4px; border: 1px solid var(--line); background: #fff; transform: rotate(-6deg); transform-origin: 50% 100%; box-shadow: 0 12px 24px -10px rgba(14,43,35,.45); transition: transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.lmb__open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lmb__open::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.lmb__badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-deep); }
.lmb__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.lmb__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink); font-size: var(--t-small); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lmb__cta .icon { display: block; }
.lmb__x { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(16,29,23,.06); color: var(--ink); cursor: pointer; }
.lmb__x:hover { background: rgba(16,29,23,.12); }
/* L10 35 (2026-10-17): the 30px close button gets a 44px tap area without growing the visible circle */
.lmb__x::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.lmb__open:focus-visible { outline: none; }
.lmb__open:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
.lmb__x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) {
  .lmb:hover { transform: translateY(-3px); box-shadow: 0 32px 60px -24px rgba(14,43,35,.55); }
  .lmb:hover .lmb__cover { transform: rotate(-2deg) translateY(-8px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .lmb, .lmb__cover { transition: none; } .lmb:hover, .lmb:hover .lmb__cover { transform: rotate(-6deg); } .lmb:hover { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lm-dialog[open] { animation: lm-in .22s ease-out; }
}
@keyframes lm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 860px) { .lm-card { max-width: none; flex-basis: 100%; } }
/* sideways phones and other low windows: one column without the sheet (after the base rules, so it wins), so the form gets the width */
@media (max-height: 500px) {
  .lm-dialog[open] { grid-template-columns: minmax(0, 1fr); background: var(--paper); }
  .lm-dialog__media { display: none; }
  .lm-dialog__body { padding: 22px 26px 22px; }
  .lm-dialog h2 { font-size: 25px; margin-top: 6px; }
}
@media (max-width: 620px) {
  .lm-card { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 16px 16px 16px 14px; }
  .lm-card h3 { font-size: 19px; }
  .lm-card p { font-size: 14px; }
  .lm-card__btn { width: 100%; justify-content: center; text-align: center; }
  .lm-dialog[open] { grid-template-columns: minmax(0, 1fr); background: var(--paper); }
  .lm-dialog__media { padding: 22px 0 0; background: var(--paper); }
  .lm-dialog__media > img { width: 120px; }
  .lm-sheets { max-width: 170px; }
  .lm-sheet { box-shadow: 0 14px 28px -12px rgba(16,29,23,.45), 0 1px 3px rgba(16,29,23,.12); }
  .lm-dialog__body { padding: 18px 22px 24px; }
  .lm-dialog h2 { font-size: 25px; }
  .lm-field { flex-direction: column; border-radius: 16px; }
  .lm-field input { padding: 12px 10px; }
  .lmb { left: 18px; right: 12px; bottom: 12px; width: auto; min-height: 98px; padding: 12px 44px 12px 86px; }
  /* anchored to the card top: the overhang stays the same whether the title takes one line or two */
  .lmb__cover { left: 4px; top: -4px; bottom: auto; width: 65px; }
  .lmb__title { font-size: 15px; }
  .lmb__cta { margin-top: 4px; }
}
/* call-back row (20.10.2026, snippets/help-row opens: 'rueckruf'): a button that looks like the old phone row */
button.site-footer__help-row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
/* call-back window (snippets/rueckruf): the Hygieneplan window shell, the founders photo fills the left column */
.rr-dialog .lm-dialog__media { position: relative; padding: 0; }
.rr-dialog .lm-dialog__media picture, .rr-dialog .lm-dialog__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rr-dialog .lm-dialog__media img { object-fit: cover; object-position: 50% 22%; transform: none; border-radius: 0; box-shadow: none; }
.rr-dialog h2 { margin-bottom: 8px; }
.rr-form { display: grid; gap: 12px; }
.rr-form[hidden] { display: none; }
.rr-dialog .rr-form p { margin: 0; }
.rr-form .contact-form__row { margin: 0; }
.rr-form .contact-form__row label { margin-bottom: 5px; font-size: 14px; }
.rr-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rr-times { min-width: 0; margin: 0; padding: 0; border: 0; }
.rr-times legend { margin-bottom: 5px; padding: 0; font-size: 14px; font-weight: 600; }
.rr-times__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rr-dialog .rr-times__opts label { position: relative; margin: 0; font-weight: 600; }
.rr-times__opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rr-times__opts span { display: grid; place-items: center; min-height: 44px; padding: 0 6px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 14px; text-align: center; }
.rr-times__opts input:checked + span { border-color: var(--forest); background: var(--lime-soft); }
.rr-times__opts input:focus-visible + span { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.rr-form__send { width: 100%; margin-top: 4px; }
.rr-dialog p.rr-note { font-size: 12px; line-height: 1.5; }
.rr-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* done state, third version (20.10.2026, Alex: the check badge was "sehr generisch"): the founders photo with the home help band's
   white chip (.hb__chip, components.css), the heading, and the booked call as a card (number, time, topic, "Angaben ändern") */
.rr-done { display: grid; }
.rr-done[hidden] { display: none; }
.rr-dialog .rr-dialog__chip { z-index: 2; left: 16px; bottom: 16px; }
.rr-dialog .rr-dialog__chip[hidden] { display: none; }
.rr-dialog .rr-done h2 { margin: 2px 0 8px; padding-right: 36px; }
.rr-done h2:focus { outline: none; }
.rr-dialog .rr-done > p { margin: 0; }
.rr-call { margin: 22px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 14px 34px -24px rgba(14, 43, 35, .35); }
.rr-call[hidden] { display: none; }
.rr-call__main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px 16px; }
.rr-call__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime-soft); color: var(--lime-deep); }
.rr-call small { display: block; color: var(--muted); font-size: var(--t-micro); font-weight: 600; }
.rr-call__number { display: block; margin-top: 1px; font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.rr-call__rows { margin: 0; padding: 0 20px; list-style: none; border-top: 1px solid var(--line); }
.rr-call__rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; font-size: 15px; line-height: 1.45; }
.rr-call__rows li[hidden] { display: none; }
.rr-call__rows li + li { border-top: 1px solid var(--line); }
.rr-call__rows .icon { margin-top: 2px; color: var(--lime-deep); }
.rr-call__rows span { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rr-call__foot { padding: 10px 20px 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.rr-call__foot button { position: relative; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.rr-call__foot button::after { content: ""; position: absolute; inset: -12px -6px; }
.rr-dialog p.rr-done__tip { margin: 16px 0 0; font-size: 14px; }
.rr-done__go { justify-self: start; margin-top: 20px; }
/* phones: no photo in the form; in the done state the photo is a banner on top, the chip sits on its lower edge, the x on the photo */
@media (max-width: 620px) {
  .rr-dialog .lm-dialog__media { display: none; }
  .rr-dialog.is-done .lm-dialog__media { display: block; height: 176px; }
  .rr-dialog.is-done .lm-dialog__media img { object-position: 50% 26%; }
  .rr-dialog.is-done .rr-dialog__chip { bottom: -21px; left: 22px; }
  .rr-dialog.is-done .lm-dialog__body { position: static; padding-top: 38px; }
  .rr-dialog.is-done .lm-dialog__close { top: 10px; right: 10px; z-index: 3; background: var(--card); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4); }
  .rr-done__go { justify-self: stretch; }
}
@media (max-width: 359px) { .rr-form__pair { grid-template-columns: minmax(0, 1fr); } }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:20) */
/* L10 (2026-10-17, WCAG 2.4.11): keyboard focus never lands under the sticky header (73px; 48px on sideways phones) or the
   sticky buy bar (87px on phones, 73px from 768px). Browsers keep this room when they scroll a focused element in; the
   anchor offsets that did the same job for single targets (scroll-margin-top in base.css) would now add up, so they go to 0. */
html { scroll-padding-top: 89px; }
html:has([data-sticky-atc].is-visible) { scroll-padding-bottom: 103px; }
@media (min-width: 768px) { html:has([data-sticky-atc].is-visible) { scroll-padding-bottom: 89px; } }
html #anliegen, html .faq__cat, html .article__body h2 { scroll-margin-top: 0; }
/* L10 36/37 (2026-10-17): breadcrumb links on tablets were 26px tall targets (category 932 to 1024px, product pages 768 to
   1024px); the base.css tap layer grows to 44px there and 6px wider each side (the trail sits on its own line) */
@media (max-width: 1024px) { html .breadcrumb a::after { height: 44px; left: -7px; right: -7px; } } /* TQ 44: "Start" 30px + 2 x 7 = 44px wide */
/* header rebuild 2026-09-29: logo, nav next to it, search + cart right; drawer with product tiles and help */
.site-header .site-header__nav { justify-content: flex-start; gap: 40px; }
.site-header .site-header__actions { margin-left: auto; gap: 4px; }
.site-header .site-header__menu { gap: 28px; font-size: 15px; color: var(--ink); }
.site-header .site-header__menu > li > a { font-weight: 500; }
/* L10 32 (2026-10-17): the menu links were 24px tall targets (sweep: 932x430 to 1024x1366); an invisible 44px layer,
   ::before because ::after draws the mega-menu chevron. The header is 73px tall, so the layer stays inside it. */
.site-header .site-header__menu > li > a { position: relative; }
.site-header .site-header__menu > li > a::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.site-header .site-header__menu > li > a:hover { color: var(--forest); }
.site-header .site-header__menu > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--lime); }
.site-header__search { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--ink); }
.site-header__search:hover { background: var(--card); }
@media (max-width: 919px) {
  .site-header .site-header__nav { gap: 6px; }
  .site-header .site-header__burger { margin-left: -10px; }
}
/* two icons on the right no longer fit a centred logo below 400px (320px measured +5px) */
@media (max-width: 399px) {
  .site-header .site-header__nav { grid-template-columns: auto 1fr auto; }
  .site-header .site-header__nav > .logo { justify-self: start; }
  .site-header .site-header__search, .site-header .site-header__cart { width: 44px; min-width: 44px; padding: 0; }
}
/* feature tiles: megamenu right column and top of the phone drawer */
.hft { display: grid; gap: 10px; }
.hft__tile { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.hft__tile:hover { border-color: var(--forest); }
.hft__img { aspect-ratio: 1; border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.hft__img img { width: 100%; height: 100%; object-fit: contain; }
.hft__name { display: block; font-weight: 600; font-size: var(--t-small); line-height: 1.3; }
.hft__note { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.hft__price { display: block; margin-top: 5px; font-size: var(--t-small); font-weight: 600; }
.hft__price .base-price { font-weight: 400; color: var(--muted); font-size: var(--t-small); }
.hft--mobile { grid-template-columns: 1fr 1fr; margin: 4px 0 14px; }
.hft--mobile .hft__tile { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 10px 10px 12px; }
.hft--mobile .hft__img { aspect-ratio: 4 / 3; }
.hft--mobile .hft__note { display: none; }
.hft__vat { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-small); }
.hft__vat a { color: inherit; }
.hft__kick { margin: 0 0 10px; font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.megamenu__cols > .hft { padding-left: var(--s5); border-left: 1px solid var(--line); align-content: start; }
/* drawer help box */
.mobile-nav .mobile-nav__foot { background: var(--bg); }
.mobile-nav__help { display: grid; gap: 2px; }
.mobile-nav__help-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.mobile-nav__help a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mobile-nav__help .icon { color: var(--lime-deep); }
.mobile-nav__help-hours { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.mobile-nav .mnav-row { font-size: 17px; min-height: 52px; border-bottom: 1px solid var(--line); border-radius: 0; }
.mobile-nav .mobile-nav__list { gap: 0; }
/* 2026-09-29 one navigation system: only "Produkte" opens a panel, marked by a chevron;
   every other item is a plain link. Column labels in sentence case, not caps. */
.site-header__item--mega > a { display: inline-flex; align-items: center; gap: 6px; }
.site-header__item--mega > a::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; opacity: .7; }
.site-header__item--mega:hover > a::after, .site-header__item--mega:focus-within > a::after { transform: translateY(1px) rotate(225deg); }
.megamenu__kick, .mnav-panel__kick { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
/* short phones (664px iPhone 13 in Safari): the fixed help box left three nav rows visible (M-024) */
@media (max-height: 760px) { .mobile-nav__help-title, .mobile-nav__help-hours { display: none; } }
/* Audit A40 (2026-10-17): the logo link is 28 px tall on phones; a tap layer makes it 44 px without moving it. */
.site-header .logo { position: relative; }
.site-header .logo::after { content: ""; position: absolute; inset: -8px -4px; }
/* very low phones sideways (568x320, L3): a 48px bar instead of 72px; the 44px buttons and the 28px logo still fit.
   The FAQ chapter nav sticks right under the header (top: 72px in base.css), so it moves up with it. */
@media (orientation: landscape) and (max-height: 340px) { .site-header .site-header__nav { height: 48px; } .faq__nav { top: 48px; } }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:21) */
/* photo hero (2026-09-29): copy left on the page ground, photo right to the viewport edge */
.hero--photo { display: grid; background: var(--bg); }
.hero-photo__media { position: relative; overflow: hidden; background: var(--line); }
.hero-photo__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-photo__in { position: relative; }
.hero-photo__copy { max-width: 540px; }
/* Alex 2026-09-13 (T2): the homepage H1 tops out at 52px; this hero had brought back 58px */
.hero-photo__title { font-size: clamp(36px, 4.4vw, 52px); line-height: 1.03; letter-spacing: -.035em; margin: 0 0 20px; text-wrap: balance; }
/* the lime underline draws itself once, left to right (keyframes hero-underline in base.css);
   inline + clone so it follows every wrapped line; reduced motion gets the finished state */
.hero-photo__title .hl { background-image: linear-gradient(var(--lime), var(--lime)); background-size: 100% .13em; background-position: 0 93%; background-repeat: no-repeat; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: hero-underline .7s cubic-bezier(.22,.61,.36,1) .35s both; }
@media (prefers-reduced-motion: reduce) { .hero-photo__title .hl { animation: none; } }
.hero-photo__lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--muted); margin: 0 0 30px; max-width: 48ch; }
.hero-photo__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 26px; }
.hero-photo__link { display: inline-block; padding-block: 10px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hero-photo__facts { list-style: none; padding: 26px 0 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
.hero-photo__facts li { padding: 0; }
/* partner line: markup snippets/partner-line, CSS assets/components.css (2026-10-22); here only its place in the hero */
.hero-partners { margin-top: var(--s6); }
}
/* Alex 2026-10-15: the product card sits at the top of the photo, same inset as before at the bottom */
/* Alex 2026-10-15: more depth and a calm, late entrance. Hairline + tight contact shadow lift the white card off the
   bright window, a wide soft shadow gives height. The entrance animates translate/scale/opacity (not transform), so
   the hover lift can use transform. It starts after the H1 underline (.35s + .7s). Reduced motion: no entrance. */
.hero-photo__prod { position: absolute; left: 24px; top: 24px; display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--r-lg); padding: 6px 22px 6px 6px; text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px rgba(16,29,23,.05), 0 2px 4px rgba(16,29,23,.08), 0 10px 22px -10px rgba(16,29,23,.25), 0 32px 64px -24px rgba(16,29,23,.5); transition: transform .2s ease, box-shadow .2s ease; animation: hero-chip-in .6s cubic-bezier(.22,.61,.36,1) 1.1s both; z-index: 2; }
.hero-photo__prod:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(16,29,23,.05), 0 3px 6px rgba(16,29,23,.08), 0 14px 28px -10px rgba(16,29,23,.3), 0 40px 72px -24px rgba(16,29,23,.55); }
@keyframes hero-chip-in { from { opacity: 0; translate: 0 14px; scale: .96; } }
@media (prefers-reduced-motion: reduce) { .hero-photo__prod { animation: none; } }
/* 6px card padding + 12px tile radius = the card's 18px radius (concentric corners) */
.hero-photo__prod-img { flex: none; width: 68px; height: 68px; overflow: hidden; border-radius: var(--r); background: #fff; }
.hero-photo__prod-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-photo__prod-txt { display: grid; gap: 2px; font-size: var(--t-small); }
/* product name in the set-card title style (General Sans 600) */
.hero-photo__prod-txt b { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.hero-photo__prod-txt span { color: var(--muted); }
@media (min-width: 961px) {
  .hero--photo { grid-template-columns: 1fr; min-height: min(calc(100svh - 115px), 740px); }
  .hero-photo__media { position: absolute; inset: 0 0 0 50%; }
  .hero-photo__in { display: flex; align-items: center; width: 100%; padding-block: 64px; }
  .hero-photo__copy { width: calc(50% - 56px); }
  /* button + link never fit on one row here (648 > 526 px), so stack them: link centred under the button, as on phones */
  .hero-photo__ctas { display: grid; width: fit-content; justify-items: center; }
}
@media (max-width: 960px) {
  .hero-photo__prod { left: 12px; top: 12px; padding: 6px 16px 6px 6px; gap: 10px; }
  .hero-photo__prod-img { width: 48px; height: 48px; }
  .hero-photo__prod-txt b { font-size: 14px; }
  .hero-photo__media { aspect-ratio: 16 / 10; }
  .hero-photo__in { padding-block: 24px 44px; }
  .hero-photo__title { font-size: clamp(32px, 8.6vw, 44px); margin: 0 0 16px; text-wrap: pretty; }
  .hero-photo__lead { font-size: 16px; margin-bottom: 24px; }
  .hero-photo__ctas { display: grid; grid-template-columns: 1fr; justify-items: center; }
  .hero-photo__ctas .button { width: 100%; }
}
/* phones and small tablets held sideways (Alex 2026-10-17, Muster B): the desktop split, copy left, photo right to the
   edge, sized to the short screen. The photo fills the first screen only, so owner and dog stay in view; the product card
   shows packshot + name. The 38svh photo strip above the copy left the button 261 to 270px under the fold (844x390, 667x375). */
@media (max-width: 960px) and (orientation: landscape) {
  .hero-photo__media { position: absolute; inset: 0 0 auto 66%; height: calc(100vh - 115px); height: calc(100svh - 115px); max-height: 100%; aspect-ratio: auto; }
  .hero-photo__in { padding-block: 14px 32px; }
  .hero-photo__copy { width: calc(66% - 28px); max-width: none; }
  .hero-photo__title { font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 8px; }
  .hero-photo__lead { font-size: 15px; line-height: 1.5; margin-bottom: 14px; max-width: none; }
  .hero-photo__ctas { width: fit-content; }
  .hero-photo__ctas .button { width: auto; }
  .hero-photo__prod { left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 5px 14px 5px 5px; gap: 9px; }
  .hero-photo__prod-img { width: 40px; height: 40px; border-radius: var(--r-sm); }
  .hero-photo__prod-txt > span { display: none; }
}
/* phones sideways: the partner row never sits on the fold. The copy column (top at 129 = header 115 + 14) is at least
   100svh - 26px tall and the row is pushed to its end, so the 71px logo row starts 32px below the first screen; when the
   copy is taller, the row follows the link 48px later as before. Without this the fold cut the logos at 932x430 (EN). */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
  .hero-photo__copy { display: flex; flex-direction: column; min-height: calc(100vh - 26px); min-height: calc(100svh - 26px); }
  .hero-partners { margin-top: auto; padding-top: var(--s6); }
}
/* very low phones sideways (568x320, L3): the header is 79px here (announcement-bar.liquid, header.liquid), the copy
   column is wider so H1 and lead take 2 + 4 lines, and the button ends 16px inside the screen (it was 79px under) */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 340px) {
  .hero-photo__media { left: 74%; height: calc(100vh - 79px); height: calc(100svh - 79px); }
  .hero-photo__in { padding-block: 10px 24px; }
  .hero-photo__copy { width: calc(74% - 24px); min-height: calc(100vh + 14px); min-height: calc(100svh + 14px); }
  .hero-photo__title { font-size: 20px; }
  .hero-photo__lead { margin-bottom: 12px; }
}
/* tablets upright (Alex 2026-10-17, Muster B): the photo gives up height so the whole hero with link and partner row is
   the first screen. 671 = header 115 + copy down to the partner row bottom 540 + 16 air (measured at 768); tall tablets
   keep 16:10. 768x900 had the button 83px under the fold, iPad Air / Pro 11 in Safari cut the partner logos. */
@media (min-width: 481px) and (max-width: 960px) and (orientation: portrait) {
  .hero-photo__media { aspect-ratio: auto; height: clamp(240px, calc(100vh - 671px), 62.5vw); height: clamp(240px, calc(100svh - 671px), 62.5vw); }
}
@media (max-width: 520px) { .hero-photo__facts { grid-template-columns: 1fr; gap: 10px; } }
/* first screen on phones (T3, Alex 2026-10-16): the photo gives up height on short screens, so the first button ends
   16px inside 360x584, 375x635, 390x664 and 414x715. 500px = header 115 + copy down to the button bottom (~369) + 16 air;
   svh = height with the browser bars shown. Tall phones keep the 2:1 photo (50vw cap). The media is a size container
   for the compact product card below. */
@media (max-width: 480px) {
  .hero-photo__media { aspect-ratio: auto; height: clamp(96px, calc(100vh - 500px), 50vw); height: clamp(96px, calc(100svh - 500px), 50vw); container-type: size; }
  /* the 268px label broke onto 2 left-aligned lines in the 304px button at 360 (2 x 28px padding) */
  .hero-photo__ctas .button { padding: 4px 16px; text-align: center; text-wrap: balance; }
  /* the product chip sat on the dog's head at bottom left (M-026); at the top it hid the woman's face */
  .hero-photo__prod { left: auto; right: 12px; top: auto; bottom: 12px; }
  .hero-photo__in { padding-top: 16px; }
  .hero-photo__title { margin: 0 0 12px; }
  .hero-photo__lead { margin-bottom: 16px; }
}
/* partner row on phones upright (T8, 19.10., audit A-ALEX-15): the fold cut the logo row in a 48 px band of window heights on every
   width (DE 375: 760 to 808, EN 320: 712 to 760, measured). Tall phones (from 756 px): the photo gives up height so the row ends 16 px
   inside the first screen (header 115 + copy down to the row bottom up to 527 + 16 = 660). Lower phones: the row never shows there,
   so when it would be cut it moves just under the first screen (copy at least the screen minus header 115, photo and padding 16, plus
   the 48 px gap, the 56 px row and 8 px air; the row is pushed to its end, its padding keeps the 48 px gap to the link) */
@media (max-width: 480px) and (min-height: 756px) {
  .hero-photo__media { height: clamp(96px, calc(100vh - 660px), 50vw); height: clamp(96px, calc(100svh - 660px), 50vw); }
}
@media (max-width: 480px) and (max-height: 755px) {
  .hero-photo__copy { display: flex; flex-direction: column; min-height: calc(100vh - 19px - clamp(96px, calc(100vh - 500px), 50vw)); min-height: calc(100svh - 19px - clamp(96px, calc(100svh - 500px), 50vw)); }
  .hero-partners { margin-top: auto; padding-top: var(--s6); }
}
/* photo shorter than 2:1 at 360: the full 329x60 card would cover it, so packshot + name only (the subline repeats the
   lead below) and the crop centres on owner and dog */
@container (max-height: 179px) {
  .hero-photo__media img { object-position: 50% 48%; }
  .hero-photo__prod { padding: 5px 14px 5px 5px; gap: 9px; bottom: 10px; right: 10px; }
  .hero-photo__prod-img { width: 40px; height: 40px; border-radius: var(--r-sm); }
  .hero-photo__prod-txt > span { display: none; }
}
/* smallest phones (320 wide, Muster B): the 8.6vw formula wants 27.5px, the 32px floor gave a 4-line H1 over a 6-line lead
   and the button ended 37px (DE) / 45px (EN) under the fold of 320x568 */
@media (max-width: 340px) {
  .hero-photo__title { font-size: 28px; }
  .hero-photo__lead { font-size: 15px; }
}
/* short laptops (Muster B): the hero is one screen (min-height 100svh - 115px), so the copy and the partner row must fit
   in it; at 1280x720 and 1366x768 the fold cut the partner logos. Tall screens keep 64px padding and the 52px H1. */
@media (min-width: 961px) and (max-height: 860px) {
  .hero-photo__in { padding-block: 32px; }
  .hero-photo__title { font-size: clamp(36px, min(4.4vw, 6.4vh), 52px); font-size: clamp(36px, min(4.4vw, 6.4svh), 52px); }
  .hero-partners { margin-top: var(--s5); }
}
/* very short laptop windows (a 1366x768 or 1280x720 screen minus taskbar and browser bar is ~633 or ~585px):
   the same composition one size smaller */
@media (min-width: 961px) and (max-height: 700px) {
  .hero-photo__in { padding-block: 20px; }
  .hero-photo__title { font-size: clamp(32px, min(4.4vw, 5.6vh), 52px); font-size: clamp(32px, min(4.4vw, 5.6svh), 52px); margin-bottom: 12px; }
  .hero-photo__lead { font-size: 17px; margin-bottom: 20px; }
  .hero-partners { margin-top: 20px; }
  .hero-partners__list img { height: calc(var(--h, 44px) * .8); }
}
/* END_SECTION:hero */

/* START_SECTION:main-article (INDEX:28) */
/* 2026-09-29: reading typography and the set bridge */
.article--premium { max-width: 780px; margin-inline: auto; padding-bottom: clamp(56px, 8vw, 96px); }
.article--premium .article__eyebrow { font-size: var(--t-small); font-weight: 600; letter-spacing: 0; text-transform: none; }
.article--premium .article__title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.032em; margin: 12px 0 18px; text-wrap: balance; }
.article--premium .article__lede { color: var(--ink); font-size: clamp(18px, 1.8vw, 21px); max-width: 60ch; }
.article--premium .article__hero { margin: 0 0 clamp(28px, 4vw, 44px); border-radius: var(--r-xl); overflow: hidden; }
.article--premium .article__hero img { display: block; width: 100%; height: auto; }
.article--premium .article__body { font-size: 18px; line-height: 1.72; color: var(--ink); max-width: 68ch; }
.article--premium .article__body p, .article--premium .article__body li { color: #2b3a33; }
.article--premium .article__body h2 { font-size: clamp(25px, 2.6vw, 31px); line-height: 1.15; letter-spacing: -.022em; margin: 1.9em 0 .55em; }
.article--premium .article__body h3 { font-size: 21px; letter-spacing: -.012em; margin: 1.5em 0 .4em; }
.article--premium .article__body ul, .article--premium .article__body ol { padding-left: 1.2em; }
.article--premium .article__body li { margin: .35em 0; }
.article--premium .article__body img { border-radius: var(--r-lg); }
/* photos placed in the text by snippets/article-inline-images (2026-10-18) */
.article--premium .article__inline { margin: 2em 0 0; }
.article--premium .article__inline img { display: block; width: 100%; height: auto; }
/* sources under the text (2026-10-18): quiet, below a rule, the same measure as the text */
.article__sources { max-width: 68ch; margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.article__sources h2 { font-size: var(--t-h3); letter-spacing: -.015em; margin: 0 0 10px; }
.article__sources ol { margin: 0; padding-left: 1.3em; font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.article__sources li { margin: .4em 0; overflow-wrap: anywhere; }
.article__sources a { color: var(--ink); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* author box at the end of the article (snippets/author-person), as wide as the boundary note. 22.10.2026: the card layout Alex
   approved for the article end on 21.10. ("ok Autor"): card with photo, name and role on the left, eyebrow, bio and link on the right */
.article__author-box { margin: var(--s6) 0 0; padding: 28px; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 32px; align-items: start; background: color-mix(in srgb, var(--line) 38%, var(--bg)); border-radius: var(--r-xl); }
.article__author-box-card { display: block; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; color: inherit; text-decoration: none; }
.article__author-box-pic { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--line); border-bottom: 1px solid var(--line-strong); }
.article__author-box-pic picture { display: block; }
.article__author-box-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.article__author-box-id { display: block; padding: 14px 16px 16px; }
.article__author-box-name { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.article__author-box-card:hover .article__author-box-name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.article__author-box-role { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.article__author-box-text { padding-top: 2px; }
.article__author-box-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--muted); margin: 0 0 12px; }
.article__author-box-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--lime); flex: none; }
.article__author-box-bio { font-size: 17px; line-height: 1.65; color: #2b3a33; margin: 0 0 20px; }
.article__author-box-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 0; }
.article__author-box-link::after { content: "\2192"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-size: 15px; }
.article__author-box-link:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.article__author-name a { color: inherit; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* the author's photo replaces the flask in the byline once the author data is complete (Alex 22.10.2026) */
.article__avatar--photo { overflow: hidden; border-color: var(--line); }
.article__avatar--photo picture, .article__avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  /* phones: the card lies flat, photo left, name and role right; text below */
  .article__author-box { grid-template-columns: 1fr; gap: 20px; padding: 18px 16px 22px; }
  .article__author-box-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
  .article__author-box-pic { aspect-ratio: auto; align-self: stretch; min-height: 104px; border-bottom: 0; border-right: 1px solid var(--line-strong); }
  .article__author-box-id { padding: 12px 14px; }
  .article__author-box-name { font-size: 19px; }
  .article__author-box-role { font-size: 14px; }
  .article__author-box-bio { font-size: 15.5px; margin-bottom: 16px; }
}
/* the list numbers take the size of the links (live check 18.10.: the numbers were larger than the titles) */
.article--premium .article__toc li { font-size: var(--t-small); }
.article--premium .article__toc-title, .article--premium .article__nav-dir { text-transform: none; letter-spacing: 0; font-size: var(--t-small); font-weight: 600; }
/* 22.10.2026 (Alex: "einfach eine box wie sie auch auf den anderen seiten gebaut ist und dort dann den text rein mit den
   vipibax grünen bulletpoints davor"): both boxes are the white Ratgeber card of the home page (sections/blog-teaser .rt-card:
   card colour, --r-lg, no border) with its lime dots (.rt-card__points). Contents: two columns from 761 px; on phones 6 rows
   and a button for the rest. */
.article--premium :is(.article__keyfacts, .article__toc) { padding: 26px 30px 28px; background: var(--card); border: 0; border-radius: var(--r-lg); }
.article--premium .article__keyfacts { margin: 0; }
.article--premium .article__toc { margin: var(--s3) 0 var(--s5); }
.article--premium .article__keyfacts h2, .article--premium .article__toc-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; text-transform: none; color: var(--ink); }
.article--premium .article__keyfacts .rte { font-size: var(--t-lead); line-height: 1.6; color: #2b3a33; }
.article--premium .article__keyfacts :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.article--premium .article__keyfacts li { position: relative; margin: 0; padding-left: 18px; }
.article--premium .article__keyfacts li + li { margin-top: 10px; }
.article--premium .article__keyfacts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.article--premium .article__toc-list { display: block; list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.article--premium .article__toc-list li { position: relative; margin: 0; padding: 0 0 0 26px; break-inside: avoid; counter-increment: toc; font-size: var(--t-body); line-height: 1.45; }
.article--premium .article__toc-list li::before { content: counter(toc) "."; position: absolute; left: 0; top: 6px; color: var(--lime-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.article--premium .article__toc-list a { display: block; padding: 6px 0; font-size: var(--t-body); color: var(--ink); text-decoration: none; }
.article--premium .article__toc-list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.article__toc-more { margin-top: 12px; width: 100%; }
.article--premium .article__toc-more[hidden] { display: none; }
@media (min-width: 761px) {
  .article--premium .article__toc-list { columns: 2; column-gap: 36px; }
  .article__toc-more { display: none; }
}
@media (max-width: 760px) {
  .article--premium .article__toc.is-folded .article__toc-extra { display: none; }
}
@media (max-width: 640px) {
  .article--premium :is(.article__keyfacts, .article__toc) { padding: 22px 20px 24px; }
  .article--premium .article__toc-list a { padding: 10px 0; }
  .article--premium .article__toc-list li::before { top: 10px; }
}
.article-bridge { display: flex; align-items: center; justify-content: space-between; gap: 20px 36px; margin: clamp(40px, 6vw, 64px) 0 0; padding: clamp(24px, 4vw, 36px); background: var(--forest); color: #dfe9df; border-radius: var(--r-xl); }
.article-bridge h2 { color: #fff; font-size: var(--t-h3); letter-spacing: -.02em; margin: 0 0 8px; }
.article-bridge p { margin: 0; color: #b9c9bd; font-size: var(--t-small); line-height: 1.55; max-width: 52ch; }
.article-bridge .button { flex: none; }
@media (max-width: 640px) {
  .article--premium .article__body { font-size: 17px; }
  .article-bridge { flex-direction: column; align-items: stretch; }
  .article-bridge .button { width: 100%; }
}
/* END_SECTION:main-article */

/* START_SECTION:main-author (INDEX:29) */
/* author page v2 (2026-10-19, Alex "passt"): the about page's hero with the person's role and text, cards in 2 columns */
.author-v2 .page-hero__media img { object-position: 50% 35%; }
.author-v2 .page-hero__role { font-size: clamp(17px, 1.45vw, 19px); font-weight: 600; color: var(--ink); margin: -4px 0 14px; }
.author-v2 .page-hero__lede p { margin: 0 0 12px; }
.author-v2 .page-hero__lede p:last-child { margin-bottom: 0; }
.author-v2 .page-hero__lede { margin-bottom: 28px; }
.author-v2 #artikel { scroll-margin-top: 92px; }
.author-v2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.author-v2__plain { max-width: 760px; }
.author-v2 .hero-partners { margin-top: var(--s6); }
.author-v2__about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s6); align-items: start; }
.author-v2__about-h { font-size: var(--t-h2); letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.author-v2__about-text { font-size: 18px; line-height: 1.65; color: #2b3a33; max-width: 62ch; }
.author-v2__about-text p { margin: 0 0 1em; }
.author-v2__about-text p:last-child { margin-bottom: 0; }
@media (max-width: 960px) { .author-v2__about-in { grid-template-columns: 1fr; gap: var(--s3); } .author-v2__about-text { font-size: 17px; } }
/* 22.10.2026 (Alex: "das die bilder dort nicht so extrem riesig dargestellt werden"): the portrait sits framed and square in the
   right half instead of filling it (the client photos are 480 px); on phones a 240 px square above the text, aligned with it */
.author-v2 .page-hero__media picture { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; background: var(--line); }
.author-v2 .page-hero__media img { height: 100%; }
@media (min-width: 961px) {
  .author-v2 .page-hero__media { display: flex; align-items: center; justify-content: center; padding: 56px 28px; background: transparent; }
  .author-v2 .page-hero__media picture { width: min(100%, 440px); }
}
@media (max-width: 960px) {
  .author-v2 .page-hero__media { aspect-ratio: auto; padding: 24px 28px 0; background: transparent; overflow: visible; }
  .author-v2 .page-hero__media picture { width: min(240px, 64vw); }
}
@media (max-width: 640px) { .author-v2__grid { grid-template-columns: 1fr; } }
/* END_SECTION:main-author */

/* START_SECTION:main-blog (INDEX:30) */
/* 2026-09-29: Ratgeber index in the homepage's language */
.rg-blog { padding-top: 0; }
.rg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
.rg-head__title { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1.03; margin: 18px 0 16px; }
.rg-head__intro { color: var(--muted); font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; margin: 0 0 28px; max-width: 46ch; }
.rg-head__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.rg-head__link { display: inline-block; padding-block: 10px; color: var(--ink); font-weight: 600; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rg-head__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.rg-head__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-blog .blog__preview { border-top: 1px solid var(--line); padding-top: clamp(32px, 5vw, 56px); }
.rg-preview__head { max-width: 640px; margin-bottom: 32px; }
.rg-preview__head h2 { font-size: var(--t-h2); letter-spacing: -.025em; margin: 0 0 10px; }
.rg-preview__head p { color: var(--muted); margin: 0; }
.rg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rg-grid > li:nth-child(-n+2) { grid-column: span 2; }
.rg-grid .post-card { background: var(--card); border: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: none; }
.rg-grid .post-card__media { aspect-ratio: 16 / 10; display: block; overflow: hidden; }
.rg-grid .post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-grid .post-card__body { padding: 20px 22px 24px; }
.rg-grid .post-card__cat { font-size: var(--t-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lime-deep); }
.rg-grid .post-card h3 { font-size: 19px; letter-spacing: -.012em; line-height: 1.25; margin: 6px 0 8px; }
.rg-grid > li:nth-child(-n+2) h3 { font-size: 23px; }
.rg-grid .post-card p { color: var(--muted); font-size: var(--t-small); line-height: 1.55; margin: 0; }
.rg-bridge { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); padding: clamp(28px, 4vw, 44px); background: var(--forest); color: #dfe9df; border-radius: var(--r-xl); }
.rg-bridge h2 { color: #fff; font-size: var(--t-h2); letter-spacing: -.025em; margin: 0 0 8px; }
.rg-bridge p { margin: 0; color: #b9c9bd; max-width: 56ch; }
.rg-bridge .button { flex: none; }
@media (max-width: 960px) {
  .rg-head { grid-template-columns: 1fr; padding-top: 16px; }
  .rg-head__media { order: -1; aspect-ratio: 16 / 10; }
  .rg-grid { grid-template-columns: 1fr 1fr; }
  .rg-grid > li:nth-child(-n+2) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .rg-grid { grid-template-columns: 1fr; gap: 14px; }
  .rg-grid > li:nth-child(-n+2) { grid-column: auto; }
  .rg-grid > li:nth-child(-n+2) h3 { font-size: 20px; }
  .rg-head__links { display: grid; justify-items: center; }
  .rg-head__links .button { width: 100%; }
  .rg-bridge { flex-direction: column; align-items: stretch; }
  .rg-bridge .button { width: 100%; }
}
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:31) */
.cx__ship { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--lime-deep); }
.cart-vol { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--lime-deep); }
/* cart page rebuild 2026-09-29. Shared .cfs / .ctrust / .cx live in sections/cart-drawer.liquid */
.cp__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.cp__title { font-size: var(--t-h1); letter-spacing: -.03em; line-height: 1.05; margin: 0; }
.cp__count { color: var(--muted); font-size: var(--t-small); }
.cp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "main summary" "extra summary"; gap: 0 48px; align-items: start; }
.cp__main { grid-area: main; }
.cp__summary { grid-area: summary; }
.cp__extra { grid-area: extra; }
.cp__extra:empty { display: none; }
.cp__lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cp__line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cp__media { display: block; aspect-ratio: 1; background: #fff; border-radius: var(--r); overflow: hidden; }
.cp__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cp__top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.cp__name { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.cp__name:hover { text-decoration: underline; }
.cp__price { font-family: var(--font-display); font-size: 19px; white-space: nowrap; }
.cp__meta { margin: 5px 0 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-small); color: var(--muted); }
.cp__meta .base-price { color: var(--muted); }
/* L10: at 320px the 194px column held stepper (134px), gap and 'Entfernen' side by side and ran 14px past the screen */
.cp__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cp__stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; height: 46px; }
.cp__step { width: 44px; height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.cp__qty { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; font-size: var(--t-small); font-weight: 600; font-family: var(--font-body); text-align: center; -moz-appearance: textfield; }
.cp__qty::-webkit-outer-spin-button, .cp__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp__remove { color: var(--muted); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; }
.cp__remove:hover { color: var(--ink); }
.cp__line .biocide-warning--inline { margin: 14px 0 0; font-size: var(--t-small); color: var(--muted); }
.cp__update { margin-top: 16px; }
.cp__summary { position: sticky; top: 96px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.cp__summary-title { font-size: 20px; letter-spacing: -.015em; margin: 0 0 16px; }
.cp__summary .cfs { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.cp__row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.cp__row strong { font-family: var(--font-display); font-size: 24px; letter-spacing: -.01em; }
.cp__tax { margin: 4px 0 18px; font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.cp__tax a { color: inherit; }
.cp__checkout { width: 100%; padding: 18px 28px; font-size: var(--t-lead); }
.cp__pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; opacity: .85; }
.cp .cx { margin-top: 28px; max-width: 560px; }
.cp__back { margin: 28px 0 0; font-size: var(--t-small); }
.cp__back a { color: var(--muted); }
.cp__empty { max-width: 560px; padding: var(--s5) 0 var(--s6); }
.cp__empty .cp__title { margin-bottom: 12px; }
.cp__empty-sub { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0 0 24px; }
.cp__cats { margin-top: 32px; }
/* desktop (sweep H13, Alex 18.10.: "Ja, alle 9"): text, button and trust line left, the category links right, instead of
   one 560px column with the right half empty */
@media (min-width: 961px) {
  .cp__empty { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .cp__empty > :not(.cp__cats) { grid-column: 1; }
  .cp__empty > .cp__empty-cta { justify-self: start; }
  .cp__empty > .cp__cats { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
.cp__cats ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cp__cats a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.cp__cats a .icon { color: var(--muted); }
.cp__empty .ctrust { justify-content: flex-start; margin-top: 24px; }
@media (max-width: 960px) {
  .cp__grid { grid-template-columns: 1fr; grid-template-areas: "main" "summary" "extra"; gap: 28px; }
  .cp__summary { position: static; }
}
@media (max-width: 560px) {
  .cp__line { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
  .cp__name { font-size: var(--t-body); }
  .cp__price { font-size: 17px; }
  .cp__summary { padding: 20px; }
  .cp__head { margin-bottom: 18px; }
}
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:32) */
/* L10 B5 (2026-10-17): the proof line wraps on phones and tablets (DE 4 lines at 375px): the pill became an oval and the
   flask icon shrank to 5px. Card corners when it can wrap, icon at full size beside the first line. */
.collection__editorial-proof .icon { flex-shrink: 0; }
@media (max-width: 1024px) {
  .collection__editorial-proof { align-items: flex-start; border-radius: var(--r); }
  .collection__editorial-proof .icon { margin-top: 2px; }
}
/* --- collection v2 (2026-09-29): no lines, spacing and planes; one heading style; lime = action --- */
.coll-head { margin: var(--s3) 0 var(--s5); max-width: 760px; }
.coll-head__title { font-size: var(--t-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 var(--s3); }
.coll-head__line { margin: 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; max-width: 60ch; }

/* 2026-10-16: the count and sort row that sat between the tiles and the cards is gone; the tiles keep their distance */
.coll-tiles { margin-bottom: var(--s6); }
.coll-tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.coll-tile { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px 12px 14px; border-radius: var(--r-lg); background: var(--card); color: var(--ink); text-decoration: none; transition: background .16s ease, box-shadow .16s ease; }
.coll-tile:hover { background: var(--lime-soft); }
.coll-tile.is-current { background: var(--lime-soft); }
.coll-tile__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: var(--r); background: #fff; overflow: hidden; }
.coll-tile__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.coll-tile__count { display: grid; justify-items: center; gap: 4px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.coll-tile__count small { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: var(--muted); }
.coll-tile.is-current .coll-tile__thumb { background: #fff; }
.coll-tile__txt { display: grid; gap: 2px; }
.coll-tile__name { font-size: var(--t-small); font-weight: 600; line-height: 1.25; }
.coll-tile__line { font-size: 12.5px; color: var(--muted); line-height: 1.35; }


.coll-group { margin-top: var(--s7); }
.coll-group:first-of-type { margin-top: var(--s3); }
.coll-group__head { margin-bottom: var(--s4); max-width: 720px; }
.coll-group__head h2, .coll-soldout-head h3, .coll-sets h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.coll-group__head h2 { margin: 0 0 6px; }
.coll-group__head p { margin: 0; color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.coll-soldout-head { grid-column: 1 / -1; display: block !important; margin-top: var(--s5); }
.coll-soldout-head h3 { margin: 0; }

.coll-grid .product-card { height: 100%; background: var(--card); border-radius: var(--r-lg); padding: 12px 12px 14px; }
.coll-grid .product-card__media { border-radius: var(--r); background: #fff; }
.coll-grid .product-card:hover .product-card__media { box-shadow: none; }
.coll-grid .product-card__title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.coll-grid .product-card__body { display: flex; flex-direction: column; flex: 1; }
.coll-grid .product-card__rating { min-height: 20px; }
.coll-grid .product-card__body > :last-child { margin-top: auto; }
.coll-grid .product-card__body > product-form { display: block; width: 100%; padding-top: 12px; }
.coll-grid product-form form { width: 100%; }
.coll-grid .product-card__atc { width: 100%; min-height: 44px; background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.coll-grid .product-card:hover .product-card__atc { background: #c3e81a; color: var(--lime-ink); border-color: #c3e81a; }
.coll-grid .product-card--soldout .product-card__atc { background: transparent; color: var(--muted); border-color: var(--line); }

/* 1 to 3 products (Schnelltest 1, Professional Line 3): three columns instead of four with empty slots (sweep H22,
   Alex 18.10.: "Ja, alle 9"); the sets plane keeps its own two columns */
@media (min-width: 821px) {
  .collection__grid.coll-grid:not(.coll-group--sets .coll-grid):has(> li:last-child:nth-child(-n+3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* sets: the featured plane (lime-soft, r-xl) holds the same white cards, image left */
.coll-group--sets { background: var(--lime-soft); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 36px); }
.coll-group--sets .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.coll-group--sets .product-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 16px; }
.coll-group--sets .product-card__media { aspect-ratio: 1 / 1; }
.coll-group--sets .product-card__body { padding: 8px 4px 4px 0; }
.coll-group--sets .product-card__title { min-height: 0; }

.coll-sets { margin-top: var(--s7); padding: clamp(20px, 3vw, 36px); border-radius: var(--r-xl); background: var(--lime-soft); }
.coll-sets h2 { margin: 0 0 var(--s4); }
.coll-sets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coll-sets__item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); background: var(--card); }
.coll-sets__img { display: block; background: #fff; border-radius: var(--r); }
.coll-sets__img img { width: 88px; height: 88px; object-fit: contain; display: block; }
.coll-sets__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.coll-sets__txt b { font-size: 16px; }
.coll-sets__meta { color: var(--muted); font-size: var(--t-small); line-height: 1.4; }
.coll-sets__price { font-weight: 700; }
.coll-sets__bp { font-weight: 400; color: var(--muted); font-size: var(--t-small); }
.coll-sets__note { margin-top: var(--s3); }
.collection__pro-link { margin-top: var(--s4); }

/* questions: the home FAQ, centred (sections/home-faq stylesheet); the guide card follows (snippets/coll-guide-card) */
.coll-faq.home-faq__in { margin-top: var(--s8); }

@media (max-width: 1100px) {
  .coll-tiles ul { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 148px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -28px; padding-inline: 28px; scroll-padding-inline: 28px; }
  .coll-tiles ul::-webkit-scrollbar { display: none; }
  .coll-tiles li { scroll-snap-align: start; }
}
@media (max-width: 860px) {
  .coll-head { margin: var(--s2) 0 var(--s4); }
  .coll-head__line { font-size: 15.5px; }
  .coll-tiles ul { grid-auto-columns: 132px; gap: 10px; }
  .coll-tiles { margin-bottom: var(--s5); }
  .coll-tile { padding: 10px; gap: 8px; }
  /* first screen at 390x664 showed no product (M-012): trail kept for screen readers, set intro hidden */
  .collection__crumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .coll-group--sets .coll-group__head p { display: none; }
  .coll-group { margin-top: var(--s6); }
  .coll-group--sets .coll-grid { grid-template-columns: 1fr; gap: 12px; }
  .coll-group--sets .product-card { grid-template-columns: 38% minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: var(--r-lg); }
  .coll-group--sets .product-card__body { padding: 0; }
  .coll-group--sets { padding: 16px; }
  .coll-grid .product-card { padding: 10px 10px 12px; }
  .coll-grid .product-card__body { padding: 12px 0 0; }
  .coll-grid .product-card__title { font-size: 16px; }
  .coll-sets { padding: var(--s4) var(--s3); }
  .coll-sets ul { grid-template-columns: 1fr; }
  .coll-faq.home-faq__in { margin-top: var(--s7); }
}
/* phones: product-type tiles become one row of text chips, so the first product shows in the first screen (roast P1 #22) */
@media (max-width: 860px) {
  .coll-tiles ul { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .coll-tile { display: inline-flex !important; flex-direction: row; align-items: center; padding: 8px 14px !important; min-height: 44px; border-radius: 999px !important; white-space: nowrap; }
  .coll-tile__thumb, .coll-tile__line { display: none !important; }
  .coll-tile__name { font-size: 14px; }
}
/* END_SECTION:main-collection */

/* START_SECTION:main-product-feed (INDEX:44) */
/* feeding amounts as a dosage table (2026-10-16) */
.pdp-dose__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pdp-dose__tile { display: grid; gap: 10px; align-content: start; padding: 20px 20px 22px; background: color-mix(in srgb, var(--line) 30%, #fff); border-radius: var(--r-lg); }
.pdp-dose__who { color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pdp-dose__amount { color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.pdp-dose__note { display: inline-flex; margin: 16px 0 0; padding: 10px 16px; background: var(--lime-soft); border-radius: 999px; color: var(--lime-ink); font-size: 14px; font-weight: 600; }
@media (max-width: 640px) { .pdp-dose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pdp-dose__amount { font-size: 18px; } .pdp-dose__note { border-radius: var(--r); } }
/* four weight classes in a row need 836px; below that auto-fit made 3 + 1 (768, sweep H12): 2 x 2 instead,
   and the note, then on several lines, gets the card radius instead of the pill */
.pdp-dose { container-type: inline-size; }
@container (max-width: 835px) { .pdp-dose__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pdp-dose__note { border-radius: var(--r); } }
/* END_SECTION:main-product-feed */

/* START_SECTION:main-search (INDEX:46) */
.search__form { position: relative; }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 8px; background: var(--card); border-radius: var(--r-lg); box-shadow: 0 24px 48px -24px rgba(16,29,23,.35); }
.search-suggest a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.search-suggest a:hover, .search-suggest a:focus { background: var(--line); }
.search-suggest img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; }
.search-suggest__t { display: grid; font-weight: 600; font-size: 15px; }
.search-suggest__t small { font-weight: 500; color: var(--muted); font-size: 13px; }
.search-suggest__empty { padding: 12px; color: var(--muted); font-size: var(--t-small); }
/* article and page results are text cards: in the two 126px product columns of a 320 phone their long words pushed them
   21px past the screen (overflow sweep 18.10., the Ratgeber articles); on phones they take the full row */
@media (max-width: 600px) { .search__grid > li:has(> .search__other) { grid-column: 1 / -1; } }
/* END_SECTION:main-search */

/* START_SECTION:messe-recap (INDEX:47) */
.messe-recap { background: var(--paper); border-top: 1px solid var(--line); }
.messe-recap__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.messe-recap__head { position: sticky; top: 110px; }
.messe-recap__head h2 { font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 16px; }
.messe-recap__intro { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; max-width: 42ch; }
.messe-recap__year { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.messe-recap__year:first-child { border-top: 1px solid var(--line); }
.messe-recap__year-label { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--forest); }
.messe-recap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.messe-recap__item h3 { font-size: 19px; letter-spacing: -.01em; margin: 0 0 6px; }
.messe-recap__item p { margin: 0; color: var(--muted); font-size: var(--t-small); line-height: 1.6; max-width: 58ch; }
@media (max-width: 860px) {
  .messe-recap__in { grid-template-columns: 1fr; gap: 28px; }
  .messe-recap__head { position: static; }
  .messe-recap__year { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .messe-recap__year-label { font-size: 24px; }
}
/* END_SECTION:messe-recap */

/* START_SECTION:newsletter (INDEX:49) */
/* light: white card (product card border and radius), copy left, guide stage right */
.newsletter__card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.newsletter__card .newsletter__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4.4vw, 60px); }
.newsletter__card .newsletter__copy h2, .newsletter__card .newsletter__copy h1 { font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.04; margin: 14px 0 14px; text-wrap: balance; }
/* confirmed (Shopify's /account/subscribe page): download, welcome code, unsubscribe */
.newsletter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 28px; }
.newsletter__lang { align-self: flex-start; display: inline-flex; align-items: center; min-height: 24px; margin: 0 0 12px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.newsletter__more { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.newsletter__code { max-width: 460px; padding: 18px 20px; border: 1px dashed var(--lime-line); border-radius: var(--r); background: var(--lime-soft); }
.newsletter__code-label { display: block; font-size: 13px; font-weight: 600; color: var(--lime-deep); }
.newsletter__code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 6px 0 8px; }
.newsletter__code-value { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: .02em; color: var(--ink); background: none; }
.newsletter__code-copy { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.newsletter__code-copy:hover { border-color: var(--ink); }
.newsletter__code-terms { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.newsletter__unsub { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }
.newsletter__unsub a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.newsletter__card .newsletter__text { font-size: 16px; line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.newsletter__gets { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.newsletter__gets li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.newsletter__gets .icon { display: block; flex: none; box-sizing: content-box; padding: 5px; border-radius: 50%; background: var(--lime-soft); color: var(--lime-deep); }
.newsletter__form .newsletter__row { max-width: 500px; }
.newsletter__done p { margin: 0 0 16px; }
/* after a signup the page scrolls the card (phones: the copy) to the top; clear of the sticky header, as #anliegen in base.css */
.newsletter__card, .newsletter__card .newsletter__copy { scroll-margin-top: 92px; }
/* L24 (2026-10-17): the consent names the privacy policy as a link, like the contact form */
.newsletter__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* the guide: pages 1 and 2 of the real PDF, large, bleeding off the bottom edge */
.newsletter__stage { position: relative; min-height: 440px; background: var(--lime-soft); overflow: hidden; }
.newsletter__sheet { position: absolute; width: 70%; border-radius: 4px; background: #fff; box-shadow: 0 28px 50px -22px rgba(16, 29, 23, .45), 0 1px 3px rgba(16, 29, 23, .12); }
.newsletter__sheet picture, .newsletter__sheet img { display: block; width: 100%; height: auto; border-radius: 4px; }
.newsletter__sheet--back { left: 27%; top: 84px; transform: rotate(4deg); }
.newsletter__sheet--front { left: 8%; top: 56px; transform: rotate(-2deg); }
/* dark (home, Alex 2026-10-15): forest band in the help band's layout, the guide as a rounded card left */
.newsletter.section--dark .newsletter__card { background: none; border: 0; border-radius: 0; overflow: visible; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.newsletter.section--dark .newsletter__copy { order: 2; padding: 0; }
.newsletter.section--dark .newsletter__stage { order: 1; min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--r-xl); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.newsletter.section--dark .newsletter__copy h2 { color: #fff; }
.newsletter.section--dark .newsletter__gets li { color: #fff; }
.newsletter.section--dark .newsletter__gets .icon { background: rgba(180, 220, 0, .16); color: var(--lime); }
.newsletter.section--dark .newsletter__row { border-color: transparent; }
@media (max-width: 860px) {
  .newsletter__card, .newsletter.section--dark .newsletter__card { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .newsletter__stage, .newsletter.section--dark .newsletter__stage { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .newsletter.section--dark .newsletter__copy { padding: 28px 0 0; }
  .newsletter__card .newsletter__copy { padding: 28px 20px 30px; }
  .newsletter__sheet { width: 56%; }
  /* confirmed: the visitor comes from the mail for the download, so text and button come first on phones */
  .newsletter--confirmed .newsletter__stage { order: 1; }
  .newsletter__sheet--front { left: 9%; top: 26px; }
  .newsletter__sheet--back { left: 36%; top: 46px; }
}
/* END_SECTION:newsletter */

/* START_SECTION:page-photo-hero (INDEX:50) */
/* 2026-10-19: moved to assets/components.css, the author page (sections/main-author) uses the same hero */
/* END_SECTION:page-photo-hero */

/* START_SECTION:page-split (INDEX:51) */
.page-split { background: var(--bg); }
.page-split--paper { background: var(--paper); }
.page-split__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-split--right .page-split__media { order: 2; }
.page-split__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.page-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-split__eyebrow { margin: 0 0 12px; font-size: var(--t-small); font-weight: 600; color: var(--lime-deep); }
.page-split__copy h2 { font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 18px; }
.page-split__body { color: var(--muted); font-size: 17px; line-height: 1.6; }
.page-split__body p { margin: 0 0 14px; }
.page-split__card { margin-top: 22px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: var(--r); }
.page-split__card h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.page-split__card .rte { color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
.page-split__card .rte p { margin: 0; }
.page-split__note { margin: 10px 0 0; font-size: var(--t-micro); color: var(--faint); }
.page-split__link { display: inline-block; padding-block: 10px; margin-top: 8px; color: var(--ink); font-weight: 600; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 960px) {
  .page-split__in { grid-template-columns: 1fr; gap: 26px; }
  .page-split--right .page-split__media { order: 0; }
  .page-split__media { border-radius: var(--r-lg); }
}
/* END_SECTION:page-split */

/* START_SECTION:reviews (INDEX:58) */
.reviews__note { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
/* L9 (2026-10-17): cards and score tile in the look of the home review card (rules in sections/home-reviews);
   the product module frame (sections/main-product-biocide) gave them a 1px line and the larger radius */
.template-product main .reviews__grid :is(.review-card, .reviews__summary) { border: 0; border-radius: var(--r-lg); }
/* END_SECTION:reviews */

/* START_SECTION:situation-picker (INDEX:61) */
/* --- situation picker v2 (2026-09-29): one featured set left, two compact options right --- */
.situation-picker { background: var(--paper); border-top: 1px solid var(--line); }
.situation-picker__head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.situation-picker__head h2 { margin-top: 14px !important; }
.situation-picker__head h2 { font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 14px; }
/* balance: 3 even lines of ~57 characters instead of 76 + 79 + a lone "Produkte einzeln." (2026-10-15) */
.situation-picker__head p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; text-wrap: balance; }
.sp-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: auto; gap: 20px; }
.sp-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; background: var(--card); border-radius: var(--r-lg); padding: 20px; }
.sp-card__media { display: block; background: #fff; border-radius: var(--r); aspect-ratio: 1 / 1; overflow: hidden; }
.sp-card__media img { width: 100%; height: 100%; object-fit: contain; }
.sp-card__case { margin: 0 0 4px; font-size: var(--t-small); font-weight: 600; color: var(--lime-deep); }
.sp-card__title { font-size: 19px; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 6px; }
.sp-card__title a { color: var(--ink); text-decoration: none; }
/* Alex 2026-10-15: the whole card opens the product. The title link stretches over the card (one link per card for
   screen readers); the cart button and the shipping link sit above it and keep their own action. Hover lifts the
   card on pointer devices only, so touch screens get no sticky hover. */
.sp-card { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.sp-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.sp-card__title a:focus-visible { outline: none; }
/* inside the edge: the lead card clips with overflow: hidden, an outer outline vanished there */
.sp-card__title a:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
.sp-card product-form, .sp-card__atc, .sp-card__price a { position: relative; z-index: 2; }
.sp-card__media img { transition: transform .35s ease; }
@media (hover: hover) {
  .sp-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(16,29,23,.04), 0 4px 10px rgba(16,29,23,.05), 0 26px 50px -22px rgba(16,29,23,.3); }
  .sp-card:hover .sp-card__media img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-card__media img { transition: none; }
  .sp-card:hover, .sp-card:hover .sp-card__media img { transform: none; }
}
.sp-card__text { margin: 0 0 14px; color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.sp-card__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.sp-card__price .price { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.sp-card__bp { color: var(--muted); font-size: var(--t-small); }
.sp-card__single { display: block; margin-top: 2px; color: var(--ink); font-size: var(--t-small); font-weight: 500; }
.sp-card__price .price-note { display: block; margin-top: 2px; }
.sp-card__atc { padding: 12px 20px; min-height: 44px; font-size: var(--t-small); }
.sp-card--lead .sp-card__atc { padding: 16px 28px; font-size: var(--t-body); }
.sp-card--lead { grid-row: 1 / span 2; grid-template-columns: 1fr; align-items: stretch; align-content: start; padding: 0; overflow: hidden; }
.sp-card--lead .sp-card__media { border-radius: 0; aspect-ratio: 16 / 10; }
.sp-card--lead .sp-card__media img { padding: 4% 8%; }
.sp-card--lead .sp-card__body { padding: 8px 28px 28px; }
.sp-card--lead .sp-card__title { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; }
.sp-card--lead .sp-card__text { font-size: 16px; }
.sp-card--lead .sp-card__price .price { font-size: 28px; }
@media (max-width: 960px) {
  .sp-grid { grid-template-columns: 1fr; gap: 14px; }
  /* the photo next to the title, not centred on the whole card (it floated mid-card with empty space above, FAQ 375, sweep H15) */
  .sp-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
  .sp-card--lead { grid-row: auto; grid-template-columns: 1fr; padding: 0; align-items: stretch; }
  .sp-card--lead .sp-card__body { padding: 4px 18px 20px; }
  .sp-card__buy { flex-direction: column; align-items: stretch; }
  .sp-card__atc { width: 100%; }
  .situation-picker__head { margin-bottom: 24px; }
}
/* END_SECTION:situation-picker */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:back-in-stock (INDEX:73) */
/* The collector in the buy button's place (2026-10-16). base.css still styles it as a paper card
   (.bis); here it loses the card and reads as the buy box's own action: line, field, consent,
   one lime button, then the biocide warning, exactly the order the button had. */
.bis.bis--inline { margin: 10px 0 0; background: none; border: 0; border-radius: 0; padding: 0; }
.bis.bis--inline[hidden] { display: none; }
/* after a post the answer stays visible even if the redirect lands on an in-stock size */
.bis.bis--inline:has(.bis__done, .form__errors) { display: block; }
.bis--inline .bis__lead { margin: 0 0 12px; }
.bis--inline .bis__lead b { color: var(--ink); font-weight: 600; }
.bis--inline .bis__alt { margin: -6px 0 12px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }
.bis--inline .bis__row input[type="email"] { width: 100%; min-height: 50px; box-sizing: border-box; }
.bis--inline .bis__consent { margin: 10px 0 0; }
.bis--inline .bis__submit { margin-top: 12px; padding-left: 16px; padding-right: 16px; }
.bis.bis--inline .bis__done { margin: 0; padding: 14px 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
/* the buy block the form replaces: layout-neutral wrapper, hidden for a sold-out variant */
.buybox__buy { display: contents; }
.buybox__buy[hidden] { display: none; }
/* END_SNIPPET:back-in-stock */

/* START_SNIPPET:card-meta (INDEX:86) */
/* the product card, everywhere (2026-10-15, Alex: "ein modernes card design", then "die cards sollten alle gleich
   aussehen"): one white card holds photo, text, price and button; the photo sits inset on a warm tint (multiply melts
   the white packshot background into it); the rating is a pill on the photo, so a card without reviews has no gap;
   every card has title, one line, then price, note and button on the card floor; a lift on hover.
   Doubled class: base.css card rules go up to 0,3,1. */
.product-card.product-card { padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); transition: transform .25s ease, box-shadow .25s ease; }
.product-card.product-card .product-card__media { border-radius: var(--r-lg); background: color-mix(in srgb, var(--line) 42%, #fff); }
.product-card.product-card .product-card__media img { mix-blend-mode: multiply; transition: transform .5s ease; }
.product-card.product-card .product-card__body { padding: 16px 10px 6px; }
.product-card.product-card .product-card__rating:not(.product-card__rating--none) { position: absolute; top: 18px; right: 18px; z-index: 2; gap: 5px; min-height: 0; margin: 0; padding: 5px 10px; background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 6px 16px -10px rgba(14, 43, 35, .5); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.product-card.product-card .product-card__rating .count { font-weight: 400; }
.product-card.product-card .product-card__rating--none { display: none; }
/* stars only where every card of the list has reviews (Alex 2026-10-16: "warum hat nur ein Produkt Bewertungen in
   der Card?"). Sets and Giard Plus have none in Judge.me; one pill among three cards read as a gap, and a number
   for them cannot be made up. A list with one card without reviews shows no stars at all. */
ul:has(.product-card__rating--none) .product-card.product-card .product-card__rating { display: none; }
.product-card.product-card .product-card__line { top: 18px; left: 18px; }
/* label and rating pill lie on the photo but are no links: a tap on them went nowhere (on the Professional Line cards
   at 320 the pill sat across the middle of the image, the image link answered on 8px of its width, TQ point 44) */
.product-card.product-card :is(.product-card__rating, .product-card__line) { pointer-events: none; }
.product-card.product-card .product-card__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; min-height: 2.5em; }
/* L10 26: a product name is never cut. base.css clamps titles to 2 (phone grids 4) lines, which cut "Giard Plus
   Ergänzungsfuttermittel für Hunde und Katzen, 60 g" on every width and "Nachfüllpack 2,5 l" at 320; the price
   still lines up, it sits on the card floor (margin-top: auto) */
.product-card.product-card .product-card__title { display: block; overflow: visible; -webkit-line-clamp: none; }
.product-card.product-card .product-card__meta { margin: 0; min-height: 2.8em; color: var(--muted); font-size: 13px; line-height: 1.4; }
.product-card.product-card .product-card__price { margin-top: auto; padding-top: 14px; font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.product-card.product-card .product-card__bp { font-size: var(--t-small); letter-spacing: 0; }
/* base.css pushes the body's last child (the product-form around the button) down too; only the price may */
.product-card.product-card .product-card__body > :last-child:not(.product-card__atc) { margin-top: 14px; }
/* the button sits in a product-form (add to cart) or stands alone (choose size, sold out): same 14px either way */
.product-card.product-card product-form, .product-card.product-card product-form form { display: block; margin-bottom: 0; padding-top: 0; }
.product-card.product-card product-form .product-card__atc { margin-top: 0; }
.product-card.product-card .product-card__atc { min-height: 46px; margin-top: 14px; border-radius: 999px; font-size: 15px; font-weight: 600; }
@media (hover: hover) {
  .product-card.product-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(14, 43, 35, .5); }
  .product-card.product-card:hover .product-card__media img { transform: scale(1.04); }
}
/* two cards per row on a phone (~160px): tighter card, one star in the pill, three-line title, one-line button */
@media (max-width: 480px) {
  .product-card.product-card { padding: 6px; border-radius: var(--r-lg); }
  .product-card.product-card .product-card__media { border-radius: var(--r); }
  .product-card.product-card .product-card__body { padding: 12px 6px 4px; }
  .product-card.product-card .product-card__rating:not(.product-card__rating--none) { top: 12px; right: 12px; padding: 3px 7px; font-size: 11.5px; }
  .product-card.product-card .product-card__rating .star:nth-child(n+2) { display: none; }
  .product-card.product-card .product-card__line { top: 12px; left: 12px; }
  /* L10 B3: on a ~160px card the 'Für Profis' label and the rating pill met in the corner (the star half covered);
     with a label the pill goes under it */
  .product-card.product-card:has(.product-card__line) .product-card__rating:not(.product-card__rating--none) { top: 40px; right: auto; left: 12px; }
  .product-card.product-card .product-card__title { font-size: 14.5px; min-height: 3.75em; }
  .product-card.product-card .product-card__meta { font-size: 12.5px; }
  /* the base price takes its own line here; that line stays free where a product has none (test, Komplettset),
     so every price sits at the same height. border-box: 12px padding + price line + base price line */
  .product-card.product-card .product-card__price { min-height: calc(12px + 1.25em + 20px); padding-top: 12px; font-size: 17px; }
  .product-card.product-card .product-card__bp { display: block; margin-top: 2px; line-height: 1.4; }
  .product-card.product-card .product-card__atc { min-height: 44px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .product-card.product-card, .product-card.product-card .product-card__media img { transition: none; } }
/* END_SNIPPET:card-meta */

/* START_SNIPPET:category-quicklinks (INDEX:90) */
/* L10 47/48 (2026-10-17): "Alle Produkte ansehen" under the quick links was a 17 to 21px target (search without hits,
   404, every width); an invisible 44px layer, 6px wider each side, like the breadcrumb */
.quicklinks__more a { position: relative; }
.quicklinks__more a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
/* END_SNIPPET:category-quicklinks */

/* START_SNIPPET:coll-guide-card (INDEX:92) */
/* collection guide card (2026-10-16, third build): the home closing card's shape in light */
.cguide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: var(--s7); background: var(--card); border-radius: var(--r-xl); overflow: hidden; }
.cguide--solo { grid-template-columns: minmax(0, 1fr); }
.cguide__stage { position: relative; display: block; margin: 12px 0 12px 12px; min-height: 360px; border-radius: var(--r-lg); background: var(--bg); }
.cguide__stage img { position: absolute; left: 9%; top: 9%; width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.cguide__copy { padding: clamp(32px, 4.4vw, 56px); }
.cguide__head h2 { font-size: var(--t-h2); letter-spacing: -.025em; line-height: 1.12; margin: 14px 0 18px; text-wrap: balance; }
.cguide__head .kick-dot + h2 { margin-top: 14px; }
.cguide__head h2:first-child { margin-top: 0; }
.cguide__text p, .cguide__aside { margin: 0 0 1em; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 62ch; }
.cguide__text p.cguide__lead { color: var(--ink); font-size: 18.5px; line-height: 1.55; letter-spacing: -.005em; }
.cguide__text > :last-child { margin-bottom: 0; }
.cguide__text a { color: var(--ink); font-weight: 600; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cguide__note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-small); line-height: 1.55; max-width: 72ch; }
/* sets (/collections/sets): heading left and notes right on top, the sets as tiles below */
.cguide--rows { grid-template-columns: minmax(0, 1fr); padding: clamp(32px, 4.4vw, 56px); }
.cguide--rows .cguide__copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 5vw, 72px); align-items: end; padding: 0 0 28px; }
.cguide--rows .cguide__head h2 { margin-bottom: 0; }
.cguide__aside { margin: 0; font-size: 15px; line-height: 1.6; }
.cguide__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cguide__rows li { display: flex; }
.cguide__row { flex: 1; display: grid; grid-template-columns: 104px minmax(0, 1fr) 20px; gap: 18px; align-items: center; padding: 12px 18px 12px 12px; border-radius: var(--r-lg); background: var(--bg); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cguide__thumb { display: grid; place-items: center; width: 104px; height: 104px; border-radius: var(--r); background: #fff; overflow: hidden; }
.cguide__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cguide__row-txt { min-width: 0; }
.cguide__row-txt b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.cguide__row-txt > span { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.cguide__soldout { font-family: var(--font-body); font-size: 12px; font-style: normal; font-weight: 600; line-height: 1; color: var(--muted); background: #fff; border-radius: 999px; padding: 5px 9px; white-space: nowrap; }
.cguide__row > .icon { color: var(--muted); transition: transform .2s ease, color .2s ease; }
@media (hover: hover) {
  /* the hover of the situation picker cards */
  a.cguide__row:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(16,29,23,.04), 0 4px 10px rgba(16,29,23,.05), 0 22px 44px -22px rgba(16,29,23,.3); }
  a.cguide__row:hover > .icon { color: var(--ink); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .cguide__row, .cguide__row > .icon { transition: none; } a.cguide__row:hover, a.cguide__row:hover > .icon { transform: none; } }
@media (max-width: 860px) {
  .cguide { grid-template-columns: minmax(0, 1fr); margin-top: var(--s6); }
  .cguide__stage { margin: 10px 10px 0; min-height: 0; aspect-ratio: 16 / 10; }
  .cguide__copy { padding: 26px 22px 28px; }
  .cguide__text p.cguide__lead { font-size: 17.5px; }
  /* phones: heading, the sets, then the notes */
  .cguide--rows { display: flex; flex-direction: column; padding: 28px 18px 18px; }
  .cguide--rows .cguide__copy { display: contents; }
  .cguide--rows .cguide__head { padding: 0 4px 20px; }
  .cguide--rows .cguide__aside { order: 3; padding: 20px 4px 4px; }
  .cguide__rows { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cguide__row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 10px 14px 10px 10px; }
  .cguide__row > .icon { display: none; }
  .cguide__thumb { width: 76px; height: 76px; }
  .cguide__row-txt b { font-size: 16.5px; }
}
@media (max-width: 600px) { .cguide__stage { aspect-ratio: 5 / 4; } }
/* 320px: the text column kept 114px, "Ergänzungsfuttermittel" ran 10px past it under overflow: hidden (sweep 29);
   a smaller photo and German hyphenation keep every word inside */
@media (max-width: 360px) {
  .cguide__row { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .cguide__thumb { width: 60px; height: 60px; }
  .cguide__row-txt > span { hyphens: auto; }
}
/* END_SNIPPET:coll-guide-card */

/* START_SNIPPET:feed-label-facts (INDEX:99) */
/* L45: the exponent must not open a gap above its line */
.transparency__facts sup { line-height: 0; }
/* END_SNIPPET:feed-label-facts */

/* START_SNIPPET:pdp-faq-flat (INDEX:123) */
/* the home FAQ inside the product page's module stack: no card of its own (its question cards are the cards) */
.pdp-more > .home-faq--pdp { padding-block: 16px; background: none; }
/* END_SNIPPET:pdp-faq-flat */

/* START_SNIPPET:pdp-photo-prose (INDEX:125) */
.pdp-photo-prose { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border-radius: var(--r-xl); overflow: hidden; }
.pdp-photo-prose__media picture, .pdp-photo-prose__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-photo-prose__copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
.pdp-photo-prose__copy h2 { font-size: var(--t-h2); letter-spacing: -.025em; margin: 0 0 16px; }
.pdp-photo-prose__copy .rte { color: var(--muted); font-size: 16px; line-height: 1.65; }
.pdp-photo-prose__copy .rte > :first-child { margin-top: 0; color: var(--ink); font-size: 18px; }
.pdp-photo-prose__copy .rte > :last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .pdp-photo-prose { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .pdp-photo-prose__media { aspect-ratio: 16 / 10; }
  .pdp-photo-prose__copy { padding: 24px 20px 26px; }
  .pdp-photo-prose__copy .rte > :first-child { font-size: 17px; }
}
/* END_SNIPPET:pdp-photo-prose */

/* START_SNIPPET:pdp-routine (INDEX:127) */
.pdp-steps__banner { overflow: hidden; margin-bottom: 20px; aspect-ratio: 21 / 8; border-radius: var(--r-lg); }
.pdp-steps__banner picture, .pdp-steps__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the home step card (sections/routine-plan) inside the white product module: the light ground keeps it visible.
   One row for 2 or 3 steps from 761px (768px showed 2 + 1); 4 steps sit 2 x 2 below 1100px */
.pdp-steps .routine-plan__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pdp-steps .routine-plan__grid:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp-steps .routine-plan__grid:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pdp-steps .routine-plan__grid:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdp-steps .routine-plan__card { background: color-mix(in srgb, var(--line) 30%, #fff); }
.pdp-steps__tile { display: flex; align-items: center; justify-content: center; gap: 8px; height: 190px; margin: 16px 16px 0; padding: 16px; background: #fff; border-radius: var(--r); }
.pdp-steps__tile img { display: block; flex: 0 1 auto; min-width: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .pdp-steps__banner { aspect-ratio: 16 / 9; margin-bottom: 14px; }
  .pdp-steps .routine-plan__grid, .pdp-steps .routine-plan__grid:has(> li:nth-child(4)), .pdp-steps .routine-plan__grid:not(:has(> li:nth-child(3))) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pdp-steps__tile { height: 150px; }
}
/* END_SNIPPET:pdp-routine */

/* START_SNIPPET:pdp-set-contents (INDEX:128) */
.pdp-more > .set-contents.set-contents { padding: clamp(24px, 4vw, 56px); background: var(--lime-soft); border-color: var(--lime-line); }
.set-contents__head { max-width: 640px; }
.set-contents__head h2 { margin: 0; }
.set-contents__head p { margin: 12px 0 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.set-contents__stage { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 2vw, 24px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.set-contents__item { display: grid; justify-items: center; flex: 1 1 0; min-width: 0; max-width: 300px; text-align: center; }
.set-contents__media { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 10%; background: #fff; border-radius: var(--r-lg); box-shadow: 0 18px 36px -26px rgba(14, 43, 35, .45); }
.set-contents__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.set-contents__item:hover .set-contents__media img { transform: translateY(-4px); }
.set-contents__name { margin-top: 14px; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; text-decoration: none; }
/* the product name is the item's link, 21px tall on phones (TQ point 44): a tap layer of 45px, it does not move */
.set-contents__name { position: relative; }
.set-contents__name::after { content: ""; position: absolute; inset: -12px 0; }
.set-contents__name:hover { text-decoration: underline; text-decoration-color: var(--lime-deep); text-underline-offset: 3px; }
.set-contents__use { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.set-contents__single { margin-top: 10px; padding: 3px 10px; background: rgba(255, 255, 255, .7); border-radius: 999px; color: var(--muted); font-size: 13px; }
.set-contents__plus { flex: none; align-self: center; margin-top: calc(-1 * clamp(60px, 8vw, 110px)); color: var(--lime-deep); font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1; }
.set-contents__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "math btn" "note btn"; align-items: center; gap: 4px 24px; margin-top: clamp(28px, 4vw, 44px); padding: 20px 20px 20px 28px; background: var(--card); border-radius: var(--r-lg); }
.set-contents__math { grid-area: math; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.set-contents__was { color: var(--muted); font-size: 15px; }
.set-contents__was s { margin-left: 4px; }
.set-contents__now { color: var(--ink); font-size: 15px; }
.set-contents__now strong { margin-left: 4px; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.015em; }
.set-contents__save { padding: 4px 12px; background: var(--lime-soft); border: 1px solid var(--lime-line); border-radius: 999px; color: var(--lime-ink); font-size: 14px; font-weight: 600; }
.set-contents__note { grid-area: note; }
.set-contents__note .price-note { margin: 0; color: var(--faint); font-size: var(--t-small); }
.set-contents__note .price-note a { color: inherit; }
.set-contents .set-contents__btn.button { grid-area: btn; min-height: 52px; padding: 0 32px; font-size: 16px; }
/* phones: one row per product, tile left, text right */
@media (max-width: 760px) {
  .set-contents__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .set-contents__plus { display: none; }
  .set-contents__item { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "media name" "media use" "media single"; justify-items: start; align-content: center; column-gap: 16px; max-width: none; text-align: left; }
  .set-contents__media { grid-area: media; align-self: center; padding: 8px; }
  .set-contents__name { grid-area: name; margin-top: 0; font-size: 17px; }
  .set-contents__use { grid-area: use; margin-top: 2px; font-size: 14px; }
  .set-contents__single { grid-area: single; margin-top: 6px; }
  .set-contents__sum { grid-template-columns: minmax(0, 1fr); grid-template-areas: "math" "note" "btn"; padding: 18px; }
  .set-contents .set-contents__btn.button { width: 100%; margin-top: 10px; }
}
/* END_SNIPPET:pdp-set-contents */

/* START_SNIPPET:review-form (INDEX:152) */
/* L25: review form in the review band. Closed by default ([hidden]); one card like the summary card. */
.rvf { --rvf-error: #a3341f; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  margin-top: 24px; padding: clamp(22px, 3vw, 36px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rvf[hidden] { display: none; }
.rvf__head { margin: 0 0 6px; padding-right: 48px; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.rvf__product { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.rvf__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.rvf__stars { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.rvf__stars legend { padding: 0; margin-bottom: 4px; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.rvf__row { display: flex; flex-wrap: wrap; align-items: center; }
.rvf__row input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
/* the star of snippets/stars: fill and edge share one colour, so there is no contour; empty = the light line colour */
.rvf__row label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--line); cursor: pointer; }
/* the row carries the choice (data-value) and the star under the pointer (data-preview), set by the script below:
   Chromium did not repaint ":has(~ input:checked)" reliably when arrow keys moved the choice (measured 17.10.) */
.rvf__row[data-value="1"] label:nth-of-type(-n+1), .rvf__row[data-value="2"] label:nth-of-type(-n+2),
.rvf__row[data-value="3"] label:nth-of-type(-n+3), .rvf__row[data-value="4"] label:nth-of-type(-n+4),
.rvf__row[data-value="5"] label:nth-of-type(-n+5) { color: var(--lime); }
/* doubled class: the preview outranks the choice while the pointer is on a star */
.rvf__row.rvf__row[data-preview] label:nth-of-type(n) { color: var(--line); }
.rvf__row.rvf__row[data-preview="1"] label:nth-of-type(-n+1), .rvf__row.rvf__row[data-preview="2"] label:nth-of-type(-n+2),
.rvf__row.rvf__row[data-preview="3"] label:nth-of-type(-n+3), .rvf__row.rvf__row[data-preview="4"] label:nth-of-type(-n+4),
.rvf__row.rvf__row[data-preview="5"] label:nth-of-type(-n+5) { color: var(--lime); }
.rvf__row input:focus-visible + label { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.rvf__count { margin-left: 8px; color: var(--muted); font-size: var(--t-small); }
.rvf__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.rvf__fields .rvf__wide { grid-column: 1 / -1; }
.rvf__fields label span { font-weight: 400; color: var(--muted); }
.rvf__fields [aria-invalid] { border-color: var(--rvf-error); }
.rvf__err { margin: 6px 0 0; color: var(--rvf-error); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.rvf__err--send { margin-top: 12px; }
.rvf .rvf__consent { margin: 4px 0 0; font-size: var(--t-small); }
.rvf__submit { margin-top: 16px; min-height: 50px; padding: 0 28px; }
.rvf__done { margin: 0; font-weight: 500; line-height: 1.5; }
.rvf__unsure { padding: 12px 16px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r); }
.rvf__unsure a { color: inherit; }
/* the opener sits under the summary like the "Alle Antworten ansehen" link; it is a button (it opens a box) */
.reviews__write { margin-top: 6px; padding-inline: 0; border: 0; background: none; font-family: inherit; text-decoration-line: underline; cursor: pointer; }
@media (min-width: 990px) {
  .rvf { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 48px; }
  .rvf__close { top: 16px; right: 16px; }
  .rvf__done { grid-column: 2; align-self: start; }
}
@media (max-width: 599px) {
  .rvf__fields { grid-template-columns: minmax(0, 1fr); }
  .rvf__submit { width: 100%; }
}
/* END_SNIPPET:review-form */

/* START_SNIPPET:sticky-atc (INDEX:163) */
/* hidden: pushed down by its own height plus the part of the tile that sticks out above it */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -14px 34px -24px rgba(14, 43, 35, .45); visibility: hidden; transform: translateY(calc(100% + 64px)); transition: transform .3s ease, visibility .3s; }
.sticky-atc.is-visible { visibility: visible; transform: none; }
.sticky-atc__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "img title price btn" "img title note btn"; align-items: center; gap: 0 18px; max-width: var(--maxw); margin: 0 auto; padding: 10px 28px; }
/* L10 B4 (sweep 17.10.): the tile stays inside the bar. Breaking out 52px over its top edge, it covered the page under
   it: a card price ("€54,90" in "Passt dazu"), headings and text at 1280 */
.sticky-atc__img { grid-area: img; align-self: center; display: block; width: 56px; height: 56px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.sticky-atc__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sticky-atc__title { grid-area: title; display: grid; gap: 1px; min-width: 0; }
.sticky-atc__title small { overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.sticky-atc__title strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.sticky-atc__title small + strong { -webkit-line-clamp: 1; }
.sticky-atc__price { grid-area: price; justify-self: end; align-self: end; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }
.sticky-atc__price .base-price { margin-left: 6px; font-family: var(--font-body); font-size: var(--t-small); letter-spacing: 0; }
.sticky-atc__note { grid-area: note; justify-self: end; align-self: start; }
.sticky-atc .price-note { margin: 0; color: var(--faint); font-size: var(--t-small); white-space: nowrap; }
.sticky-atc .price-note a { color: inherit; white-space: nowrap; }
/* doubled scope: base.css sets every bar button to 44px via main :is(...), specificity 0,3,1 */
.sticky-atc .sticky-atc__in .button.button { grid-area: btn; min-height: 48px; margin-left: 8px; padding: 0 28px; font-size: 15px; }
/* tablets: the title would get 2 words a line, so it goes; tile, price and button stay */
@media (min-width: 621px) and (max-width: 899px) {
  .sticky-atc__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "img price btn" "img note btn"; }
  .sticky-atc__title { display: none; }
  .sticky-atc__price, .sticky-atc__note { justify-self: start; }
}
/* phones: a smaller tile breaking out the same way; price with the base price under it beside the button,
   the VAT note on one line under both (at 375 the three side by side left 89px for 156px of price) */
@media (max-width: 620px) {
  .sticky-atc__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "img price btn" "img note note"; gap: 2px 10px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
  .sticky-atc__img { width: 64px; height: 64px; padding: 4px; }
  .sticky-atc__title { display: none; }
  .sticky-atc__price, .sticky-atc__note { justify-self: start; }
  .sticky-atc__price { align-self: center; font-size: 19px; }
  .sticky-atc__price .base-price { display: block; margin: 1px 0 0; white-space: nowrap; }
  .sticky-atc .price-note a { padding-block: 0; }
  .sticky-atc .sticky-atc__in .button.button { min-height: 46px; margin-left: 0; padding: 0 16px; font-size: 14px; }
}
/* small phones (320): no tile, so price and button keep their room */
@media (max-width: 360px) {
  .sticky-atc__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price btn" "note note"; }
  .sticky-atc__img { display: none; }
  .sticky-atc .sticky-atc__in .button.button { padding: 0 14px; }
}
/* phones in landscape (844x390): one low row, no tile. From 540px: at 568x320 the phone layout made the bar 87px,
   27% of the screen, over the middle of the page (TQ point 46); one row fits there too */
@media (min-width: 540px) and (max-height: 500px) {
  .sticky-atc__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "price note btn"; column-gap: 14px; padding-block: 8px; }
  .sticky-atc__img, .sticky-atc__title { display: none; }
  .sticky-atc__note { justify-self: start; align-self: center; }
  .sticky-atc__price { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .sticky-atc { transition: none; } }
/* notify mode (sold-out variant): the page's one lime action is the notify button in the buy box; the bar
   points there in outline, like the approved mock (RESTOCK-VORSCHLAG.md, muster-wk-de-375-sticky.png) */
.sticky-atc .sticky-atc__in .button.button[data-notify] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); cursor: pointer; }
.sticky-atc .sticky-atc__in .button.button[data-notify]:hover { background: var(--paper); transform: none; }
/* END_SNIPPET:sticky-atc */