:root,
[data-bs-theme=light] {
  --ar-primary: #0075bf;
  --ar-primary-rgb: 0, 117, 191;
  --bs-primary: #0075bf;
  --bs-primary-rgb: 0, 117, 191;
  --ar-secondary: #f2f0ed;
  --ar-secondary-rgb: 242, 240, 237;
  --bs-secondary: #f2f0ed;
  --bs-secondary-rgb: 242, 240, 237;
  --ar-warning: #ef7d00;
  --ar-warning-rgb: 239, 125, 0;
  --bs-warning: #ef7d00;
  --bs-warning-rgb: 239, 125, 0;
  --ar-info: #174a7c;
  --ar-info-rgb: 23, 74, 124;
  --bs-info: #174a7c;
  --bs-info-rgb: 23, 74, 124;
  --ar-success: #1f5f63;
  --ar-success-rgb: 31, 95, 99;
  --bs-success: #1f5f63;
  --bs-success-rgb: 31, 95, 99;
  --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: #1e2a30;
  --ar-dark-rgb: 30, 42, 48;
  --bs-dark: #1e2a30;
  --bs-dark-rgb: 30, 42, 48;
  --ar-link-color: #0075bf;
  --ar-link-hover-color: #005ca6;
  --bs-link-color: #0075bf;
  --bs-link-color-rgb: 0, 117, 191;
  --bs-link-hover-color: #005ca6;
  --ar-body-font-family: 'Source Sans 3', sans-serif;
  --ar-heading-font-family: 'Zilla Slab', serif;
  --ar-root-font-size: 1rem;
  --ar-body-font-size: 1rem;
  --ar-border-width: 1px;
  --ar-border-radius: 0.75rem;
  --ar-border-radius-sm: calc(var(--ar-border-radius) * 0.75);
  --ar-border-radius-lg: calc(var(--ar-border-radius) * 1);
  --ar-border-radius-xl: calc(var(--ar-border-radius) * 2);
  --ar-border-radius-xxl: calc(var(--ar-border-radius) * 2);
}
[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: #1e2a30;
  --bs-body-color: #1e2a30;
  --ar-body-color-rgb: 30, 42, 48;
  --bs-body-color-rgb: 30, 42, 48;
  --ar-secondary-color: #4f5b63;
  --bs-secondary-color: #4f5b63;
  --ar-heading-color: #1e2a30;
  --bs-heading-color: #1e2a30;
  --ar-border-color: #e5e2de;
  --bs-border-color: #e5e2de;
}
[data-bs-theme=light] .card {
  --ar-card-bg: #f9f8f6;
}
.btn-primary {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #0075bf;
  --ar-btn-border-color: #0075bf;
  --ar-btn-hover-bg: #005ca6;
  --ar-btn-hover-border-color: #005ca6;
  --ar-btn-active-bg: #005ca6;
  --ar-btn-active-border-color: #005ca6;
  --ar-btn-disabled-bg: #0075bf;
  --ar-btn-disabled-border-color: #0075bf;
}
.btn-outline-primary {
  --ar-btn-color: #0075bf;
  --ar-btn-border-color: #0075bf;
  --ar-btn-hover-bg: #0075bf;
  --ar-btn-hover-border-color: #0075bf;
  --ar-btn-active-bg: #0075bf;
  --ar-btn-active-border-color: #0075bf;
  --ar-btn-disabled-color: #0075bf;
  --ar-btn-disabled-border-color: #0075bf;
}
.btn-secondary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #f2f0ed;
  --ar-btn-border-color: #f2f0ed;
  --ar-btn-hover-bg: #d9d7d4;
  --ar-btn-hover-border-color: #d9d7d4;
  --ar-btn-active-bg: #d9d7d4;
  --ar-btn-active-border-color: #d9d7d4;
  --ar-btn-disabled-bg: #f2f0ed;
  --ar-btn-disabled-border-color: #f2f0ed;
}
.btn-outline-secondary {
  --ar-btn-color: #f2f0ed;
  --ar-btn-border-color: #f2f0ed;
  --ar-btn-hover-bg: #f2f0ed;
  --ar-btn-hover-border-color: #f2f0ed;
  --ar-btn-active-bg: #f2f0ed;
  --ar-btn-active-border-color: #f2f0ed;
  --ar-btn-disabled-color: #f2f0ed;
  --ar-btn-disabled-border-color: #f2f0ed;
}
.btn-warning {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #ef7d00;
  --ar-btn-border-color: #ef7d00;
  --ar-btn-hover-bg: #d66400;
  --ar-btn-hover-border-color: #d66400;
  --ar-btn-active-bg: #d66400;
  --ar-btn-active-border-color: #d66400;
  --ar-btn-disabled-bg: #ef7d00;
  --ar-btn-disabled-border-color: #ef7d00;
}
.btn-outline-warning {
  --ar-btn-color: #ef7d00;
  --ar-btn-border-color: #ef7d00;
  --ar-btn-hover-bg: #ef7d00;
  --ar-btn-hover-border-color: #ef7d00;
  --ar-btn-active-bg: #ef7d00;
  --ar-btn-active-border-color: #ef7d00;
  --ar-btn-disabled-color: #ef7d00;
  --ar-btn-disabled-border-color: #ef7d00;
}
.btn-info {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #174a7c;
  --ar-btn-border-color: #174a7c;
  --ar-btn-hover-bg: #003163;
  --ar-btn-hover-border-color: #003163;
  --ar-btn-active-bg: #003163;
  --ar-btn-active-border-color: #003163;
  --ar-btn-disabled-bg: #174a7c;
  --ar-btn-disabled-border-color: #174a7c;
}
.btn-outline-info {
  --ar-btn-color: #174a7c;
  --ar-btn-border-color: #174a7c;
  --ar-btn-hover-bg: #174a7c;
  --ar-btn-hover-border-color: #174a7c;
  --ar-btn-active-bg: #174a7c;
  --ar-btn-active-border-color: #174a7c;
  --ar-btn-disabled-color: #174a7c;
  --ar-btn-disabled-border-color: #174a7c;
}
.btn-success {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #1f5f63;
  --ar-btn-border-color: #1f5f63;
  --ar-btn-hover-bg: #06464a;
  --ar-btn-hover-border-color: #06464a;
  --ar-btn-active-bg: #06464a;
  --ar-btn-active-border-color: #06464a;
  --ar-btn-disabled-bg: #1f5f63;
  --ar-btn-disabled-border-color: #1f5f63;
}
.btn-outline-success {
  --ar-btn-color: #1f5f63;
  --ar-btn-border-color: #1f5f63;
  --ar-btn-hover-bg: #1f5f63;
  --ar-btn-hover-border-color: #1f5f63;
  --ar-btn-active-bg: #1f5f63;
  --ar-btn-active-border-color: #1f5f63;
  --ar-btn-disabled-color: #1f5f63;
  --ar-btn-disabled-border-color: #1f5f63;
}
.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: #1e2a30;
  --ar-btn-border-color: #1e2a30;
  --ar-btn-hover-bg: #051117;
  --ar-btn-hover-border-color: #051117;
  --ar-btn-active-bg: #051117;
  --ar-btn-active-border-color: #051117;
  --ar-btn-disabled-bg: #1e2a30;
  --ar-btn-disabled-border-color: #1e2a30;
}
.btn-outline-dark {
  --ar-btn-color: #1e2a30;
  --ar-btn-border-color: #1e2a30;
  --ar-btn-hover-bg: #1e2a30;
  --ar-btn-hover-border-color: #1e2a30;
  --ar-btn-active-bg: #1e2a30;
  --ar-btn-active-border-color: #1e2a30;
  --ar-btn-disabled-color: #1e2a30;
  --ar-btn-disabled-border-color: #1e2a30;
}
.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='%230075bf'%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");
}
/* booost.at - logo B "Anlauf" in Zilla Slab (2026-10-05; design from the moodboard 2026-09-30).
   Stored in booost.theme_custom_css by specs/set_design.py (and
   create_content.py); regenerate_theme_css appends it to the generated
   customizer CSS. Only what the booost.theme_* records cannot express. */

