/** Shopify CDN: Minification failed

Line 445:0 Unexpected "}"

**/
/* 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: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: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: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: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 */