:root,
[data-bs-theme=light] {
  --ar-primary: #bfbfbf;
  --ar-primary-rgb: 191, 191, 191;
  --bs-primary: #bfbfbf;
  --bs-primary-rgb: 191, 191, 191;
  --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: #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: #21252b;
  --ar-dark-rgb: 33, 37, 43;
  --bs-dark: #21252b;
  --bs-dark-rgb: 33, 37, 43;
  --ar-link-color: #bfbfbf;
  --ar-link-hover-color: #a6a6a6;
  --bs-link-color: #bfbfbf;
  --bs-link-color-rgb: 191, 191, 191;
  --bs-link-hover-color: #a6a6a6;
  --ar-body-font-family: 'Roboto', sans-serif;
  --ar-heading-font-family: 'Questrial', sans-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: #666e70;
  --bs-body-color: #666e70;
  --ar-body-color-rgb: 102, 110, 112;
  --bs-body-color-rgb: 102, 110, 112;
  --ar-secondary-color: #858c97;
  --bs-secondary-color: #858c97;
  --ar-heading-color: #21252b;
  --bs-heading-color: #21252b;
  --ar-border-color: #e3e9ef;
  --bs-border-color: #e3e9ef;
}
[data-bs-theme=light] .card {
  --ar-card-bg: #ffffff;
}
.btn-primary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #bfbfbf;
  --ar-btn-border-color: #bfbfbf;
  --ar-btn-hover-bg: #a6a6a6;
  --ar-btn-hover-border-color: #a6a6a6;
  --ar-btn-active-bg: #a6a6a6;
  --ar-btn-active-border-color: #a6a6a6;
  --ar-btn-disabled-bg: #bfbfbf;
  --ar-btn-disabled-border-color: #bfbfbf;
}
.btn-outline-primary {
  --ar-btn-color: #bfbfbf;
  --ar-btn-border-color: #bfbfbf;
  --ar-btn-hover-bg: #bfbfbf;
  --ar-btn-hover-border-color: #bfbfbf;
  --ar-btn-active-bg: #bfbfbf;
  --ar-btn-active-border-color: #bfbfbf;
  --ar-btn-disabled-color: #bfbfbf;
  --ar-btn-disabled-border-color: #bfbfbf;
}
.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: #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: #21252b;
  --ar-btn-border-color: #21252b;
  --ar-btn-hover-bg: #080c12;
  --ar-btn-hover-border-color: #080c12;
  --ar-btn-active-bg: #080c12;
  --ar-btn-active-border-color: #080c12;
  --ar-btn-disabled-bg: #21252b;
  --ar-btn-disabled-border-color: #21252b;
}
.btn-outline-dark {
  --ar-btn-color: #21252b;
  --ar-btn-border-color: #21252b;
  --ar-btn-hover-bg: #21252b;
  --ar-btn-hover-border-color: #21252b;
  --ar-btn-active-bg: #21252b;
  --ar-btn-active-border-color: #21252b;
  --ar-btn-disabled-color: #21252b;
  --ar-btn-disabled-border-color: #21252b;
}
.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='%23bfbfbf'%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");
}
/* Les Vario Mundi — Entwurf booost.theme_custom_css (Phase C, PATCH @booost-intake).
   Klassen kommen aus specs/pages/startseite/spec.json. Farben seit 2026-10-14 identisch
   mit dem alten Auftritt (Maintainer-Entscheidung, Barrierefreiheit kein Kriterium):
   Basisfarbe #bfbfbf = theme_primary, Violett #9123c4 nur noch als Band (.lvm-violet).
   Reine Light-Mode-Werte stehen unter :root:not([data-bs-theme=dark]). */

/* Links wie live: #bfbfbf, Hover #a6a6a6 (base color / base color -10 % des cloud19-Themes) */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --ar-link-hover-color: #a6a6a6;
  --bs-link-hover-color: #a6a6a6;
}
[data-bs-theme=dark] {
  --ar-link-color: #bfbfbf;
  --bs-link-color: #bfbfbf;
}

/* Graue Bänder (Intro, Referenzen) wie live #eee */
:root:not([data-bs-theme=dark]),
:root:not([data-bs-theme=dark]) [data-bs-theme=light] {
  --ar-tertiary-bg: #eeeeee;
  --ar-tertiary-bg-rgb: 238, 238, 238;
}