/* grey section ground: the theme paints .bg-secondary (and the accordion,
   step numbers, disabled inputs) with --ar-gray-100, which the customizer
   does not derive from theme_secondary - set it to the same grey. Light mode
   only: in dark mode (site toggle on <html>, or a dark tile) the theme's own
   dark surfaces apply - every colour here must work in both modes */
:root:not([data-bs-theme=dark]),
[data-bs-theme=light] {
  --ar-gray-100: #f2f0ed;
  --ar-secondary-bg: #f2f0ed;
  --bs-secondary-bg: #f2f0ed;
}

/* cards are paper (theme_card_bg) on the white page, white on the grey
   ground and as the highlighted pricing card */
[data-bs-theme=light] .bg-secondary .card,
[data-bs-theme=light] .card.border-warning {
  --ar-card-bg: #ffffff;
}

/* orange only ever carries dark text: white on #ff6e26 is 2.8:1.
   !important: the theme sets the white via .btn:not(...)x5 (specificity 0,6,0) */
.btn-warning {
  --ar-btn-color: #1e2a30 !important;
  --ar-btn-hover-color: #1e2a30 !important;
  --ar-btn-active-color: #1e2a30 !important;
  --ar-btn-disabled-color: #1e2a30 !important;
}
.bg-warning,
.text-bg-warning {
  color: #1e2a30;
}

