:root,
[data-bs-theme=light] {
  --ar-primary: #563321;
  --ar-primary-rgb: 86, 51, 33;
  --bs-primary: #563321;
  --bs-primary-rgb: 86, 51, 33;
  --ar-secondary: #edf1f5;
  --ar-secondary-rgb: 237, 241, 245;
  --bs-secondary: #edf1f5;
  --bs-secondary-rgb: 237, 241, 245;
  --ar-warning: #f7af33;
  --ar-warning-rgb: 247, 175, 51;
  --bs-warning: #f7af33;
  --bs-warning-rgb: 247, 175, 51;
  --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: #fdeac2;
  --ar-light-rgb: 253, 234, 194;
  --bs-light: #fdeac2;
  --bs-light-rgb: 253, 234, 194;
  --ar-dark: #121519;
  --ar-dark-rgb: 18, 21, 25;
  --bs-dark: #121519;
  --bs-dark-rgb: 18, 21, 25;
  --ar-link-color: #563321;
  --ar-link-hover-color: #3d1a08;
  --bs-link-color: #563321;
  --bs-link-color-rgb: 86, 51, 33;
  --bs-link-hover-color: #3d1a08;
  --ar-body-font-family: 'Noto Sans', sans-serif;
  --ar-heading-font-family: 'Noto Sans', sans-serif;
  --ar-root-font-size: 1rem;
  --ar-body-font-size: 1.25rem;
  --ar-border-width: 1px;
  --ar-border-radius: 0rem;
  --ar-border-radius-sm: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-lg: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-xl: calc(var(--ar-border-radius) * 0);
  --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: #000000;
  --bs-body-color: #000000;
  --ar-body-color-rgb: 0, 0, 0;
  --bs-body-color-rgb: 0, 0, 0;
  --ar-secondary-color: #858c97;
  --bs-secondary-color: #858c97;
  --ar-heading-color: #563321;
  --bs-heading-color: #563321;
  --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: #563321;
  --ar-btn-border-color: #563321;
  --ar-btn-hover-bg: #3d1a08;
  --ar-btn-hover-border-color: #3d1a08;
  --ar-btn-active-bg: #3d1a08;
  --ar-btn-active-border-color: #3d1a08;
  --ar-btn-disabled-bg: #563321;
  --ar-btn-disabled-border-color: #563321;
}
.btn-outline-primary {
  --ar-btn-color: #563321;
  --ar-btn-border-color: #563321;
  --ar-btn-hover-bg: #563321;
  --ar-btn-hover-border-color: #563321;
  --ar-btn-active-bg: #563321;
  --ar-btn-active-border-color: #563321;
  --ar-btn-disabled-color: #563321;
  --ar-btn-disabled-border-color: #563321;
}
.btn-secondary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #d4d8dc;
  --ar-btn-hover-border-color: #d4d8dc;
  --ar-btn-active-bg: #d4d8dc;
  --ar-btn-active-border-color: #d4d8dc;
  --ar-btn-disabled-bg: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-outline-secondary {
  --ar-btn-color: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #edf1f5;
  --ar-btn-hover-border-color: #edf1f5;
  --ar-btn-active-bg: #edf1f5;
  --ar-btn-active-border-color: #edf1f5;
  --ar-btn-disabled-color: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-warning {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #f7af33;
  --ar-btn-border-color: #f7af33;
  --ar-btn-hover-bg: #de961a;
  --ar-btn-hover-border-color: #de961a;
  --ar-btn-active-bg: #de961a;
  --ar-btn-active-border-color: #de961a;
  --ar-btn-disabled-bg: #f7af33;
  --ar-btn-disabled-border-color: #f7af33;
}
.btn-outline-warning {
  --ar-btn-color: #f7af33;
  --ar-btn-border-color: #f7af33;
  --ar-btn-hover-bg: #f7af33;
  --ar-btn-hover-border-color: #f7af33;
  --ar-btn-active-bg: #f7af33;
  --ar-btn-active-border-color: #f7af33;
  --ar-btn-disabled-color: #f7af33;
  --ar-btn-disabled-border-color: #f7af33;
}
.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: #fdeac2;
  --ar-btn-border-color: #fdeac2;
  --ar-btn-hover-bg: #e4d1a9;
  --ar-btn-hover-border-color: #e4d1a9;
  --ar-btn-active-bg: #e4d1a9;
  --ar-btn-active-border-color: #e4d1a9;
  --ar-btn-disabled-bg: #fdeac2;
  --ar-btn-disabled-border-color: #fdeac2;
}
.btn-outline-light {
  --ar-btn-color: #fdeac2;
  --ar-btn-border-color: #fdeac2;
  --ar-btn-hover-bg: #fdeac2;
  --ar-btn-hover-border-color: #fdeac2;
  --ar-btn-active-bg: #fdeac2;
  --ar-btn-active-border-color: #fdeac2;
  --ar-btn-disabled-color: #fdeac2;
  --ar-btn-disabled-border-color: #fdeac2;
}
.btn-dark {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #000000;
  --ar-btn-hover-border-color: #000000;
  --ar-btn-active-bg: #000000;
  --ar-btn-active-border-color: #000000;
  --ar-btn-disabled-bg: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.btn-outline-dark {
  --ar-btn-color: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #121519;
  --ar-btn-hover-border-color: #121519;
  --ar-btn-active-bg: #121519;
  --ar-btn-active-border-color: #121519;
  --ar-btn-disabled-color: #121519;
  --ar-btn-disabled-border-color: #121519;
}
[data-bs-theme=dark] {
  --ar-primary: #917a6f;
  --ar-primary-rgb: 145, 122, 111;
  --bs-primary: #917a6f;
  --bs-primary-rgb: 145, 122, 111;
  --ar-link-color: #917a6f;
  --ar-link-color-rgb: 145, 122, 111;
  --ar-link-hover-color: #786156;
  --ar-link-hover-color-rgb: 120, 97, 86;
  --bs-link-color: #917a6f;
  --bs-link-color-rgb: 145, 122, 111;
  --bs-link-hover-color: #786156;
}
[data-bs-theme=dark] .btn-primary {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #917a6f;
  --ar-btn-border-color: #917a6f;
  --ar-btn-hover-bg: #786156;
  --ar-btn-hover-border-color: #786156;
  --ar-btn-active-bg: #786156;
  --ar-btn-active-border-color: #786156;
  --ar-btn-disabled-bg: #917a6f;
  --ar-btn-disabled-border-color: #917a6f;
}
[data-bs-theme=dark] .btn-outline-primary {
  --ar-btn-color: #917a6f;
  --ar-btn-border-color: #917a6f;
  --ar-btn-hover-bg: #917a6f;
  --ar-btn-hover-border-color: #917a6f;
  --ar-btn-active-bg: #917a6f;
  --ar-btn-active-border-color: #917a6f;
  --ar-btn-disabled-color: #917a6f;
  --ar-btn-disabled-border-color: #917a6f;
}
[data-bs-theme=dark] .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='%23917a6f'%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");
}
[data-bs-theme=dark] .bg-primary,
[data-bs-theme=dark].bg-primary,
[data-bs-theme=dark] .text-bg-primary,
[data-bs-theme=dark].text-bg-primary {
  background-color: rgba(86, 51, 33, var(--ar-bg-opacity, 1)) !important;
}
.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='%23563321'%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.theme_custom_css for groebl-abhof (Phase C, via @registry).
   Only what utility classes and registry records cannot do.
   Brown #563321 = theme_primary, orange #f7af33 = theme_warning,
   cream #fdeac2 = theme_light (footer bg-light). Check every rule in light
   AND dark mode in Phase C.
   2026-10-14 Farbabgleich: light mode carries the old site's colours
   exactly (maintainer decision, accessibility is not a constraint). */