/* Dark Mode: das Theme setzt dort --ar-tertiary-bg-rgb auf 255,255,255 bei Deckkraft 1,
   bg-body-tertiary würde weiß mit weißer Schrift (CODE-WUNSCH). Hier: dunkles Grau #21252b */
:root[data-bs-theme=dark],
:root[data-bs-theme=dark] [data-bs-theme] {
  --ar-tertiary-bg-rgb: 33, 37, 43;
}

/* Violettes Programm-Band (Startseite) */
.lvm-violet {
  background-color: #9123c4 !important;
}

/* Programmtitel unter den Bildern: Linkfarbe wie live (#bfbfbf, Hover #a6a6a6), auf dem
   violetten Band der Startseite und im Raster auf /programme */
.lvm-violet h2 > a.text-nav,
.lvm-link-titles h2 > a.text-nav {
  --ar-nav-link-color: #bfbfbf; /* .text-nav setzt color mit !important aus dieser Variable */
}
.lvm-violet h2 > a.text-nav:hover,
.lvm-link-titles h2 > a.text-nav:hover {
  --ar-nav-link-color: #a6a6a6;
}

/* Navigation wie live: #bfc8cd, Hover/aktiv #bfbfbf (= Primär) */
header.navbar.navbar,
header.navbar[data-bs-theme] {
  --ar-navbar-color: #bfc8cd;
  --ar-navbar-hover-color: #bfbfbf;
  --ar-navbar-active-color: #bfbfbf;
}

/* Dunkle Bänder wie live (pi-section-dark): Text #999, fett #ccccd5, Überschriften weiß,
   Links #bfbfbf / Hover #a6a6a6, Kontakt-Links #ccccd5 */
.lvm-stripes,
.lvm-stripes [data-bs-theme=dark] {
  --ar-body-color: #999999;
  color: #999999;
}
.lvm-stripes p,
.lvm-stripes li {
  color: #999999;
}
.lvm-stripes strong,
.lvm-stripes b,
.lvm-stripes .fw-bold {
  color: #ccccd5;
}
.lvm-stripes a:not(.btn),
.lvm-stripes a:not(.btn):hover {
  color: #ccccd5;
}

/* Footer wie live: dunkle Zeile Text #999, fett und Links #ccccd5 (auch beim Hover) */
#footer {
  --ar-body-color: #999999;
  color: #999999;
}
#footer .card,
#footer .card .fw-normal {
  color: #999999;
}
#footer strong {
  color: #ccccd5;
}
#footer .card a.nav-link,
#footer .card a.nav-link:hover,
#footer .card a.nav-link span {
  color: #ccccd5;
}

/* Kolophon wie live: graues Band #eee, Text #666e70, Hover #bfbfbf (nur Light Mode) */
:root:not([data-bs-theme=dark]) #footer {
  padding-bottom: 0 !important;
}
:root:not([data-bs-theme=dark]) #ui-colophon {
  background-color: #eeeeee;
  box-shadow: 0 0 0 100vmax #eeeeee;
  clip-path: inset(0 -100vmax);
  color: #666e70;
}
:root:not([data-bs-theme=dark]) #ui-colophon .nav-link {
  color: #666e70;
}
:root:not([data-bs-theme=dark]) #ui-colophon .nav-link:hover {
  color: #bfbfbf;
}
:root:not([data-bs-theme=dark]) #ui-colophon .border-end-lg {
  border-color: #dddddd !important;
}
/* booost-Logo im hellen Kolophon schwarz, nicht weiß (der Footer ist data-bs-theme=dark) */
:root:not([data-bs-theme=dark]) #ui-colophon .sponsor-logo.d-dark-mode-none {
  display: inline !important;
}
:root:not([data-bs-theme=dark]) #ui-colophon .sponsor-logo.d-dark-mode-block {
  display: none !important;
}

/* Breadcrumb wie live: Links #bfbfbf, aktueller Eintrag #888 (nur Light Mode) */
:root:not([data-bs-theme=dark]) .breadcrumb {
  --ar-breadcrumb-item-active-color: #888888;
}
:root:not([data-bs-theme=dark]) .breadcrumb a {
  color: #bfbfbf;
}
:root:not([data-bs-theme=dark]) .breadcrumb a:hover {
  color: #a6a6a6;
}

/* Dunkle Überschriftsbänder und Header: diagonale Linien wie live. Nachbau der Live-Kachel
   cloud19.theme/img/bg-heading-dark.png: 9 x 9 px, eine 1-px-Linie von links unten nach rechts
   oben, #333941 auf #21252b (= Weiß mit 9 % Deckkraft) */
.lvm-stripes,
#header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0' stroke='%23fff' stroke-opacity='.09' shape-rendering='crispEdges'/%3E%3C/svg%3E");
  background-size: 9px 9px;
}

/* Bandüberschriften: Questrial mit Sperrung wie live (typo.less: 3.5em, letter-spacing 4px) */
.lvm-heading {
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
  letter-spacing: 4px;
  font-weight: 400;
}
.lvm-year {
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
  letter-spacing: 2px;
  font-weight: 400;
}

/* Hero: Slogan oben rechts, Logo-Kreis links (header.less #slogan / #logo) */
.lvm-hero .lvm-slogan {
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  line-height: 1.15;
  color: #21252b; /* liegt immer auf hellem Himmel, auch im Dark Mode */
}
.lvm-hero .lvm-hero-logo {
  width: clamp(140px, 20vw, 300px);
  margin-left: 15%;
}
@media (max-width: 767.98px) {
  /* mobil unter die Gesichter, auf den Strand */
  .lvm-hero .lvm-hero-logo { margin-left: 0; width: 120px; margin-top: 40vh; }
}

/* Über uns: halbtransparente Boxen auf dem Foto wie live (.pi-box pi-border:
   rgba(255,255,255,.8), Text #666e70, Rahmen 1px #dde1e1, Überschrift #21252b) */
.lvm-box {
  background: rgba(255, 255, 255, .8);
  color: #666e70;
  border: 1px solid #dde1e1;
}
.lvm-box h1, .lvm-box h2, .lvm-box h3, .lvm-box h4, .lvm-box h5, .lvm-box h6,
.lvm-box .h1, .lvm-box .h2, .lvm-box .h3, .lvm-box .h4, .lvm-box .h5, .lvm-box .h6 {
  color: #21252b;
}
.lvm-box p {
  color: #666e70;
}
[data-bs-theme="dark"] .lvm-box {
  background: rgba(33, 37, 43, .88);
  color: var(--ar-body-color);
  border-color: transparent;
}
[data-bs-theme="dark"] .lvm-box p { color: var(--ar-body-color); }
[data-bs-theme="dark"] .lvm-box :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: #fff; }

/* Filterbuttons im violetten Band: helles Violett, eckig, aktiv weiß, Hover ändert nichts
   (wie live) */
.lvm-filter .btn {
  --ar-btn-bg: #cf4fea;
  --ar-btn-color: #fff;
  --ar-btn-border-color: transparent;
  --ar-btn-hover-bg: #cf4fea;
  --ar-btn-hover-color: #fff;
  --ar-btn-active-bg: #fff;
  --ar-btn-active-color: #586266;
  background: #cf4fea;
  color: #fff;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none;
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
}
.lvm-filter .btn:hover {
  background: #cf4fea;
  color: #fff;
}
.lvm-filter .btn.active,
.lvm-filter .btn.active:hover {
  background: #fff;
  color: #586266;
}

/* Hero mobil: die beiden Frauen stehen rechts im Querformat - Ausschnitt nach rechts
   schieben (CODE-WUNSCH Fokuspunkt am Hero-Tile) */
@media (max-width: 991.98px) {
  .lvm-hero .jarallax-img {
    background-position: 80% center !important;
    object-position: 80% center !important;
  }
}

/* Programm-Detailseiten: eckige Bilder wie live. Das Leadimage-Tile des Portfolio-Layouts
   liest image_shape aus seinen Tile-Daten, nicht vom Objekt (CODE-WUNSCH) */
body.portaltype-portfolio .page-wrapper .rounded-5 {
  border-radius: 0 !important;
}
/* Les Vario Mundi — Entwurf booost.theme_custom_css (Phase C, PATCH @booost-intake).
   Klassen kommen aus specs/pages/startseite/spec.json. Farben seit 2026-10-14 identisch
   mit dem alten Auftritt (Maintainer-Entscheidung, Barrierefreiheit kein Kriterium):
   Basisfarbe #bfbfbf = theme_primary, Violett #9123c4 nur noch als Band (.lvm-violet).
   Reine Light-Mode-Werte stehen unter :root:not([data-bs-theme=dark]). */