/* Zilla Slab headings set tight, as on the moodboard (theme: 1.3) */
h1, .h1, h2, .h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h3, .h3, h4, .h4 {
  line-height: 1.2;
}

/* hero: orange text on the blue primary ground is ~2:1 - the accent word turns white there */
.bg-primary .booost-hero-accent { color: #ffffff !important; }

/* ---- Feinschliff 2026-10-05: one rhythm, one alignment, figures dark ---- */

/* navigation, breadcrumb and accordion stay dark - blue is a surface (logo,
   hero, buttons, icon squares, step discs, one highlighted card), never text.
   The current page is marked with an orange hairline (a surface, never
   orange text) */
.navbar {
  --ar-navbar-hover-color: var(--ar-heading-color);
  --ar-navbar-active-color: var(--ar-heading-color);
}
@media (min-width: 992px) {
  .navbar-nav .nav-link.active {
    text-decoration: underline 2px var(--ar-warning);
    text-underline-offset: 0.6em;
  }
}
.breadcrumb { --ar-breadcrumb-item-active-color: var(--ar-heading-color); }
.accordion {
  --ar-accordion-btn-color: var(--ar-heading-color);
  --ar-accordion-active-color: var(--ar-heading-color);
}
/* the open chevron too (the customizer bakes the primary blue into the
   active icon's data URL) */
.accordion-button:not(.collapsed)::after { background-image: var(--ar-accordion-btn-icon); }

/* eyebrows (tile subheading, CTA subtitle; the classes come from the
   subheading_css_class / cta_subtitle_css_class records): the hero's
   letter-spaced small caps in the body font, close to their heading */
.booost-eyebrow {
  font-family: var(--ar-body-font-family);
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.tile-subheading.booost-eyebrow {
  padding-bottom: 0 !important;
  margin-bottom: 0.75rem !important;
}

/* links in running text on a blue band (closing CTAs, hero): white and
   underlined, never blue on blue. Orange is no longer a band (2026-10-05) */
.bg-primary a:not(.btn) {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bg-primary a:not(.btn):hover { color: #ffffff; text-decoration-thickness: 2px; }

/* a CTA with a picture (text + image columns): stacked on the phone the
   button needs air before the image */
@media (max-width: 767.98px) {
  .mosaic-booost\.tiles\.cta-tile .row > [class*="col-md-"] + [class*="col-md-"] { margin-top: 2rem; }
}

/* paper surface for a box on the white page (counter band) */
.booost-paper { background-color: var(--ar-card-bg); }

/* pricing cards: one alignment (left), the badge on the card's top edge so
   it pushes nothing down, the button at the foot - title, price, period,
   description, list and button line up across the row */
.card-pricing { position: relative; }
.card-pricing > .card-body {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.card-pricing.border-2 > .card-body { padding: calc(1.5rem - 1px) !important; }
.card-pricing > .card-body > .badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0.45em 1em;
  border-radius: 50rem;
  white-space: nowrap;
}
.card-pricing .card-title { margin: 0 0 0.75rem !important; }
.card-pricing [data-edit-target="price"] { line-height: 1; margin-bottom: 0.75rem; }
.card-pricing [data-edit-target="price"] > span { line-height: 1; }
.card-pricing .card-text { margin-bottom: 1.5rem; }
.card-pricing .card-text > p.fs-sm { margin-bottom: 1rem; }
.card-pricing .card-text > :last-child { margin-bottom: 0; }
.card-pricing > .card-body > .btn { margin-top: auto; }
/* a plan without the "Alles aus …, plus:" line keeps its list level with
   the neighbours that have one */
@media (min-width: 768px) {
  .price-switch-wrapper:has(.card-text > p.fw-semibold) .card-text > p:first-child + ul {
    margin-top: calc(1rem + 1.5em + 0.5rem);
  }
}
/* side by side, the cards share their rows (CSS subgrid down the mosaic
   wrappers): a period line that wraps in one card - "einmalig ab, je nach
   Umfang · …" - or a longer list moves the same row in all of them, and
   the cards end level */
@media (min-width: 768px) {
  .price-switch-wrapper.mosaic-grid-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .price-switch-wrapper > .mosaic-grid-cell { width: auto; max-width: none; }
  .price-switch-wrapper > .mosaic-grid-cell:has([data-bs-toggle="price"]) { grid-column: 1 / -1; }
  .price-switch-wrapper > .mosaic-grid-cell:has(.card-pricing),
  .price-switch-wrapper > .mosaic-grid-cell:has(.card-pricing) > .mosaic-tile,
  .price-switch-wrapper > .mosaic-grid-cell:has(.card-pricing) > .mosaic-tile > .mosaic-tile-content,
  .price-switch-wrapper .card-pricing,
  .price-switch-wrapper .card-pricing > .card-body {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }
  .price-switch-wrapper .card-pricing { height: auto !important; }
  .price-switch-wrapper .card-pricing [data-edit-target="price"] { align-self: start; }
  .price-switch-wrapper .card-pricing > .card-body > .btn { align-self: end; }
}

/* the section text right above a switch row ends without the text tile's
   own bottom padding - the pill keeps a 2rem distance */
.mosaic-grid-row:has(+ .price-switch-wrapper) .text-blocks > .row:last-child { padding-bottom: 2rem !important; }
.mosaic-grid-row:has(+ .price-switch-wrapper) .text-blocks .position-relative.mb-3 { margin-bottom: 0 !important; }

/* price switch: a segmented pill instead of two raw radios; the radios stay
   in the markup (price-switch.js listens to their change event) */
.mosaic-tile-content [data-bs-toggle="price"] {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  margin: 0 auto 2rem !important;
  padding: 0.25rem !important;
  background-color: var(--ar-body-bg);
  border: 1px solid var(--ar-border-color);
  border-radius: 50rem;
}
/* ms-0 on the switch tile (css_class) puts the pill under a left aligned header */
.mosaic-tile-content [data-bs-toggle="price"].ms-0 { margin-left: 0 !important; }
.mosaic-tile-content [data-bs-toggle="price"] .form-check,
.mosaic-tile-content [data-bs-toggle="price"] .form-check > .d-inline-flex {
  display: flex !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.mosaic-tile-content [data-bs-toggle="price"] .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.mosaic-tile-content [data-bs-toggle="price"] .form-check-label {
  padding: 0.5rem 1.25rem;
  border-radius: 50rem;
  color: var(--ar-heading-color) !important;
  font-weight: 600 !important;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
/* the active option is a control: blue like the buttons */
.mosaic-tile-content [data-bs-toggle="price"] .form-check-input:checked + .form-check-label {
  background-color: var(--ar-primary);
  color: #ffffff !important;
}
.mosaic-tile-content [data-bs-toggle="price"] .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--ar-primary);
  outline-offset: 2px;
}

/* listing filter: calm outline pills (hairline, dark text), the active one
   blue like the buttons - btn-outline-secondary would be stone on white here, since
   theme_secondary is the stone grey */
.masonry-filters .btn:not(.active) {
  background-color: transparent !important;
  border-color: var(--ar-border-color) !important;
  color: var(--ar-heading-color) !important;
}
.masonry-filters .btn:not(.active):hover { border-color: var(--ar-heading-color) !important; }
.masonry-filters .btn.active,
.masonry-filters .btn:active {
  background-color: var(--ar-primary) !important;
  border-color: var(--ar-primary) !important;
  color: #ffffff !important;
}

/* reference teasers: one picture format (3:2), whatever the upload */
img.zoom-effect-img:is(.scale-teaser, .scale-large, .scale-landscape) {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* embedded forms sit flush with their heading (the proxy wraps them in a
   transparent card with its own padding) */
.mosaic-booost\.tiles\.formproxy-tile .card.bg-transparent > .card-body {
  padding: 0 !important;
  margin-top: 0 !important;
}

/* page headers sit left on the phone too, like every other page title
   (form_proxy.pt hard-codes text-center text-lg-start on heading and teaser) */
.mosaic-booost\.tiles\.formproxy-tile :is(.tile-heading, .tile-teaser).text-center { text-align: left !important; }

/* footer: the static "booost" column spaced like the link lists beside it */
.portlet-static-booost .nav-link {
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
  font-weight: 400;
}

/* imprint and privacy: paper cards on the white page, like everywhere else */
:is(.template-impressum, .template-datenschutzerklaerung) #content-core > .card.bg-secondary {
  background-color: var(--ar-card-bg) !important;
}

/* ---- Feinschliff 2 2026-10-05 ---- */

/* comparison table (start page, html tile tiles/vergleich.html): the booost
   column is a calm stone column with a thin orange rule on its head - dark
   text, no blue. Bold stays "the stronger answer in the row" */
.booost-compare .booost-compare-us {
  --ar-table-bg: var(--ar-secondary-bg);
  background-color: var(--ar-secondary-bg);
}
.booost-compare thead .booost-compare-us {
  color: var(--ar-heading-color);
  box-shadow: inset 0 3px 0 var(--ar-warning);
}
/* on the phone every question becomes a block: the question as its title,
   the three answers below, each labelled (data-label) - no sideways scroll */
@media (max-width: 767.98px) {
  .booost-compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .booost-compare,
  .booost-compare tbody,
  .booost-compare tr,
  .booost-compare tbody th,
  .booost-compare td {
    display: block;
    width: 100%;
  }
  .booost-compare tbody tr {
    padding: 1.25rem 1.25rem 1rem;
    background-color: var(--ar-table-bg);
  }
  .booost-compare tbody th { padding: 0 0 0.75rem !important; }
  .booost-compare td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.5rem 0 !important;
  }
  .booost-compare td::before {
    content: attr(data-label);
    color: var(--ar-secondary-color);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
  }
  .booost-compare td.booost-compare-us {
    width: auto;
    margin: 0.25rem -0.75rem 0;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--ar-border-radius);
    box-shadow: none;
  }
  .booost-compare td.booost-compare-us::before {
    color: var(--ar-heading-color);
    font-weight: 600;
  }
}

/* last band to footer: the white footer reads as one more section, so its
   first line sits one section gap (~112px) below the last band, as between
   the bands above - not 160px (row mb-lg-4 + footer pt-lg-5 + container
   pt-3 mt-lg-3 + row pt-sm-2 in the footer template) */
@media (min-width: 992px) {
  #content > .mosaic-grid-row:last-child { margin-bottom: 0 !important; }
  footer.footer { padding-top: 3.5rem !important; }
  footer.footer > .container:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ---- Blau-Akzente 2026-10-05: blue surfaces with white glyphs ---- */

/* step numbers: white figures on blue discs (light and dark mode - white on
   #0075bf is 4.9:1); on hover a pale blue halo instead of the grey one */
.steps {
  --ar-steps-number-inner-bg: var(--ar-primary);
  --ar-steps-number-color: #ffffff;
  --ar-steps-active-number-inner-bg: var(--ar-primary);
  --ar-steps-active-number-color: #ffffff;
  --ar-steps-active-number-bg: rgba(var(--ar-primary-rgb), 0.15);
}

/* card icons: the glyph white on a blue rounded square, the corner radius of
   the app icon (~23 % of the side). The class comes from the
   booost.card_icon_css_class record, so every card view and card tile gets
   it; display:flex centres the glyph (its ::before becomes a flex item) */
.booost-icon-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8rem;
  background-color: var(--ar-primary);
  color: #ffffff; /* no !important: a card on a blue ground inverts the badge with bg-white text-primary */
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
}
.booost-icon-badge > svg { width: 1.625rem; height: 1.625rem; fill: currentColor; }

/* ---- Fixes 2026-10-05 abends ---- */

/* embedded forms follow the page in dark mode: form_proxy.pt pins the card
   to data-bs-theme="light" ("its own surface"), but here the card is
   transparent (css_class bg-transparent), so dark labels landed on the dark
   page. The card's parent hands the theme values of the surrounding scope
   (html toggle or a dark tile) down to the card - resolved there, so light
   stays light and dark becomes dark, whatever the nearest scope is */
.mosaic-booost\.tiles\.formproxy-tile :has(> .card.bg-transparent[data-bs-theme="light"]) {
  --booost-s-body-color: var(--ar-body-color);
  --booost-s-body-color-rgb: var(--ar-body-color-rgb);
  --booost-s-body-bg: var(--ar-body-bg);
  --booost-s-body-bg-rgb: var(--ar-body-bg-rgb);
  --booost-s-emphasis-color: var(--ar-emphasis-color);
  --booost-s-emphasis-color-rgb: var(--ar-emphasis-color-rgb);
  --booost-s-heading-color: var(--ar-heading-color);
  --booost-s-secondary-color: var(--ar-secondary-color);
  --booost-s-secondary-color-rgb: var(--ar-secondary-color-rgb);
  --booost-s-secondary-bg: var(--ar-secondary-bg);
  --booost-s-tertiary-color: var(--ar-tertiary-color);
  --booost-s-tertiary-bg: var(--ar-tertiary-bg);
  --booost-s-border-color: var(--ar-border-color);
  --booost-s-border-color-translucent: var(--ar-border-color-translucent);
  --booost-s-gray-400: var(--ar-gray-400);
  --booost-s-gray-500: var(--ar-gray-500);
  --booost-s-gray-600: var(--ar-gray-600);
  --booost-s-gray-700: var(--ar-gray-700);
  --booost-s-gray-800: var(--ar-gray-800);
  --booost-s-gray-900: var(--ar-gray-900);
  --booost-s-bs-body-color: var(--bs-body-color);
  --booost-s-bs-body-bg: var(--bs-body-bg);
  --booost-s-bs-secondary-color: var(--bs-secondary-color);
  --booost-s-bs-border-color: var(--bs-border-color);
  --booost-s-bs-emphasis-color: var(--bs-emphasis-color);
  --booost-s-bs-form-invalid-color: var(--bs-form-invalid-color);
}
.mosaic-booost\.tiles\.formproxy-tile .card.bg-transparent[data-bs-theme="light"] {
  --ar-body-color: var(--booost-s-body-color);
  --ar-body-color-rgb: var(--booost-s-body-color-rgb);
  --ar-body-bg: var(--booost-s-body-bg);
  --ar-body-bg-rgb: var(--booost-s-body-bg-rgb);
  --ar-emphasis-color: var(--booost-s-emphasis-color);
  --ar-emphasis-color-rgb: var(--booost-s-emphasis-color-rgb);
  --ar-heading-color: var(--booost-s-heading-color);
  --ar-secondary-color: var(--booost-s-secondary-color);
  --ar-secondary-color-rgb: var(--booost-s-secondary-color-rgb);
  --ar-secondary-bg: var(--booost-s-secondary-bg);
  --ar-tertiary-color: var(--booost-s-tertiary-color);
  --ar-tertiary-bg: var(--booost-s-tertiary-bg);
  --ar-border-color: var(--booost-s-border-color);
  --ar-border-color-translucent: var(--booost-s-border-color-translucent);
  --ar-gray-400: var(--booost-s-gray-400);
  --ar-gray-500: var(--booost-s-gray-500);
  --ar-gray-600: var(--booost-s-gray-600);
  --ar-gray-700: var(--booost-s-gray-700);
  --ar-gray-800: var(--booost-s-gray-800);
  --ar-gray-900: var(--booost-s-gray-900);
  --bs-body-color: var(--booost-s-bs-body-color);
  --bs-body-bg: var(--booost-s-bs-body-bg);
  --bs-secondary-color: var(--booost-s-bs-secondary-color);
  --bs-border-color: var(--booost-s-bs-border-color);
  --bs-emphasis-color: var(--booost-s-bs-emphasis-color);
  --bs-form-invalid-color: var(--booost-s-bs-form-invalid-color);
  color: var(--ar-body-color);
}

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; }