:root,
[data-bs-theme=light] {
  --ar-primary: #bf262c;
  --ar-primary-rgb: 191, 38, 44;
  --bs-primary: #bf262c;
  --bs-primary-rgb: 191, 38, 44;
  --ar-secondary: #f6f1ea;
  --ar-secondary-rgb: 246, 241, 234;
  --bs-secondary: #f6f1ea;
  --bs-secondary-rgb: 246, 241, 234;
  --ar-warning: #edcb50;
  --ar-warning-rgb: 237, 203, 80;
  --bs-warning: #edcb50;
  --bs-warning-rgb: 237, 203, 80;
  --ar-info: #3f7fca;
  --ar-info-rgb: 63, 127, 202;
  --bs-info: #3f7fca;
  --bs-info-rgb: 63, 127, 202;
  --ar-success: #3fca90;
  --ar-success-rgb: 63, 202, 144;
  --bs-success: #3fca90;
  --bs-success-rgb: 63, 202, 144;
  --ar-danger: #ed5050;
  --ar-danger-rgb: 237, 80, 80;
  --bs-danger: #ed5050;
  --bs-danger-rgb: 237, 80, 80;
  --ar-light: #ffffff;
  --ar-light-rgb: 255, 255, 255;
  --bs-light: #ffffff;
  --bs-light-rgb: 255, 255, 255;
  --ar-dark: #231f20;
  --ar-dark-rgb: 35, 31, 32;
  --bs-dark: #231f20;
  --bs-dark-rgb: 35, 31, 32;
  --ar-link-color: #bf262c;
  --ar-link-hover-color: #a60d13;
  --bs-link-color: #bf262c;
  --bs-link-color-rgb: 191, 38, 44;
  --bs-link-hover-color: #a60d13;
  --ar-body-font-family: 'Inter', sans-serif;
  --ar-heading-font-family: 'Barlow', sans-serif;
  --ar-root-font-size: 1rem;
  --ar-body-font-size: 1rem;
  --ar-border-width: 1px;
  --ar-border-radius: 1rem;
  --ar-border-radius-sm: calc(var(--ar-border-radius) * 0.75);
  --ar-border-radius-lg: calc(var(--ar-border-radius) * 1.25);
  --ar-border-radius-xl: calc(var(--ar-border-radius) * 1.5);
  --ar-border-radius-xxl: calc(var(--ar-border-radius) * 2.25);
}
[data-bs-theme=light] {
  --ar-body-bg: #ffffff;
  --bs-body-bg: #ffffff;
  --ar-body-bg-rgb: 255, 255, 255;
  --bs-body-bg-rgb: 255, 255, 255;
  --ar-body-color: #576071;
  --bs-body-color: #576071;
  --ar-body-color-rgb: 87, 96, 113;
  --bs-body-color-rgb: 87, 96, 113;
  --ar-secondary-color: #858c97;
  --bs-secondary-color: #858c97;
  --ar-heading-color: #121519;
  --bs-heading-color: #121519;
  --ar-border-color: #e3e9ef;
  --bs-border-color: #e3e9ef;
}
[data-bs-theme=light] .card {
  --ar-card-bg: #ffffff;
}
.btn-primary {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #bf262c;
  --ar-btn-border-color: #bf262c;
  --ar-btn-hover-bg: #a60d13;
  --ar-btn-hover-border-color: #a60d13;
  --ar-btn-active-bg: #a60d13;
  --ar-btn-active-border-color: #a60d13;
  --ar-btn-disabled-bg: #bf262c;
  --ar-btn-disabled-border-color: #bf262c;
}
.btn-outline-primary {
  --ar-btn-color: #bf262c;
  --ar-btn-border-color: #bf262c;
  --ar-btn-hover-bg: #bf262c;
  --ar-btn-hover-border-color: #bf262c;
  --ar-btn-active-bg: #bf262c;
  --ar-btn-active-border-color: #bf262c;
  --ar-btn-disabled-color: #bf262c;
  --ar-btn-disabled-border-color: #bf262c;
}
.btn-secondary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #f6f1ea;
  --ar-btn-border-color: #f6f1ea;
  --ar-btn-hover-bg: #ddd8d1;
  --ar-btn-hover-border-color: #ddd8d1;
  --ar-btn-active-bg: #ddd8d1;
  --ar-btn-active-border-color: #ddd8d1;
  --ar-btn-disabled-bg: #f6f1ea;
  --ar-btn-disabled-border-color: #f6f1ea;
}
.btn-outline-secondary {
  --ar-btn-color: #f6f1ea;
  --ar-btn-border-color: #f6f1ea;
  --ar-btn-hover-bg: #f6f1ea;
  --ar-btn-hover-border-color: #f6f1ea;
  --ar-btn-active-bg: #f6f1ea;
  --ar-btn-active-border-color: #f6f1ea;
  --ar-btn-disabled-color: #f6f1ea;
  --ar-btn-disabled-border-color: #f6f1ea;
}
.btn-warning {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #d4b237;
  --ar-btn-hover-border-color: #d4b237;
  --ar-btn-active-bg: #d4b237;
  --ar-btn-active-border-color: #d4b237;
  --ar-btn-disabled-bg: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-outline-warning {
  --ar-btn-color: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #edcb50;
  --ar-btn-hover-border-color: #edcb50;
  --ar-btn-active-bg: #edcb50;
  --ar-btn-active-border-color: #edcb50;
  --ar-btn-disabled-color: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-info {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #2666b1;
  --ar-btn-hover-border-color: #2666b1;
  --ar-btn-active-bg: #2666b1;
  --ar-btn-active-border-color: #2666b1;
  --ar-btn-disabled-bg: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-outline-info {
  --ar-btn-color: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #3f7fca;
  --ar-btn-hover-border-color: #3f7fca;
  --ar-btn-active-bg: #3f7fca;
  --ar-btn-active-border-color: #3f7fca;
  --ar-btn-disabled-color: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-success {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #3fca90;
  --ar-btn-border-color: #3fca90;
  --ar-btn-hover-bg: #26b177;
  --ar-btn-hover-border-color: #26b177;
  --ar-btn-active-bg: #26b177;
  --ar-btn-active-border-color: #26b177;
  --ar-btn-disabled-bg: #3fca90;
  --ar-btn-disabled-border-color: #3fca90;
}
.btn-outline-success {
  --ar-btn-color: #3fca90;
  --ar-btn-border-color: #3fca90;
  --ar-btn-hover-bg: #3fca90;
  --ar-btn-hover-border-color: #3fca90;
  --ar-btn-active-bg: #3fca90;
  --ar-btn-active-border-color: #3fca90;
  --ar-btn-disabled-color: #3fca90;
  --ar-btn-disabled-border-color: #3fca90;
}
.btn-danger {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #d43737;
  --ar-btn-hover-border-color: #d43737;
  --ar-btn-active-bg: #d43737;
  --ar-btn-active-border-color: #d43737;
  --ar-btn-disabled-bg: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-outline-danger {
  --ar-btn-color: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #ed5050;
  --ar-btn-hover-border-color: #ed5050;
  --ar-btn-active-bg: #ed5050;
  --ar-btn-active-border-color: #ed5050;
  --ar-btn-disabled-color: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-light {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #ffffff;
  --ar-btn-border-color: #ffffff;
  --ar-btn-hover-bg: #e6e6e6;
  --ar-btn-hover-border-color: #e6e6e6;
  --ar-btn-active-bg: #e6e6e6;
  --ar-btn-active-border-color: #e6e6e6;
  --ar-btn-disabled-bg: #ffffff;
  --ar-btn-disabled-border-color: #ffffff;
}
.btn-outline-light {
  --ar-btn-color: #ffffff;
  --ar-btn-border-color: #ffffff;
  --ar-btn-hover-bg: #ffffff;
  --ar-btn-hover-border-color: #ffffff;
  --ar-btn-active-bg: #ffffff;
  --ar-btn-active-border-color: #ffffff;
  --ar-btn-disabled-color: #ffffff;
  --ar-btn-disabled-border-color: #ffffff;
}
.btn-dark {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #231f20;
  --ar-btn-border-color: #231f20;
  --ar-btn-hover-bg: #0a0607;
  --ar-btn-hover-border-color: #0a0607;
  --ar-btn-active-bg: #0a0607;
  --ar-btn-active-border-color: #0a0607;
  --ar-btn-disabled-bg: #231f20;
  --ar-btn-disabled-border-color: #231f20;
}
.btn-outline-dark {
  --ar-btn-color: #231f20;
  --ar-btn-border-color: #231f20;
  --ar-btn-hover-bg: #231f20;
  --ar-btn-hover-border-color: #231f20;
  --ar-btn-active-bg: #231f20;
  --ar-btn-active-border-color: #231f20;
  --ar-btn-disabled-color: #231f20;
  --ar-btn-disabled-border-color: #231f20;
}
.accordion-button:not(.collapsed)::after {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23bf262c'%3e%3cpath%20d='M.5%206.3c.6-.6%201.6-.6%202.3%200l9.3%209.3%209.3-9.3c.6-.6%201.6-.6%202.3%200%20.6.6.6%201.6%200%202.3L13.3%2018.8c-.6.6-1.6.6-2.3%200L.8%208.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}
/* drinkfix - booost.theme_custom_css (phase 2, 2026-10-19)
   Only what no class or registry record can do. Checked light + dark.

   Dark mode: the logo red #bf262c reaches only 3.08:1 on the dark body
   (#121519) and 2.74:1 on espresso (#231f20). Text-level red (links,
   text-primary, outline buttons, icons) gets the lighter #cf5c61 (red +
   25 % white: 4.67:1 on the dark body, 4.16:1 on espresso - large text and
   icons only there). Solid red surfaces (btn-primary, bg-primary) keep
   #bf262c, white text on it stays at 5.95:1. Applies to the dark site mode
   and to every dark_mode tile/section (data-bs-theme="dark" on the wrapper). */
[data-bs-theme=dark] {
  --ar-primary: #cf5c61;
  --ar-primary-rgb: 207, 92, 97;
  --bs-primary: #cf5c61;
  --bs-primary-rgb: 207, 92, 97;
  --ar-link-color: #cf5c61;
  --bs-link-color: #cf5c61;
  --bs-link-color-rgb: 207, 92, 97;
  --ar-link-hover-color: #e08a8e;
  --bs-link-hover-color: #e08a8e;
}
[data-bs-theme=dark] .btn-primary {
  --ar-btn-bg: #bf262c;
  --ar-btn-border-color: #bf262c;
  --ar-btn-hover-bg: #a60d13;
  --ar-btn-hover-border-color: #a60d13;
  --ar-btn-active-bg: #a60d13;
  --ar-btn-active-border-color: #a60d13;
}
[data-bs-theme=dark] .btn-outline-primary {
  --ar-btn-color: #cf5c61;
  --ar-btn-border-color: #cf5c61;
  --ar-btn-hover-bg: #bf262c;
  --ar-btn-hover-border-color: #bf262c;
  --ar-btn-active-bg: #bf262c;
  --ar-btn-active-border-color: #bf262c;
}
[data-bs-theme=dark] .bg-primary {
  --ar-primary-rgb: 191, 38, 44;
  --bs-primary-rgb: 191, 38, 44;
}

/* Header, below lg: logo | dark-mode switch (icons hidden) | service number
   (header tile "claim") | menu toggler, in one line down to 360 px. Desktop
   order comes from booost.header_tiles (order-lg-*). */
@media (max-width: 991.98px) {
  #header .header-logo { height: 40px !important; }
  #header .navbar-brand { margin-right: 0; }
  #header .mode-switch { order: 1; margin: 0 .5rem 0 auto !important; }
  #header .mode-switch .form-check-label { display: none; }
  #header .nav-claim { order: 2; margin: 0 !important; }
  #header .navbar-toggler { order: 3; }
  #header .navbar-collapse { order: 4; }
}
@media (max-width: 379.98px) {
  #header .nav-claim .btn { font-size: .8125rem; }
  #header .header-logo { height: 34px !important; }
}

/* Crema sections: theme_secondary (#f6f1ea) does not reach the bg-secondary
   utility, which the theme paints with gray-100 (#f6f9fc, a cool blue-grey).
   Light mode only; the dark-mode rule of the theme stays in charge there. */
[data-bs-theme=light] .bg-secondary:not(.badge) {
  background-color: var(--ar-secondary) !important;
}

/* Product photos in listings (css_class "product-card"): a square white
   box, the whole machine visible, never cropped. The listing's fluid scale
   puts h-auto on the image, which would let it spill out of the ratio box. */
.product-card .ratio > img {
  height: 100% !important;
  object-fit: contain;
}

/* Photo cards (Branchen on the start page): one 3:2 frame for photos of
   different formats. booost's card-image-top has no image ratio of its own
   (proposal for booost: honour image_ratio there); object-fit only changes
   the display, the files stay as delivered. */
.drinkfix-image-cards .card-img-top {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Cup signet (phase 3c, 2026-10-23; drawing and recipes in specs/design/).
   Both cups are inline SVG in the hero/CTA tile's cta_svg field: the html
   tile's filter strips viewBox, d, fill and transform, cta_svg is raw.

   Start page hero: the large faint cup with steam on the right half, behind
   the copy (the tile lifts its copy with z-2). Red 13 % on espresso, white
   6 % in dark mode. The only moving cup on the site: the steam drifts up and
   fades, 4.6-5.6 s, staggered; still under reduced motion. */
.dfx-hero-cup {
  right: 3%;
  bottom: -8%;
  width: min(40vw, 660px);  /* by width: stays right of the col-lg-7 copy */
  height: auto;
  aspect-ratio: 246 / 311;
  color: #bf262c;
  opacity: .13;
}
[data-bs-theme=dark] .dfx-hero-cup { color: #fff; opacity: .06; }
@media (max-width: 991.98px) {
  .dfx-hero-cup { width: auto; height: 280px; bottom: -36px; right: -12px; }
}
.dfx-steam {
  opacity: .85;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dfx-rise 5s ease-in-out infinite;
}
.dfx-steam-1 { animation-delay: -1.2s; }
.dfx-steam-2 { animation-delay: -3.1s; animation-duration: 5.6s; }
.dfx-steam-3 { animation-delay: -4.4s; animation-duration: 4.6s; }
@keyframes dfx-rise {
  0% { transform: translateY(10px) scaleY(.85); opacity: 0; }
  25% { opacity: .9; }
  70% { opacity: .55; }
  100% { transform: translateY(-14px) scaleY(1.08); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-steam { animation: none; }
}

/* CTA band on every page: the static red cup (text-primary, #cf5c61 in
   dark mode) left of heading and text, the button on the right. The cup's
   size and the heading/text | button grid are what no class can do; on
   phones the cup sits above and the button below the text. */
.dfx-cup { width: 72px; height: auto; }
.dfx-cta > div { flex: 1 1 auto; min-width: 0; }  /* the copy wrapper fills the row */
@media (min-width: 992px) {
  .dfx-cup { width: 110px; }
}
@media (min-width: 768px) {
  .dfx-cta-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2rem;
    align-items: center;
  }
  .dfx-cta-body > * { grid-column: 1; }
  .dfx-cta-body > .d-inline-flex { grid-column: 2; grid-row: 1 / span 3; }
}

body.template-folder_contents,
body[class*="controlpanel"],
body.template-sharing,
body.template-historyview {
  --ar-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ar-heading-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#edit-zone { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }