:root,
[data-bs-theme=light] {
  --ar-primary: #005599;
  --ar-primary-rgb: 0, 85, 153;
  --bs-primary: #005599;
  --bs-primary-rgb: 0, 85, 153;
  --ar-secondary: #edf1f5;
  --ar-secondary-rgb: 237, 241, 245;
  --bs-secondary: #edf1f5;
  --bs-secondary-rgb: 237, 241, 245;
  --ar-warning: #edcb50;
  --ar-warning-rgb: 237, 203, 80;
  --bs-warning: #edcb50;
  --bs-warning-rgb: 237, 203, 80;
  --ar-info: #660c6e;
  --ar-info-rgb: 102, 12, 110;
  --bs-info: #660c6e;
  --bs-info-rgb: 102, 12, 110;
  --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: #1c1d1f;
  --ar-dark-rgb: 28, 29, 31;
  --bs-dark: #1c1d1f;
  --bs-dark-rgb: 28, 29, 31;
  --ar-link-color: #005599;
  --ar-link-hover-color: #003c80;
  --bs-link-color: #005599;
  --bs-link-color-rgb: 0, 85, 153;
  --bs-link-hover-color: #003c80;
  --ar-body-font-family: 'Alice', serif;
  --ar-heading-font-family: 'Alice', serif;
  --ar-root-font-size: 1rem;
  --ar-body-font-size: 1rem;
  --ar-border-width: 1px;
  --ar-border-radius: 0rem;
  --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: #005599;
  --ar-btn-border-color: #005599;
  --ar-btn-hover-bg: #003c80;
  --ar-btn-hover-border-color: #003c80;
  --ar-btn-active-bg: #003c80;
  --ar-btn-active-border-color: #003c80;
  --ar-btn-disabled-bg: #005599;
  --ar-btn-disabled-border-color: #005599;
}
.btn-outline-primary {
  --ar-btn-color: #005599;
  --ar-btn-border-color: #005599;
  --ar-btn-hover-bg: #005599;
  --ar-btn-hover-border-color: #005599;
  --ar-btn-active-bg: #005599;
  --ar-btn-active-border-color: #005599;
  --ar-btn-disabled-color: #005599;
  --ar-btn-disabled-border-color: #005599;
}
.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: #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: #660c6e;
  --ar-btn-border-color: #660c6e;
  --ar-btn-hover-bg: #4d0055;
  --ar-btn-hover-border-color: #4d0055;
  --ar-btn-active-bg: #4d0055;
  --ar-btn-active-border-color: #4d0055;
  --ar-btn-disabled-bg: #660c6e;
  --ar-btn-disabled-border-color: #660c6e;
}
.btn-outline-info {
  --ar-btn-color: #660c6e;
  --ar-btn-border-color: #660c6e;
  --ar-btn-hover-bg: #660c6e;
  --ar-btn-hover-border-color: #660c6e;
  --ar-btn-active-bg: #660c6e;
  --ar-btn-active-border-color: #660c6e;
  --ar-btn-disabled-color: #660c6e;
  --ar-btn-disabled-border-color: #660c6e;
}
.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: #1c1d1f;
  --ar-btn-border-color: #1c1d1f;
  --ar-btn-hover-bg: #030406;
  --ar-btn-hover-border-color: #030406;
  --ar-btn-active-bg: #030406;
  --ar-btn-active-border-color: #030406;
  --ar-btn-disabled-bg: #1c1d1f;
  --ar-btn-disabled-border-color: #1c1d1f;
}
.btn-outline-dark {
  --ar-btn-color: #1c1d1f;
  --ar-btn-border-color: #1c1d1f;
  --ar-btn-hover-bg: #1c1d1f;
  --ar-btn-hover-border-color: #1c1d1f;
  --ar-btn-active-bg: #1c1d1f;
  --ar-btn-active-border-color: #1c1d1f;
  --ar-btn-disabled-color: #1c1d1f;
  --ar-btn-disabled-border-color: #1c1d1f;
}
.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='%23005599'%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");
}
/* zackenzilli - booost.theme_custom_css (Farbabgleich 2026-10-14: colours identical to the live site)
 *
 * Only what classes and registry values cannot do. Everything else is in the
 * intake (colours, Alice, dark mode) and in the page spec (bands via
 * row-bleed + bg-primary / bg-dark / bg-info).
 *
 * 1. Diagonal band edges of the legacy cloud19 theme (c19-triangle-*):
 *    a band row cuts its top and/or bottom edge diagonally. The row and its
 *    full-bleed ::before (row-bleed) are clipped together; polygon points
 *    outside the row box reach the viewport edges. The page background
 *    (dark, #1c1d1f) shows through the cut-off triangle, as on the live site.
 *    CODE-WUNSCH: section dividers as a row option in booost.
 */