/* Links wie live: #bfbfbf, Hover #a6a6a6 (base color / base color -10 % des cloud19-Themes) */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --ar-link-hover-color: #a6a6a6;
  --bs-link-hover-color: #a6a6a6;
}
[data-bs-theme=dark] {
  --ar-link-color: #bfbfbf;
  --bs-link-color: #bfbfbf;
}

/* Graue Bänder (Intro, Referenzen) wie live #eee */
:root:not([data-bs-theme=dark]),
:root:not([data-bs-theme=dark]) [data-bs-theme=light] {
  --ar-tertiary-bg: #eeeeee;
  --ar-tertiary-bg-rgb: 238, 238, 238;
}

/* Dark Mode: das Theme setzt dort --ar-tertiary-bg-rgb auf 255,255,255 bei Deckkraft 1,
   bg-body-tertiary würde weiß mit weißer Schrift (CODE-WUNSCH). Hier: dunkles Grau #21252b */
:root[data-bs-theme=dark],
:root[data-bs-theme=dark] [data-bs-theme] {
  --ar-tertiary-bg-rgb: 33, 37, 43;
}

/* Violettes Programm-Band (Startseite) */
.lvm-violet {
  background-color: #9123c4 !important;
}

/* Programmtitel unter den Bildern: Linkfarbe wie live (#bfbfbf, Hover #a6a6a6), auf dem
   violetten Band der Startseite und im Raster auf /programme */
.lvm-violet h2 > a.text-nav,
.lvm-link-titles h2 > a.text-nav {
  --ar-nav-link-color: #bfbfbf; /* .text-nav setzt color mit !important aus dieser Variable */
}
.lvm-violet h2 > a.text-nav:hover,
.lvm-link-titles h2 > a.text-nav:hover {
  --ar-nav-link-color: #a6a6a6;
}

/* Navigation wie live: #bfc8cd, Hover/aktiv #bfbfbf (= Primär) */
header.navbar.navbar,
header.navbar[data-bs-theme] {
  --ar-navbar-color: #bfc8cd;
  --ar-navbar-hover-color: #bfbfbf;
  --ar-navbar-active-color: #bfbfbf;
}

/* Dunkle Bänder wie live (pi-section-dark): Text #999, fett #ccccd5, Überschriften weiß,
   Links #bfbfbf / Hover #a6a6a6, Kontakt-Links #ccccd5 */
.lvm-stripes,
.lvm-stripes [data-bs-theme=dark] {
  --ar-body-color: #999999;
  color: #999999;
}
.lvm-stripes p,
.lvm-stripes li {
  color: #999999;
}
.lvm-stripes strong,
.lvm-stripes b,
.lvm-stripes .fw-bold {
  color: #ccccd5;
}
.lvm-stripes a:not(.btn),
.lvm-stripes a:not(.btn):hover {
  color: #ccccd5;
}

/* Footer wie live: dunkle Zeile Text #999, fett und Links #ccccd5 (auch beim Hover) */
#footer {
  --ar-body-color: #999999;
  color: #999999;
}
#footer .card,
#footer .card .fw-normal {
  color: #999999;
}
#footer strong {
  color: #ccccd5;
}
#footer .card a.nav-link,
#footer .card a.nav-link:hover,
#footer .card a.nav-link span {
  color: #ccccd5;
}

/* Kolophon wie live: graues Band #eee, Text #666e70, Hover #bfbfbf (nur Light Mode) */
:root:not([data-bs-theme=dark]) #footer {
  padding-bottom: 0 !important;
}
:root:not([data-bs-theme=dark]) #ui-colophon {
  background-color: #eeeeee;
  box-shadow: 0 0 0 100vmax #eeeeee;
  clip-path: inset(0 -100vmax);
  color: #666e70;
}
:root:not([data-bs-theme=dark]) #ui-colophon .nav-link {
  color: #666e70;
}
:root:not([data-bs-theme=dark]) #ui-colophon .nav-link:hover {
  color: #bfbfbf;
}
:root:not([data-bs-theme=dark]) #ui-colophon .border-end-lg {
  border-color: #dddddd !important;
}
/* booost-Logo im hellen Kolophon schwarz, nicht weiß (der Footer ist data-bs-theme=dark) */
:root:not([data-bs-theme=dark]) #ui-colophon .sponsor-logo.d-dark-mode-none {
  display: inline !important;
}
:root:not([data-bs-theme=dark]) #ui-colophon .sponsor-logo.d-dark-mode-block {
  display: none !important;
}