/* Unser Angebot: legacy pi-tabs-vertical - brown buttons, the active one
   orange, white bold label. Same in both modes (the bars carry their own
   colour, the label stays white). */
.gr-tabs .nav-pills .nav-link {
  background-color: var(--ar-primary);
  color: #fff;
  border-radius: 0;
}
.gr-tabs .nav-pills .nav-link:hover,
.gr-tabs .nav-pills .nav-link:focus-visible,
.gr-tabs .nav-pills .nav-link.active {
  background-color: var(--ar-warning);
  color: #fff;
}
/* legacy separators inside the tab texts (Produkte, Auszeichnungen) */
.gr-tabs .tab-content hr {
  border-top: 1px dashed var(--ar-warning);
  opacity: 1;
}

/* Header navigation: brown bold links like live. Light mode only - in dark
   mode the theme's light nav colour stays. */
[data-bs-theme=light] .navbar-nav .nav-link {
  color: var(--ar-primary);
  font-weight: 700;
}

/* Ähre (inline SVG in "Ab Hof"): brown stem, cream in dark mode. */
.gr-symbol .gr-ink { fill: #563321; }
[data-bs-theme=dark] .gr-symbol .gr-ink { fill: #fdeac2; }

/* "Familientradition seit 1990": brown on the light orange photo in both
   modes (the photo stays light, so the title must not turn white). */
.gr-band-title { color: #563321 !important; }

/* Colophon: legacy full-width orange bar. The colophon sits inside the
   footer container, so the colour is spread to the viewport edges with a
   box-shadow + clip-path (no pseudo element: row-bleed's ::before at
   z-index -1 would land behind the footer's own background). Text white
   bold on orange like live (Farbabgleich 2026-10-14: colours identical to
   the old site, contrast is not a constraint), in both modes. */
#ui-colophon {
  background-color: var(--ar-warning);
  box-shadow: 0 0 0 100vmax var(--ar-warning);
  clip-path: inset(0 -100vmax);
  color: #fff;
  font-weight: 700;
}
#ui-colophon * { color: #fff !important; font-weight: 700 !important; }
/* the booost sponsor logo turns white like the text (light logo is black,
   dark-mode logo is white already) */
#ui-colophon img { filter: brightness(0) invert(1); }

/* Links: orange like live (#f7af33, hover #ee9a09, the legacy theme's
   ".pi-section-white a"), in both modes. The customizer writes the primary
   (brown) into --ar-link-color; this sheet loads after it and wins. Dark
   mode keeps cream as hover. */
:root,
[data-bs-theme=light] {
  --ar-link-color: #f7af33;
  --ar-link-color-rgb: 247, 175, 51;
  --ar-link-hover-color: #ee9a09;
  --ar-link-hover-color-rgb: 238, 154, 9;
  --bs-link-color: #f7af33;
  --bs-link-color-rgb: 247, 175, 51;
  --bs-link-hover-color: #ee9a09;
  --bs-link-hover-color-rgb: 238, 154, 9;
}
[data-bs-theme=dark] {
  --ar-link-color: #f7af33;
  --ar-link-color-rgb: 247, 175, 51;
  --ar-link-hover-color: #fdeac2;
  --ar-link-hover-color-rgb: 253, 234, 194;
  --bs-link-color: #f7af33;
  --bs-link-color-rgb: 247, 175, 51;
  --bs-link-hover-color: #fdeac2;
  --bs-link-hover-color-rgb: 253, 234, 194;
}

/* Links without underline, underlined on hover (legacy "a" rule). */
.mosaic-tile-content a:not(.btn):not(.nav-link),
#footer .card-body a { text-decoration: none; }
.mosaic-tile-content a:not(.btn):not(.nav-link):hover,
#footer .card-body a:hover { text-decoration: underline; }

/* Header: orange top bar 8px like live (border-5 is the largest utility). */
#header.border-top { border-top-width: 8px !important; }

/* Menu hover: brown text stays, a 3px orange underline appears (legacy
   pi-has-hover-border); no underline on the active item, like live. */
.navbar-onepage .nav-link > span { padding-bottom: 4px; }
.navbar-onepage .nav-link:hover > span,
.navbar-onepage .nav-link:focus-visible > span { box-shadow: inset 0 -3px 0 var(--ar-warning); }

/* Mobile menu (below lg) like live: dark panel #21252b over the full
   width, light grey links #c6ccd0, toggler as a light grey button. Light
   mode only - dark mode keeps the theme's menu. */
@media (max-width: 991.98px) {
  [data-bs-theme=light] #navbarNav {
    background-color: #21252b;
    box-shadow: 0 0 0 100vmax #21252b;
    clip-path: inset(0 -100vmax);
    margin-top: .5rem;
  }
  [data-bs-theme=light] #navbarNav .navbar-nav .nav-link,
  [data-bs-theme=light] #navbarNav .navbar-nav .nav-link > span { color: #c6ccd0; font-weight: 500; }
  [data-bs-theme=light] #navbarNav .navbar-nav .nav-link:hover > span { color: #fff; }
  [data-bs-theme=light] #header .navbar-toggler {
    background-color: #f4f6f6;
    border: 1px solid #e3e9e9;
    color: #586266;
    padding: .375rem .5rem;
  }
}

/* Bold text in the content: the legacy theme's dark ink #21252b
   (".pi-section-white strong"). Light mode only. */
[data-bs-theme=light] .mosaic-tile-content strong { color: #21252b; }

/* Footer (cream band): text and names brown, column titles orange (legacy
   h6), links and the contact lines orange. Light mode only - dark mode
   keeps the theme's footer colours. */
[data-bs-theme=light] #footer .card-body,
[data-bs-theme=light] #footer .card-body p,
[data-bs-theme=light] #footer .card-body strong { color: #563321; }
[data-bs-theme=light] #footer h2.h6 { color: #f7af33; }
[data-bs-theme=light] #footer .card-body a,
[data-bs-theme=light] #footer .card-body .nav-link { color: var(--ar-link-color); }
[data-bs-theme=light] #footer .card-body a:hover,
[data-bs-theme=light] #footer .card-body .nav-link:hover { color: var(--ar-link-hover-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; }