:root {
  --zz-slant: 4vw;
}
.zz-slant-top,
.zz-slant-bottom {
  --zz-top: 0px;
  --zz-bottom: 0px;
  clip-path: polygon(
    -50vw var(--zz-top),
    calc(100% + 50vw) 0,
    calc(100% + 50vw) 100%,
    -50vw calc(100% - var(--zz-bottom))
  );
}
.zz-slant-top {
  --zz-top: var(--zz-slant);
  padding-top: calc(3rem + var(--zz-slant)) !important;
}
.zz-slant-bottom {
  --zz-bottom: var(--zz-slant);
  padding-bottom: calc(3rem + var(--zz-slant)) !important;
}

/* 2. Decorative logo band like live (cloud19 "moving multiple SVG" canvas):
 *    five logos in five sizes drift left to right through the band and come
 *    back in on the left; the bigger the logo, the faster (live: speed =
 *    width / 50 per frame). Negative delays spread them out from the start.
 *    Visitors who prefer reduced motion get the logos standing still. */
.zz-logo-band {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
}
.zz-logo-band img {
  position: absolute;
  left: 0;
  height: auto;
  margin: 0 !important;
  animation: zz-drift linear infinite;
  will-change: transform;
}
.zz-logo-band img:nth-child(1) { top: 30%; animation-duration: 34s; animation-delay: -4s; }
.zz-logo-band img:nth-child(2) { top: 18%; animation-duration: 19s; animation-delay: -15s; }
.zz-logo-band img:nth-child(3) { top: 45%; animation-duration: 46s; animation-delay: -30s; }
.zz-logo-band img:nth-child(4) { top: 25%; animation-duration: 23s; animation-delay: -8s; }
.zz-logo-band img:nth-child(5) { top: 40%; animation-duration: 38s; animation-delay: -27s; }
@keyframes zz-drift {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}
@media (prefers-reduced-motion: reduce) {
  .zz-logo-band img { animation: none; }
  .zz-logo-band img:nth-child(1) { left: 8%; }
  .zz-logo-band img:nth-child(2) { left: 28%; }
  .zz-logo-band img:nth-child(3) { left: 52%; }
  .zz-logo-band img:nth-child(4) { left: 66%; }
  .zz-logo-band img:nth-child(5) { left: 86%; }
}

/* 3. Dark mode page background = the legacy anthracite (#1c1d1f, theme_dark),
 *    so dark bands and page merge as on the live site and the diagonal cuts
 *    show the same colour. Light mode untouched. No registry record for the
 *    dark body background. */
[data-bs-theme="dark"] {
  --ar-body-bg: #1c1d1f;
  --ar-body-bg-rgb: 28, 29, 31;
}

/* 4. Live colours (Farbabgleich 2026-10-14, maintainer: identical colours,
 *    accessibility not a constraint). Values from the legacy cloud19 theme:
 *    pi-section-base (blue #005599): text #eee, headings + links #fff, hover #eee
 *    pi-section-dark (#1c1d1f):      text #999, headings #fff, links #005599, hover #003966
 *    pi-section-special (#660c6e):   text #4d4d4d, headings #fff
 *    The dark rules sit on [data-bs-theme="dark"] (the site is dark_mode_site,
 *    the page body is the legacy dark section); band rules are scoped to the
 *    band rows and their dark-mode tiles, so they hold in light mode too.
 *    Light mode keeps the booost defaults outside the bands. */
[data-bs-theme="dark"] {
  --ar-body-color: #999;
  --ar-body-color-rgb: 153, 153, 153;
  --ar-secondary-color: #999;
  --ar-heading-color: #fff;
  --ar-link-color: #005599;
  --ar-link-color-rgb: 0, 85, 153;
  --ar-link-hover-color: #003966;
  --ar-link-hover-color-rgb: 0, 57, 102;
  --ar-heading-link-color: #fff;
  --ar-heading-link-hover-color: #eee;
}
.row-bleed.bg-dark,
.row-bleed.bg-dark [data-bs-theme] {
  --ar-body-color: #999;
  --ar-body-color-rgb: 153, 153, 153;
  --ar-secondary-color: #999;
  --ar-heading-color: #fff;
  --ar-link-color-rgb: 0, 85, 153;
  --ar-link-hover-color-rgb: 0, 57, 102;
  color: #999;
}
.row-bleed.bg-primary,
.row-bleed.bg-primary [data-bs-theme] {
  --ar-body-color: #eee;
  --ar-body-color-rgb: 238, 238, 238;
  --ar-secondary-color: #eee;
  --ar-heading-color: #fff;
  --ar-link-color-rgb: 255, 255, 255;
  --ar-link-hover-color-rgb: 238, 238, 238;
  --ar-heading-link-color: #fff;
  --ar-heading-link-hover-color: #eee;
  color: #eee;
}
.row-bleed.bg-info,
.row-bleed.bg-info [data-bs-theme] {
  --ar-body-color: #4d4d4d;
  --ar-body-color-rgb: 77, 77, 77;
  --ar-heading-color: #fff;
  color: #4d4d4d;
}
.row-bleed :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}
/* testimonial slider: quote and position #999, name white (h5 live) */
.row-bleed.bg-dark .swiper .swiper-slide p.text-dark,
.row-bleed.bg-dark .binded-item .text-body-secondary {
  color: #999 !important;
}
/* Termine teaser lines are h4.pi-text-white live */
.row-bleed.bg-info .tile-teaser.text-body {
  color: #fff !important;
}
/* links on blue: white, hover #eee (card titles are a.text-nav) */
.row-bleed.bg-primary a:not(.btn),
.row-bleed.bg-primary a.text-nav {
  color: #fff !important;
}
.row-bleed.bg-primary a:not(.btn):hover,
.row-bleed.bg-primary a.text-nav:hover {
  color: #eee !important;
}
/* fire quote band (pi-text-white-for-dark): #dbe6e7, no overlay */
.zz-quote-band,
.zz-quote-band :is(h2, p) {
  color: #dbe6e7 !important;
}

/* header bar = pi-section-dark: white links, hover + active #005599 */
#header {
  --ar-navbar-color: #fff;
  --ar-navbar-hover-color: #005599;
  --ar-navbar-active-color: #005599;
  --ar-navbar-stuck-bg: #1c1d1f;
}

/* buttons: btn-secondary = pi-btn-dark, btn-light = pi-btn-white.
 * !important: the theme sets the dark-mode button colours with !important. */
.btn.btn-secondary,
[data-bs-theme] .btn.btn-secondary {
  --ar-btn-color: #c9d1d6 !important;
  --ar-btn-bg: #2d323a !important;
  --ar-btn-border-color: #24282e !important;
  --ar-btn-hover-color: #e505ef !important;
  --ar-btn-hover-bg: #384147 !important;
  --ar-btn-hover-border-color: #32383f !important;
  --ar-btn-active-color: #e505ef !important;
  --ar-btn-active-bg: #384147 !important;
  --ar-btn-active-border-color: #32383f !important;
}
.btn.btn-light,
[data-bs-theme] .btn.btn-light {
  --ar-btn-color: #586266 !important;
  --ar-btn-bg: #f4f6f6 !important;
  --ar-btn-border-color: #e3e9e9 !important;
  --ar-btn-hover-color: #fff !important;
  --ar-btn-hover-bg: #a5b3b4 !important;
  --ar-btn-hover-border-color: #9eadae !important;
  --ar-btn-active-color: #fff !important;
  --ar-btn-active-bg: #a5b3b4 !important;
  --ar-btn-active-border-color: #9eadae !important;
}
/* Programmothek filter (isotope buttons on blue): #003966 / border #002a4c,
 * hover #002a4c, active white with #2d323a text */
.row-bleed.bg-primary .btn.btn-secondary[data-group] {
  --ar-btn-color: #fff !important;
  --ar-btn-bg: #003966 !important;
  --ar-btn-border-color: #002a4c !important;
  --ar-btn-hover-color: #fff !important;
  --ar-btn-hover-bg: #002a4c !important;
  --ar-btn-hover-border-color: #002a4c !important;
  --ar-btn-active-color: #2d323a !important;
  --ar-btn-active-bg: #fff !important;
  --ar-btn-active-border-color: #fff !important;
  border-color: var(--ar-btn-border-color) !important;
}
.row-bleed.bg-primary .btn.btn-secondary[data-group].active {
  border-color: #fff !important;
}

/* breadcrumbs on the detail pages: links #005599, current #858d91 */
.breadcrumb .breadcrumb-item a {
  color: #005599 !important;
}
.breadcrumb .breadcrumb-item.active {
  color: #858d91 !important;
}

/* footer + colophon = pi-section-dark, colophon links #bfc8cd */
#footer {
  --ar-body-color: #999;
  --ar-link-color-rgb: 191, 200, 205;
  --ar-link-hover-color-rgb: 255, 255, 255;
  --ar-nav-link-color: #bfc8cd;
  --ar-nav-link-hover-color: #fff;
  color: #999;
}
#footer .nav-link {
  color: #bfc8cd;
}
/* zackenzilli - booost.theme_custom_css (Farbabgleich 2026-10-14: colours identical to the live site)
 *
 * Only what classes and registry values cannot do. Everything else is in the
 * intake (colours, Alice, dark mode) and in the page spec (bands via
 * row-bleed + bg-primary / bg-dark / bg-info).
 *
 * 1. Diagonal band edges of the legacy cloud19 theme (c19-triangle-*):
 *    a band row cuts its top and/or bottom edge diagonally. The row and its
 *    full-bleed ::before (row-bleed) are clipped together; polygon points
 *    outside the row box reach the viewport edges. The page background
 *    (dark, #1c1d1f) shows through the cut-off triangle, as on the live site.
 *    CODE-WUNSCH: section dividers as a row option in booost.
 */
:root {
  --zz-slant: 4vw;
}
.zz-slant-top,
.zz-slant-bottom {
  --zz-top: 0px;
  --zz-bottom: 0px;
  clip-path: polygon(
    -50vw var(--zz-top),
    calc(100% + 50vw) 0,
    calc(100% + 50vw) 100%,
    -50vw calc(100% - var(--zz-bottom))
  );
}
.zz-slant-top {
  --zz-top: var(--zz-slant);
  padding-top: calc(3rem + var(--zz-slant)) !important;
}
.zz-slant-bottom {
  --zz-bottom: var(--zz-slant);
  padding-bottom: calc(3rem + var(--zz-slant)) !important;
}

/* 2. Decorative logo band like live (cloud19 "moving multiple SVG" canvas):
 *    five logos in five sizes drift left to right through the band and come
 *    back in on the left; the bigger the logo, the faster (live: speed =
 *    width / 50 per frame). Negative delays spread them out from the start.
 *    Visitors who prefer reduced motion get the logos standing still. */
.zz-logo-band {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
}
.zz-logo-band img {
  position: absolute;
  left: 0;
  height: auto;
  margin: 0 !important;
  animation: zz-drift linear infinite;
  will-change: transform;
}
.zz-logo-band img:nth-child(1) { top: 30%; animation-duration: 34s; animation-delay: -4s; }
.zz-logo-band img:nth-child(2) { top: 18%; animation-duration: 19s; animation-delay: -15s; }
.zz-logo-band img:nth-child(3) { top: 45%; animation-duration: 46s; animation-delay: -30s; }
.zz-logo-band img:nth-child(4) { top: 25%; animation-duration: 23s; animation-delay: -8s; }
.zz-logo-band img:nth-child(5) { top: 40%; animation-duration: 38s; animation-delay: -27s; }
@keyframes zz-drift {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}
@media (prefers-reduced-motion: reduce) {
  .zz-logo-band img { animation: none; }
  .zz-logo-band img:nth-child(1) { left: 8%; }
  .zz-logo-band img:nth-child(2) { left: 28%; }
  .zz-logo-band img:nth-child(3) { left: 52%; }
  .zz-logo-band img:nth-child(4) { left: 66%; }
  .zz-logo-band img:nth-child(5) { left: 86%; }
}

/* 3. Dark mode page background = the legacy anthracite (#1c1d1f, theme_dark),
 *    so dark bands and page merge as on the live site and the diagonal cuts
 *    show the same colour. Light mode untouched. No registry record for the
 *    dark body background. */
[data-bs-theme="dark"] {
  --ar-body-bg: #1c1d1f;
  --ar-body-bg-rgb: 28, 29, 31;
}

/* 4. Live colours (Farbabgleich 2026-10-14, maintainer: identical colours,
 *    accessibility not a constraint). Values from the legacy cloud19 theme:
 *    pi-section-base (blue #005599): text #eee, headings + links #fff, hover #eee
 *    pi-section-dark (#1c1d1f):      text #999, headings #fff, links #005599, hover #003966
 *    pi-section-special (#660c6e):   text #4d4d4d, headings #fff
 *    The dark rules sit on [data-bs-theme="dark"] (the site is dark_mode_site,
 *    the page body is the legacy dark section); band rules are scoped to the
 *    band rows and their dark-mode tiles, so they hold in light mode too.
 *    Light mode keeps the booost defaults outside the bands. */
[data-bs-theme="dark"] {
  --ar-body-color: #999;
  --ar-body-color-rgb: 153, 153, 153;
  --ar-secondary-color: #999;
  --ar-heading-color: #fff;
  --ar-link-color: #005599;
  --ar-link-color-rgb: 0, 85, 153;
  --ar-link-hover-color: #003966;
  --ar-link-hover-color-rgb: 0, 57, 102;
  --ar-heading-link-color: #fff;
  --ar-heading-link-hover-color: #eee;
}
.row-bleed.bg-dark,
.row-bleed.bg-dark [data-bs-theme] {
  --ar-body-color: #999;
  --ar-body-color-rgb: 153, 153, 153;
  --ar-secondary-color: #999;
  --ar-heading-color: #fff;
  --ar-link-color-rgb: 0, 85, 153;
  --ar-link-hover-color-rgb: 0, 57, 102;
  color: #999;
}
.row-bleed.bg-primary,
.row-bleed.bg-primary [data-bs-theme] {
  --ar-body-color: #eee;
  --ar-body-color-rgb: 238, 238, 238;
  --ar-secondary-color: #eee;
  --ar-heading-color: #fff;
  --ar-link-color-rgb: 255, 255, 255;
  --ar-link-hover-color-rgb: 238, 238, 238;
  --ar-heading-link-color: #fff;
  --ar-heading-link-hover-color: #eee;
  color: #eee;
}
.row-bleed.bg-info,
.row-bleed.bg-info [data-bs-theme] {
  --ar-body-color: #4d4d4d;
  --ar-body-color-rgb: 77, 77, 77;
  --ar-heading-color: #fff;
  color: #4d4d4d;
}
.row-bleed :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}
/* testimonial slider: quote and position #999, name white (h5 live) */
.row-bleed.bg-dark .swiper .swiper-slide p.text-dark,
.row-bleed.bg-dark .binded-item .text-body-secondary {
  color: #999 !important;
}
/* Termine teaser lines are h4.pi-text-white live */
.row-bleed.bg-info .tile-teaser.text-body {
  color: #fff !important;
}
/* links on blue: white, hover #eee (card titles are a.text-nav) */
.row-bleed.bg-primary a:not(.btn),
.row-bleed.bg-primary a.text-nav {
  color: #fff !important;
}
.row-bleed.bg-primary a:not(.btn):hover,
.row-bleed.bg-primary a.text-nav:hover {
  color: #eee !important;
}
/* fire quote band (pi-text-white-for-dark): #dbe6e7, no overlay */
.zz-quote-band,
.zz-quote-band :is(h2, p) {
  color: #dbe6e7 !important;
}