/* Breadcrumb wie live: Links #bfbfbf, aktueller Eintrag #888 (nur Light Mode) */
:root:not([data-bs-theme=dark]) .breadcrumb {
  --ar-breadcrumb-item-active-color: #888888;
}
:root:not([data-bs-theme=dark]) .breadcrumb a {
  color: #bfbfbf;
}
:root:not([data-bs-theme=dark]) .breadcrumb a:hover {
  color: #a6a6a6;
}

/* Dunkle Überschriftsbänder und Header: diagonale Linien wie live. Nachbau der Live-Kachel
   cloud19.theme/img/bg-heading-dark.png: 9 x 9 px, eine 1-px-Linie von links unten nach rechts
   oben, #333941 auf #21252b (= Weiß mit 9 % Deckkraft) */
.lvm-stripes,
#header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0' stroke='%23fff' stroke-opacity='.09' shape-rendering='crispEdges'/%3E%3C/svg%3E");
  background-size: 9px 9px;
}

/* Bandüberschriften: Questrial mit Sperrung wie live (typo.less: 3.5em, letter-spacing 4px) */
.lvm-heading {
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
  letter-spacing: 4px;
  font-weight: 400;
}
.lvm-year {
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
  letter-spacing: 2px;
  font-weight: 400;
}

/* Hero: Slogan oben rechts, Logo-Kreis links (header.less #slogan / #logo) */
.lvm-hero .lvm-slogan {
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  line-height: 1.15;
  color: #21252b; /* liegt immer auf hellem Himmel, auch im Dark Mode */
}
.lvm-hero .lvm-hero-logo {
  width: clamp(140px, 20vw, 300px);
  margin-left: 15%;
}
@media (max-width: 767.98px) {
  /* mobil unter die Gesichter, auf den Strand */
  .lvm-hero .lvm-hero-logo { margin-left: 0; width: 120px; margin-top: 40vh; }
}

/* Über uns: halbtransparente Boxen auf dem Foto wie live (.pi-box pi-border:
   rgba(255,255,255,.8), Text #666e70, Rahmen 1px #dde1e1, Überschrift #21252b) */
.lvm-box {
  background: rgba(255, 255, 255, .8);
  color: #666e70;
  border: 1px solid #dde1e1;
}
.lvm-box h1, .lvm-box h2, .lvm-box h3, .lvm-box h4, .lvm-box h5, .lvm-box h6,
.lvm-box .h1, .lvm-box .h2, .lvm-box .h3, .lvm-box .h4, .lvm-box .h5, .lvm-box .h6 {
  color: #21252b;
}
.lvm-box p {
  color: #666e70;
}
[data-bs-theme="dark"] .lvm-box {
  background: rgba(33, 37, 43, .88);
  color: var(--ar-body-color);
  border-color: transparent;
}
[data-bs-theme="dark"] .lvm-box p { color: var(--ar-body-color); }
[data-bs-theme="dark"] .lvm-box :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: #fff; }

/* Filterbuttons im violetten Band: helles Violett, eckig, aktiv weiß, Hover ändert nichts
   (wie live) */
.lvm-filter .btn {
  --ar-btn-bg: #cf4fea;
  --ar-btn-color: #fff;
  --ar-btn-border-color: transparent;
  --ar-btn-hover-bg: #cf4fea;
  --ar-btn-hover-color: #fff;
  --ar-btn-active-bg: #fff;
  --ar-btn-active-color: #586266;
  background: #cf4fea;
  color: #fff;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none;
  font-family: var(--ar-heading-font-family, 'Questrial', sans-serif);
}
.lvm-filter .btn:hover {
  background: #cf4fea;
  color: #fff;
}
.lvm-filter .btn.active,
.lvm-filter .btn.active:hover {
  background: #fff;
  color: #586266;
}

/* Hero mobil: die beiden Frauen stehen rechts im Querformat - Ausschnitt nach rechts
   schieben (CODE-WUNSCH Fokuspunkt am Hero-Tile) */
@media (max-width: 991.98px) {
  .lvm-hero .jarallax-img {
    background-position: 80% center !important;
    object-position: 80% center !important;
  }
}

/* Programm-Detailseiten: eckige Bilder wie live. Das Leadimage-Tile des Portfolio-Layouts
   liest image_shape aus seinen Tile-Daten, nicht vom Objekt (CODE-WUNSCH) */
body.portaltype-portfolio .page-wrapper .rounded-5 {
  border-radius: 0 !important;
}


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