/* header bar = pi-section-dark: white links, hover + active #005599 */
#header {
  --ar-navbar-color: #fff;
  --ar-navbar-hover-color: #005599;
  --ar-navbar-active-color: #005599;
  --ar-navbar-stuck-bg: #1c1d1f;
}

/* buttons: btn-secondary = pi-btn-dark, btn-light = pi-btn-white.
 * !important: the theme sets the dark-mode button colours with !important. */
.btn.btn-secondary,
[data-bs-theme] .btn.btn-secondary {
  --ar-btn-color: #c9d1d6 !important;
  --ar-btn-bg: #2d323a !important;
  --ar-btn-border-color: #24282e !important;
  --ar-btn-hover-color: #e505ef !important;
  --ar-btn-hover-bg: #384147 !important;
  --ar-btn-hover-border-color: #32383f !important;
  --ar-btn-active-color: #e505ef !important;
  --ar-btn-active-bg: #384147 !important;
  --ar-btn-active-border-color: #32383f !important;
}
.btn.btn-light,
[data-bs-theme] .btn.btn-light {
  --ar-btn-color: #586266 !important;
  --ar-btn-bg: #f4f6f6 !important;
  --ar-btn-border-color: #e3e9e9 !important;
  --ar-btn-hover-color: #fff !important;
  --ar-btn-hover-bg: #a5b3b4 !important;
  --ar-btn-hover-border-color: #9eadae !important;
  --ar-btn-active-color: #fff !important;
  --ar-btn-active-bg: #a5b3b4 !important;
  --ar-btn-active-border-color: #9eadae !important;
}
/* Programmothek filter (isotope buttons on blue): #003966 / border #002a4c,
 * hover #002a4c, active white with #2d323a text */
.row-bleed.bg-primary .btn.btn-secondary[data-group] {
  --ar-btn-color: #fff !important;
  --ar-btn-bg: #003966 !important;
  --ar-btn-border-color: #002a4c !important;
  --ar-btn-hover-color: #fff !important;
  --ar-btn-hover-bg: #002a4c !important;
  --ar-btn-hover-border-color: #002a4c !important;
  --ar-btn-active-color: #2d323a !important;
  --ar-btn-active-bg: #fff !important;
  --ar-btn-active-border-color: #fff !important;
  border-color: var(--ar-btn-border-color) !important;
}
.row-bleed.bg-primary .btn.btn-secondary[data-group].active {
  border-color: #fff !important;
}

/* breadcrumbs on the detail pages: links #005599, current #858d91 */
.breadcrumb .breadcrumb-item a {
  color: #005599 !important;
}
.breadcrumb .breadcrumb-item.active {
  color: #858d91 !important;
}

/* footer + colophon = pi-section-dark, colophon links #bfc8cd */
#footer {
  --ar-body-color: #999;
  --ar-link-color-rgb: 191, 200, 205;
  --ar-link-hover-color-rgb: 255, 255, 255;
  --ar-nav-link-color: #bfc8cd;
  --ar-nav-link-hover-color: #fff;
  color: #999;
}
#footer .nav-link {
  color: #bfc8cd;
}


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