:root {

  --foreground: #5a5a5a;
  --background: #f7f7f7;
  --background2: #fff;

  --clr-yellow             : #f19101;
  --clr-yellow-90          : rgba(241,145,1, .9);
  --clr-yellow-80          : rgba(241,145,1, .8);
  --clr-yellow-70          : rgba(241,145,1, .7);
  --clr-yellow-60          : rgba(241,145,1, .6);
  --clr-yellow-50          : rgba(241,145,1, .5);
  --clr-yellow-40          : rgba(241,145,1, .4);
  --clr-yellow-30          : rgba(241,145,1, .3);
  --clr-yellow-20          : rgba(241,145,1, .2);
  --clr-yellow-10          : rgba(241,145,1, .1);
  --clr-yellow-5           : rgba(241,145,1, .05);

  --clr-blue               : #4297A9;
  --clr-blue-90            : rgba(66,151,169, .9);
  --clr-blue-80            : rgba(66,151,169, .8);
  --clr-blue-70            : rgba(66,151,169, .7);
  --clr-blue-60            : rgba(66,151,169, .6);
  --clr-blue-50            : rgba(66,151,169, .5);
  --clr-blue-40            : rgba(66,151,169, .4);
  --clr-blue-30            : rgba(66,151,169, .3);
  --clr-blue-20            : rgba(66,151,169, .2);
  --clr-blue-10            : rgba(66,151,169, .1);
  --clr-blue-5             : rgba(66,151,169, .05);

  --clr-purple             : #A64690;
  --clr-purple-90          : rgba(166,70,144, .9);
  --clr-purple-80          : rgba(166,70,144, .8);
  --clr-purple-70          : rgba(166,70,144, .7);
  --clr-purple-60          : rgba(166,70,144, .6);
  --clr-purple-50          : rgba(166,70,144, .5);
  --clr-purple-40          : rgba(166,70,144, .4);
  --clr-purple-30          : rgba(166,70,144, .3);
  --clr-purple-20          : rgba(166,70,144, .2);
  --clr-purple-10          : rgba(166,70,144, .1);
  --clr-purple-5           : rgba(166,70,144, .05);

  --clr-gold               : #c5ab63;
  --clr-gold-90            : rgba(197,171,99, .9);
  --clr-gold-80            : rgba(197,171,99, .8);
  --clr-gold-70            : rgba(197,171,99, .7);
  --clr-gold-60            : rgba(197,171,99, .6);
  --clr-gold-50            : rgba(197,171,99, .5);
  --clr-gold-40            : rgba(197,171,99, .4);
  --clr-gold-30            : rgba(197,171,99, .3);
  --clr-gold-20            : rgba(197,171,99, .2);
  --clr-gold-10            : rgba(197,171,99, .1);
  --clr-gold-5             : rgba(197,171,99, .05);

  --clr-gray               : #eee;

  --clr-white              : #fff;
  --clr-white-90            : rgba(255,255,255, .9);
  --clr-white-80            : rgba(255,255,255, .8);
  --clr-white-70            : rgba(255,255,255, .7);
  --clr-white-60            : rgba(255,255,255, .6);
  --clr-white-50            : rgba(255,255,255, .5);
  --clr-white-40            : rgba(255,255,255, .4);
  --clr-white-30            : rgba(255,255,255, .3);
  --clr-white-20            : rgba(255,255,255, .2);
  --clr-white-10            : rgba(255,255,255, .1);
  --clr-white-5             : rgba(255,255,255, .05);

  --clr-black               : #000;
  --clr-black-90            : rgba(0,0,0, .9);
  --clr-black-80            : rgba(0,0,0, .8);
  --clr-black-70            : rgba(0,0,0, .7);
  --clr-black-60            : rgba(0,0,0, .6);
  --clr-black-50            : rgba(0,0,0, .5);
  --clr-black-40            : rgba(0,0,0, .4);
  --clr-black-30            : rgba(0,0,0, .3);
  --clr-black-20            : rgba(0,0,0, .2);
  --clr-black-10            : rgba(0,0,0, .1);
  --clr-black-5             : rgba(0,0,0, .05);

  --clr-primary            : var(--clr-yellow);
  --clr-primary-90         : var(--clr-yellow-90);
  --clr-primary-80         : var(--clr-yellow-80);
  --clr-primary-contrast   : #fff;
  --clr-secondary          : var(--clr-purple);
  --clr-secondary-90       : var(--clr-purple-90);
  --clr-secondary-80       : var(--clr-purple-80);
  --clr-secondary-contrast : #fff;
  --clr-accent             : var(--clr-blue);
  --clr-accent-90          : var(--clr-blue-90);
  --clr-accent-80          : var(--clr-blue-80);
  --clr-accent-contrast    : #fff;

  --ff-default: 'Arial', 'Helvetica',sans-serif;
  --ff-accent: 'Roboto Condensed', Arial, 'Helvetica', sans-serif;



  --color-default         : #555;
  --color-gray            : #777;
  --color-light-gray      : #EEE;
  --color-links           : #A64690;
  --background-color      : #fff;
  --background-color-gray : #f6f6f6;
  --border-gray           : #ccc;

  --light-gray            : #EEE;
  --yellow                : #FFDC00;
  --purple                : #A64690;
  --blue                  : #4696A8;
  --red                   : #85144b;
  --green                 : #3D9970;
  --orange                : #f19101;
  --slider-icon-size      : 44px;

}

@media (max-width: 599px) {
  .is-mobile {
    display: block !important;
  }

  .is-desktop {
    display: none !important;
  }
}

@media (min-width: 600px) {
  .is-desktop {
    display: block !important;
  }

  .is-mobile {
    display: none !important;
  }
}

*:not(i),
h1, h2, h3, h4, h5 {
  font-family: "Arial", "Helvetica", sans-serif; }


html {
  scroll-behavior: smooth; }


body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--ff-default);
  justify-content: start; }

section, div {
  scroll-margin-top: 150px; }

.container {
  clear: both; }

.bg-light {
  background: var(--background2) !important; }

.bg-default {
  background: var(--background) !important; }

.white { color: var(--clr-white) !important; }
.bg-white { background: var(--clr-white) !important; }
.bg-white-90 { background: var(--clr-white-90) !important; }
.bg-white-80 { background: var(--clr-white-80) !important; }
.bg-white-70 { background: var(--clr-white-70) !important; }
.bg-white-60 { background: var(--clr-white-60) !important; }
.bg-white-50 { background: var(--clr-white-50) !important; }
.bg-white-40 { background: var(--clr-white-40) !important; }
.bg-white-30 { background: var(--clr-white-30) !important; }
.bg-white-20 { background: var(--clr-white-20) !important; }
.bg-white-10 { background: var(--clr-white-10) !important; }
.bg-white-5 { background: var(--clr-white-5) !important; }

.black { color: var(--clr-black) !important; }
.bg-black { background: var(--clr-black) !important; }
.bg-black-90 { background: var(--clr-black-90) !important; }
.bg-black-80 { background: var(--clr-black-80) !important; }
.bg-black-70 { background: var(--clr-black-70) !important; }
.bg-black-60 { background: var(--clr-black-60) !important; }
.bg-black-50 { background: var(--clr-black-50) !important; }
.bg-black-40 { background: var(--clr-black-40) !important; }
.bg-black-30 { background: var(--clr-black-30) !important; }
.bg-black-20 { background: var(--clr-black-20) !important; }
.bg-black-10 { background: var(--clr-black-10) !important; }
.bg-black-5 { background: var(--clr-black-5) !important; }

.yellow { color: var(--clr-yellow) !important; }
.bg-yellow { background: var(--clr-yellow) !important; }
.bg-yellow-90 { background: var(--clr-yellow-90) !important; }
.bg-yellow-80 { background: var(--clr-yellow-80) !important; }
.bg-yellow-70 { background: var(--clr-yellow-70) !important; }
.bg-yellow-60 { background: var(--clr-yellow-60) !important; }
.bg-yellow-50 { background: var(--clr-yellow-50) !important; }
.bg-yellow-40 { background: var(--clr-yellow-40) !important; }
.bg-yellow-30 { background: var(--clr-yellow-30) !important; }
.bg-yellow-20 { background: var(--clr-yellow-20) !important; }
.bg-yellow-10 { background: var(--clr-yellow-10) !important; }
.bg-yellow-5 { background: var(--clr-yellow-5) !important; }

.purple { color: var(--clr-purple) !important; }
.bg-purple { background: var(--clr-purple) !important; }
.bg-purple-90 { background: var(--clr-purple-90) !important; }
.bg-purple-80 { background: var(--clr-purple-80) !important; }
.bg-purple-70 { background: var(--clr-purple-70) !important; }
.bg-purple-60 { background: var(--clr-purple-60) !important; }
.bg-purple-50 { background: var(--clr-purple-50) !important; }
.bg-purple-40 { background: var(--clr-purple-40) !important; }
.bg-purple-30 { background: var(--clr-purple-30) !important; }
.bg-purple-20 { background: var(--clr-purple-20) !important; }
.bg-purple-10 { background: var(--clr-purple-10) !important; }
.bg-purple-5 { background: var(--clr-purple-5) !important; }

.blue { color: var(--clr-blue) !important; }
.bg-blue { background: var(--clr-blue) !important; }
.bg-blue-90 { background: var(--clr-blue-90) !important; }
.bg-blue-80 { background: var(--clr-blue-80) !important; }
.bg-blue-70 { background: var(--clr-blue-70) !important; }
.bg-blue-60 { background: var(--clr-blue-60) !important; }
.bg-blue-50 { background: var(--clr-blue-50) !important; }
.bg-blue-40 { background: var(--clr-blue-40) !important; }
.bg-blue-30 { background: var(--clr-blue-30) !important; }
.bg-blue-20 { background: var(--clr-blue-20) !important; }
.bg-blue-10 { background: var(--clr-blue-10) !important; }
.bg-blue-5 { background: var(--clr-blue-5) !important; }

[style*="color:#ff0000"]:not([style*="background-color:#ff0000"]),
[style*="color:#cc0000"]:not([style*="background-color:#cc0000"]),
[style*="color:#990000"]:not([style*="background-color:#990000"]) { color: var(--clr-red) !important; }
[style*="background-color:#ff0000"],
[style*="background-color:#cc0000"],
[style*="background-color:#990000"] { background-color: var(--clr-red) !important; }

[style*="color:#ffff00"]:not([style*="background-color:#ffff00"]),
[style*="color:#ffcc00"]:not([style*="background-color:#ffcc00"]),
[style*="color:#ff9900"]:not([style*="background-color:#ff9900"]) { color: var(--clr-yellow) !important; }
[style*="background-color:#ffff00"],
[style*="background-color:#ffcc00"],
[style*="background-color:#ff9900"] { background-color: var(--clr-yellow) !important; }


[style*="color:#00ff00"]:not([style*="background-color:#00ff00"]),
[style*="color:#00cc00"]:not([style*="background-color:#00cc00"]),
[style*="color:#009900"]:not([style*="background-color:#009900"]) { color: var(--clr-green) !important; }
[style*="background-color:#00ff00"],
[style*="background-color:#00cc00"],
[style*="background-color:#009900"] { background-color: var(--clr-green) !important; }

[style*="color:#0000ff"]:not([style*="background-color:#0000ff"]),
[style*="color:#0000cc"]:not([style*="background-color:#0000cc"]),
[style*="color:#000099"]:not([style*="background-color:#000099"]) { color: var(--clr-blue) !important; }
[style*="background-color:#0000ff"],
[style*="background-color:#0000cc"],
[style*="background-color:#000099"] { background-color: var(--clr-blue) !important; }

[style*="color:#ff0099"]:not([style*="background-color:#ff0099"]),
[style*="color:#cc0099"]:not([style*="background-color:#cc0099"]),
[style*="color:#990099"]:not([style*="background-color:#990099"]) { color: var(--clr-purple) !important; }
[style*="background-color:#ff0099"],
[style*="background-color:#cc0099"],
[style*="background-color:#990099"] { background-color: var(--clr-purple) !important; }



img {
  max-width: 100%;
  height: auto !important; }

.header-logo img {
  width: auto;
  max-height: 45px !important; }

/*
.column-title-right img {
  max-width: 300px; }
*/

.scrolled .header-logo img {
  width: auto;
  max-height: 45px !important; }

.bg-dark-gray.text-light:not(footer) {
  background: #606060; }

small {
  display: inline-block;
  line-height: 1.2; }

.marker {
  background-color: rgba(166,70,144, .5);
  border-radius: 4px;
  display: inline-block;
  padding: .5em; }

.marker.yellow, .clickfunnel .marker {
  background-color: rgba(241,145,1, .75); }

h1, .h1, h2, .h2 {
  text-transform: none; }

.grid-row h1, .grid-row .h1 {
  font-size: 1.8rem; }

.py-small {
  padding-top: 30px;
  padding-bottom: 30px; }

.child--py-0 > *:first-child,
.child--py-0 > *:first-child > *:first-child,
.child--py-0 > *:first-child > *:first-child > *:first-child {
  margin-top: 0 !important; }

.child--py-0 > *:last-child,
.child--py-0 > *:last-child > *:last-child,
.child--py-0 > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0 !important; }

.row-title + .row {
  margin-top: calc(24px + 1em); }

.row + .row-button {
  margin-top: 3rem; }

.btn, button, .btn-primary {
  background-color: var(--clr-secondary);
  color: var(--clr-secondary-contrast) !important;
  border: none  !important;
  border-color: transparent;
  font-family: var(--ff-accent);
/*
  font-size: 16px;
*/
  font-weight: normal;
  letter-spacing: unset;
  text-transform: unset;
  -webkit-box-shadow: none;
  box-shadow: none; }

.btn:hover, .btn:focus, .btn:active,
button:hover, button:focus, button:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--clr-secondary-80);
  color: var(--clr-secondary-contrast) !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

section ul {
  list-style: none;
  padding-left: 0; }

section ul > li {
  position: relative;
  list-style: none;
  margin-bottom: 24px;
  padding-left: 3rem;
  min-height: 64px; }

section ul > li::before {
  content: "\f058";
  color: var(--clr-primary);
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-size: 2rem !important;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 1; }

section ul > li::after {
  content: '';
  display: block;
  background: #fff;
  border-radius: 100%;
  height: calc(2rem - 4px);
  width: calc(2rem - 4px);
  position: absolute;
  top: 10px;
  left: 2px; }

a {
  color: var(--clr-primary);
  text-decoration: underline; }

header a, footer a, .text-light a {
  color: #fff;
  text-decoration: none; }

.slick-arrow {
  background: var(--clr-primary);
  z-index: 3; }

.slick-prev {
  left: -40px; }

.slider-fullwidth .slick-prev {
  left: 40px; }

.slick-next {
  right: -40px; }

.slider-fullwidth .slick-next {
  right: 40px; }

.slick-prev::before, .slick-next::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  font-size: 20px !important;
  line-height: 1;
  font-style: normal; }

.slick-next::before {
  content: "\f054"; }

.slick-prev::before {
  content: "\f053"; }

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  background: var(--clr-primary-80); }



.slide-container {
  position: relative;
  height: 100%; }

.slider-fullwidth .slide-container {
  padding-block: 60px; }

.slide-background {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; }

.slide-background img {
  height: 100%;
  width: 100%;
  object-fit: cover; }

.slide-content {
  position: relative;
  z-index: 2; }

.slick-slide h4 {
  color: var(--clr-primary-80); }

.row-columns + .row-columns {
  padding-top: 60px; }

header + section:first-of-type,
header + .container:first-of-type {
  padding-top: 80px !important; }

section.bg-default + section.bg-default {
  padding-top: 0 !important; }

@media (max-width: 599px) {
  header + section:first-of-type .background-image-container.static {
    margin-top: -80px !important; }

  .background-image-container.static {
    position: static; }

  header + section:first-of-type:has(.background-image-container img.mobile) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .background-image-container:has(img.mobile) {
    position: static !important;
    line-height: 0;
  }

  .background-image-container:has(img.mobile) img.desktop {
    display: none !important; }

  .background-image-container img.mobile {
    height: auto !important;
    object-fit: contain !important; }
}

@media (min-width: 600px) {
  .background-image-container img.mobile {
    display: none !important; }

  section.min-height {
    min-height: calc(100vh - 249px); }
}

/* Header-Video im Hochformat (Element 1390: field33 = Querformat, field34 = Hochformat).
   Dieselbe Weiche wie beim Hintergrundbild eine Regel weiter oben, mit demselben
   600px-Umbruch — aber OHNE den Wechsel auf object-fit: contain: das Video ist eine
   formatfuellende Flaeche, kein Bild, das ganz zu sehen sein muss.
   .has-portrait setzt das Template nur, wenn field34 gepflegt ist. Ein Abschnitt mit
   ausschliesslich field33 laeuft also unveraendert durch. */
@media (max-width: 599px) {
  .background-video-container.has-portrait video.desktop {
    display: none !important; }
}

@media (min-width: 600px) {
  .background-video-container video.mobile {
    display: none !important; }
}

/* Pause/Play-Knopf fuer das Hintergrundvideo (WCAG 2.2.2, Level A).
   z-index am KNOPF, nicht am Container: der Container hat z-index: auto und macht damit keinen
   eigenen Stacking Context auf, der Knopf konkurriert also direkt im Stacking Context der section
   (position: relative, main.css:912) und legt sich ueber den Inhalt (z-index: 2, weiter oben).
   Ein z-index am Container wuerde stattdessen das Video ueber den Text heben.
   Gedaempft wird ueber die Grundhelligkeit, NICHT ueber opacity: vor einem unbekannten Videobild
   waere der Kontrast sonst nicht mehr berechenbar. Schwarz mit .6 ergibt selbst vor einem weissen
   Frame ein ~#666, weisses Icon darauf liegt bei rund 4,4:1 - 1.4.11 Non-text Contrast (3:1) ist
   damit garantiert erfuellt und nicht bloss wahrscheinlich.
   44x44px erfuellt 2.5.5 Target Size (AAA), nicht nur die 24px aus 2.5.8 (AA). */
.background-video-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease; }

/* display: flex oben schlaegt das display: none, das der Browser dem hidden-Attribut mitgibt -
   ohne diese Regel stuende der Knopf ohne JavaScript sichtbar und funktionslos da. */
.background-video-toggle[hidden] {
  display: none; }

.background-video-toggle:hover,
.background-video-toggle:focus-visible {
  background: rgba(0, 0, 0, .8); }

/* Der Schlagschatten traegt den Fokusring auch ueber hellen Videobildern. */
.background-video-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .6); }

@media (prefers-reduced-motion: reduce) {
  .background-video-toggle {
    transition: none; }
}

.px-0 { padding-inline: 0 !important; }
.py-0 { padding-block: 0 !important; }
.mx-0 { margin-inline: 0 !important; }
.my-0 { margin-block: 0 !important; }



@media (min-width: 768px) {
  .header-logo img {
    max-height: 60px !important; }

  header + section:first-of-type,
  header + .container:first-of-type {
    padding-top: 150px !important; }

  header + section:first-of-type .background-image-container.static {
    margin-top: 0px !important; }

  .row-columns + .row-columns {
    padding-top: 80px; }
}

@media (min-width: 992px) {
  .grid-row {
    display: grid;
    grid-template-columns: 58.333% 41.667%;}

  .grid-row > div[class*="col-"] {
    max-width: 100%; }

  .grid-row > div[class*="col-"].rowspan {
    grid-row: 1/3;
    grid-column: 2/3; }

  .row-columns + .row-columns {
    padding-top: 120px; }
}



@media (max-width: 991px) {
  h1, h2, h3, h4, h5, h6 {
    text-align: center; }
}


/* * * * * * * * */
/* Cookie Consent (orestbida 3.1.0, js/cc-config.js) in den Funnel-Farben.
   Variablen auf #cc-main schlagen die :root-Defaults der Lib (die laedt hier erst im body). */
#cc-main {
  --cc-font-family: inherit;
  --cc-btn-primary-bg: var(--clr-primary);
  --cc-btn-primary-color: var(--clr-primary-contrast);
  --cc-btn-primary-border-color: var(--clr-primary);
  --cc-btn-primary-hover-bg: var(--clr-primary-80);
  --cc-btn-primary-hover-color: var(--clr-primary-contrast);
  --cc-btn-primary-hover-border-color: var(--clr-primary-80);
  --cc-link-color: var(--clr-primary);
  --cc-toggle-on-bg: var(--clr-primary);
}

/* Cookie-Leiste oben im Seitenfluss (Vimeo-Dashboards, html.cc-topbar): der fixierte Header
   rutscht unter die Leiste und beim Scrollen wieder nach oben (Wert setzt js/cc-config.js). */
html.cc-topbar header.fixed-top { top: var(--cc-topbar-offset, 0px); }

#btn-cookieconsent-update {
    background:transparent;
    color:var(--foreground, #999)!important;
    padding:1em!important;
    width:auto;
    opacity:0.5;
    transition:all .2s ease-in-out;
    position:absolute;
    bottom:5px;
    right:5px;
    z-index:999;
}

#btn-cookieconsent-update:hover {
    opacity:1;
}



@media (max-width: 599px) {
  section:has(>.background-image-container.static) {
    padding-bottom: 0 !important;
  }

  .background-image-container.static {
    line-height: 0 !important;
  }

  header.fixed-top:not(:has(+ section > .background-image-container)) {
    position: static !important; }

  header + section:first-of-type:not(:has(> .background-image-container)) {
    padding-top: 60px !important; }

  header + section:first-of-type:not(:has(> .background-image-container)):has(.is-mobile):has(.container--slider.is-desktop) {
    padding-top: 100px !important;
    margin-top: -81px !important; }

  .slider {
    max-width: calc(100vw - 100px);
    margin-inline: auto !important; }

  .slick-slide p {
    font-size: 1rem; }

  h1 {
    font-size: 1.8rem; }
}

span[style*="background-color"] {
  display: inline-block;
  line-height: 1.4em;
  margin-bottom: .25em;
  padding: .25em 1em;
}

.listitem-purple li::marker,
.listitem-purple li::before {
  color: var(--clr-purple);
}

.listitem-blue li::marker,
.listitem-blue li::before {
  color: var(--clr-blue);
}

.listitem-gold li::marker,
.listitem-gold li::before {
  color: var(--clr-gold);
}

.listitem-black li::marker,
.listitem-black li::before {
  color: var(--clr-black);
}

.listitem-gray li::marker,
.listitem-gray li::before {
  color: var(--clr-gray);
}

.row-columns video {
  width: 100%;
  height: auto;
}

section:has(.container--slider.min-height.is-all) {
  min-height: calc(100vh - 249px);
}

@media (min-width: 600px) {
  section:has(.container--slider.min-height.is-desktop) {
    min-height: calc(100vh - 249px);
  }
}

section .container--slider.min-height {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

section .container--slider.min-height .row-slider,
section .container--slider.min-height .slider,
section .container--slider.min-height .slick-list {
  height: 100%;
}

/* ===========================================================================
   ZUGANG ABGELAUFEN (Hinweis statt Videos)
   Bootstrap's alert component is NOT part of this project's CSS — only
   bootstrap.bundle.min.js is loaded, not bootstrap.css — so "alert
   alert-warning" alone renders unstyled. Hence an own, self-contained box.

   .access-denied (falscher Zugangs-Slug, Artikel-field14 vs. Benutzer-field04)
   teilt sich dieselbe Box — beides ist derselbe Fall fuer den Besucher: er ist
   angemeldet, sieht die Seite aber nicht.
   ========================================================================== */
.access-expired,
.access-denied {
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--clr-yellow, #f19101);
  border-left-width: 4px;
  border-radius: .35rem;
  background: var(--clr-yellow-10, rgba(241,145,1, .1));
  color: var(--foreground, #5a5a5a);
  text-align: left;
}

.access-expired > *:first-child,
.access-denied  > *:first-child { margin-top: 0; }
.access-expired > *:last-child,
.access-denied  > *:last-child  { margin-bottom: 0; }

.access-expired p,
.access-expired li,
.access-denied p,
.access-denied li { font-size: 1rem; line-height: 1.55; }

.access-expired a,
.access-denied a { text-decoration: underline; }

/* on the dark section variants the yellow tint alone is too weak */
.bg-dark-gray .access-expired,
.bg-black .access-expired,
.text-light .access-expired,
.bg-dark-gray .access-denied,
.bg-black .access-denied,
.text-light .access-denied {
  background: var(--clr-yellow-20, rgba(241,145,1, .2));
  color: var(--clr-white, #fff);
}

/* ===========================================================================
   TEMPLATE 1391 (.sps-clickfunnel): Buttons cyan, Hover violett
   Die Basisregeln oben faerben Buttons in --clr-secondary (violett) mit
   hellerem Violett im Hover. Hier wird das fuer die 1391-Seiten umgedreht:
   Grundfarbe --clr-blue (cyan), Hover --clr-purple. Die Selektorlisten
   spiegeln die Basisregeln, damit auch :focus/:active und die
   .btn-primary-Sonderfaelle von Bootstrap mitgehen.

   BEWUSST OHNE nacktes "button": die Videobibliothek besteht aus <button>-
   Elementen, und ein Teil ihrer Regeln in vimeo.css hat nur eine Klasse
   (.vimeo-modal-close, .vimeo-details-play) — ".sps-clickfunnel button" waere
   spezifischer und wuerde sie cyan einfaerben. Ueber .btn/.btn-primary/
   .red-button sind alle echten Seiten-Buttons erfasst; die Videobibliothek
   behaelt ihren eigenen Akzent (--vimeo-accent).

   BRANDING: Flaeche und Text kommen aus der Akzentfarbe der Branding-Tabelle
   (field12), gesetzt im <head> der Seite. Ohne gepflegte Tabelle greifen die
   Fallbacks und alles bleibt cyan/violett. Es gibt bewusst KEINEN Buttonstil:
   der Button behaelt seine Form, nur Flaechen-, Schrift- und Rahmenfarbe
   werden ersetzt.
   ========================================================================== */
.sps-clickfunnel .btn,
.sps-clickfunnel .btn-primary,
.sps-clickfunnel .red-button {
  background-color: var(--brand-accent, var(--clr-blue)) !important;
  color: var(--brand-accent-fg, var(--clr-accent-contrast, #fff)) !important;
  border: none !important;
  border-radius: var(--brand-radius, 3px);
}

.sps-clickfunnel .btn:hover,
.sps-clickfunnel .btn:focus,
.sps-clickfunnel .btn:active,
.sps-clickfunnel .btn-primary:hover,
.sps-clickfunnel .btn-primary:focus,
.sps-clickfunnel .btn-primary:active,
.sps-clickfunnel .btn-primary:not(:disabled):not(.disabled):active,
.sps-clickfunnel .btn-primary:not(:disabled):not(.disabled).active,
.sps-clickfunnel .red-button:hover,
.sps-clickfunnel .red-button:focus,
.sps-clickfunnel .red-button:active {
  background-color: var(--brand-accent-hover, var(--clr-purple)) !important;
  color: var(--brand-accent-fg-hover, var(--clr-secondary-contrast, #fff)) !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* ===========================================================================
   KOPF (Template 1391): Seitenlogo links, Firmenlogo rechts (= Logout-Schalter),
   beide gleich hoch und beim Scrollen animiert kleiner.

   Die Hoehe kommt aus zwei Custom Properties, damit Kopflogo und Firmenlogo
   zwangslaeufig dieselbe Grenze haben und es nur EINE Stelle zum Nachjustieren
   gibt. Unterschied: das Kopflogo links wird auf diese Hoehe GESETZT, das
   Firmenlogo nur darauf BEGRENZT (max-height) und sonst unangetastet gelassen.
   Die Basisregeln fuer .header-logo img in sps.css/main.css (45/60px, teils
   !important) werden durch die zusaetzliche .sps-clickfunnel-Klasse ueberstimmt.
   ========================================================================== */
.sps-clickfunnel {
  --header-logo-h          : 72px;
  --header-logo-h-scrolled : 48px;
}

@media (max-width: 767px) {
  .sps-clickfunnel {
    --header-logo-h          : 54px;
    --header-logo-h-scrolled : 40px;
  }
}

.sps-clickfunnel .header-logo img {
  height: var(--header-logo-h) !important;      /* schlaegt das globale img { height: auto !important } */
  max-height: var(--header-logo-h) !important;
  width: auto !important;
  -webkit-transition: height .4s ease-in-out, width .4s ease-in-out, max-height .4s ease-in-out;
  transition: height .4s ease-in-out, width .4s ease-in-out, max-height .4s ease-in-out;
}

.sps-clickfunnel header.scrolled .header-logo img {
  height: var(--header-logo-h-scrolled) !important;
  max-height: var(--header-logo-h-scrolled) !important;
}

/* Der Kopfbereich rechts: alles rechtsbuendig in einer Reihe. Wichtig fuer die
   Logout-Animation weiter unten — waechst der Text, waechst die Zeile nach LINKS,
   das Logo wandert also mit. */
.header-contact.has-company {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

.header-contact.has-company .header-logout { margin: 0; }

/* Firmenlogo: unveraendert anzeigen. Begrenzt wird nur die HOEHE, und zwar auf
   dieselbe Grenze wie beim Kopflogo links (--header-logo-h); die Breite ergibt
   sich daraus. Ausdruecklich KEIN object-fit (nichts wird beschnitten), KEIN
   aspect-ratio, KEIN border-radius und keine Hintergrundflaeche — das Logo kommt
   vom Kunden und wird so gezeigt, wie es ist. Die Hoehe bleibt auto (globale
   Regel img { height: auto !important }), max-height genuegt. */
.header-company-logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 44px;             /* Fallback; die 1391-Regel unten setzt die Grenze */
  flex: 0 0 auto;
}

.sps-clickfunnel .header-company-logo {
  max-height: var(--header-logo-h);
  -webkit-transition: max-height .4s ease-in-out;
  transition: max-height .4s ease-in-out;
}

.sps-clickfunnel header.scrolled .header-company-logo { max-height: var(--header-logo-h-scrolled); }

.header-company-name {
  display: block;
  font-family: var(--ff-accent, inherit);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   FIRMENLOGO = LOGOUT
   Das Logo (oder, ohne Logo, der Firmenname) ist der Logout-Schalter. Beim
   Ueberfahren und bei Tastaturfokus blendet rechts "Logout" ein, wodurch das
   Logo nach links rueckt.

   Die Bewegung entsteht aus der aufklappenden Textbreite, nicht aus einem
   transform: so bleibt der Klickbereich immer da, wo man hinzeigt, und es gibt
   kein Zurueckschnappen, wenn der Zeiger den Text erreicht. Animiert werden
   max-width und margin-left (statt padding/gap — die wuerden im
   zugeklappten Zustand Platz behalten, wenn box-sizing nicht border-box ist).
   --------------------------------------------------------------------------- */
/* color/text-decoration mit !important, weil PrimeFaces fuer .ui-commandlink eine
   eigene Theme-Farbe mitbringt und deren Regel gleich spezifisch ist. */
.header-logout-btn {
  display: inline-flex;
  align-items: center;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
  opacity: .9;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}

.header-logout-btn:hover,
.header-logout-btn:focus {
  color: inherit !important;
  opacity: 1;
}

.header-logout-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--ff-accent, inherit);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;        /* bewusst kein Unterstrich, auch nicht im Hover */
}

.header-logout-btn:hover .header-logout-text,
.header-logout-btn:focus .header-logout-text {
  color: var(--brand-accent-hover, var(--brand-accent, var(--clr-purple)));
}

/* Nur MIT Logo/Firmenname wird der Text eingeklappt — gibt es beides nicht,
   ist er die einzige Beschriftung und muss stehen bleiben (has-visual fehlt). */
.header-logout-btn.has-visual .header-logout-text {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  -webkit-transition: max-width .35s ease-in-out, margin-left .35s ease-in-out, opacity .25s ease-in-out;
  transition: max-width .35s ease-in-out, margin-left .35s ease-in-out, opacity .25s ease-in-out;
}

.header-logout-btn.has-visual:hover .header-logout-text,
.header-logout-btn.has-visual:focus .header-logout-text,
.header-logout-btn.has-visual:focus-within .header-logout-text {
  max-width: 8rem;
  margin-left: .55rem;
  opacity: 1;
}

/* Tastatur: der Fokus muss sichtbar sein, das Logo hat sonst keinen Rahmen. */
.header-logout-btn:focus-visible {
  outline: 2px solid var(--brand-accent, var(--clr-primary));
  outline-offset: 3px;
}

/* Touch: ohne Hover wuerde der Zusammenhang "Logo = Abmelden" nicht sichtbar,
   und ein Antippen meldet sofort ab. Dort steht der Text deshalb immer. */
@media (hover: none) {
  .header-logout-btn.has-visual .header-logout-text {
    max-width: 8rem;
    margin-left: .55rem;
    opacity: 1;
  }
}

@media (max-width: 575px) {
  .header-contact.has-company { gap: .5rem; }
  .header-company-name { font-size: .78rem; }
  .header-logout-text { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sps-clickfunnel .header-logo img,
  .sps-clickfunnel .header-company-logo,
  .header-logout-btn,
  .header-logout-btn.has-visual .header-logout-text { transition: none; }
}

/* ===========================================================================
   BRANDING / THEME (Template 1391, Element 1390)
   ===========================================================================
   Alle Werte kommen aus CSS-Variablen, die im <head> der Seite aus der
   Branding-Tabelle (field12, nur Zeile 1) gesetzt werden:

     --brand-accent           Akzentfarbe (Buttonflaeche, Rahmen, Haken, Pfeile, Links)
     --brand-accent-fg        Schriftfarbe auf der Akzentfarbe (Buttontext)
     --brand-accent-hover     Akzentfarbe fuer Hover/Fokus
     --brand-accent-fg-hover  Schriftfarbe auf der Hover-Akzentfarbe
     --brand-heading          Ueberschriftenfarbe
     --brand-font             Schriftfarbe
     --brand-bg               Hintergrundfarbe
     --brand-radius           Border-Radius
     --brand-header-bg / --brand-header-font
     --brand-footer-bg / --brand-footer-font

   Zusaetzlich setzt das Template die Klasse .brand-header-solid auf den body,
   sobald der Kopf eine eigene Hintergrundfarbe hat (siehe unten).

   JEDE Regel hier liest ihre Variable mit dem HEUTIGEN Wert als var()-Fallback.
   Ohne gepflegte Tabelle passiert also nichts — Seiten ohne Branding und die
   fcoe-Seiten (die diese Datei mitbenutzen, aber kein .sps-clickfunnel tragen)
   bleiben unveraendert.

   Abschnitts-Override: die Variablen werden fuer einen Abschnitt per
   #brand-sec-<node_id> neu gesetzt und gelten dann in dessen Teilbaum. Die
   Klassen bg-light / bg-dark-gray / text-light / text-dark (field01/field02 des
   Elements) gehen weiterhin VOR — sie faerben das section-Element direkt, und
   eine Regel am Element schlaegt einen geerbten Wert immer.
   ========================================================================== */

/* --- Flaechen und Schrift ------------------------------------------------- */
body.sps-clickfunnel {
  background: var(--brand-bg, var(--background));
  color: var(--brand-font, var(--foreground));
}

.sps-clickfunnel .bg-default {
  background: var(--brand-bg, var(--background)) !important;
}

/* Ueberschriften: NICHT in hell/dunkel gestellten Abschnitten — dort erzwingt
   main.css (.text-light *) bereits Weiss, und eine Markenfarbe waere dort
   womoeglich unlesbar. Fallback "inherit" ist genau der heutige Zustand. */
.sps-clickfunnel section:not(.text-light):not(.text-dark) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5),
.sps-clickfunnel > .container :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5) {
  color: var(--brand-heading, inherit);
}

/* --- Akzentfarbe ---------------------------------------------------------- */
/* Links: Kopf, Fuss und hell gestellte Abschnitte ausgenommen, die haben ihre
   eigene Schriftfarbe. */
.sps-clickfunnel section:not(.text-light) a:not(.btn):not(.btn-primary),
.sps-clickfunnel > .container a:not(.btn):not(.btn-primary) {
  color: var(--brand-accent, var(--clr-primary));
}

.sps-clickfunnel section ul > li::before {
  color: var(--brand-accent, var(--clr-primary));
}

.sps-clickfunnel .slick-arrow {
  background: var(--brand-accent, var(--clr-primary));
}

.sps-clickfunnel .slick-prev:hover, .sps-clickfunnel .slick-prev:focus,
.sps-clickfunnel .slick-next:hover, .sps-clickfunnel .slick-next:focus {
  background: var(--brand-accent-hover, var(--clr-primary-80));
}

.sps-clickfunnel .access-expired,
.sps-clickfunnel .access-denied {
  border-color: var(--brand-accent, var(--clr-yellow, #f19101));
}

/* Kaestchen und Radios: accent-color faerbt die gefuellte Flaeche des nativen
   Steuerelements, den Haken darin waehlt der Browser kontrastgerecht selbst.
   Fallback "auto" ist der Initialwert, ungebrandet bleibt also die Browserfarbe.
   Betrifft z.B. "Gesehen-Status merken" in der Videobibliothek. Nicht die
   Kaestchen im Webform-Iframe — das ist ein eigenes Dokument, siehe README. */
.sps-clickfunnel input[type=checkbox],
.sps-clickfunnel input[type=radio] {
  accent-color: var(--brand-accent, auto);
}

/* Fokusring auf Eingabefeldern. Ungebrandet transparent, also unsichtbar wie
   bisher; der Browser-Outline bleibt in beiden Faellen erhalten. */
.sps-clickfunnel form input:focus,
.sps-clickfunnel form textarea:focus,
.sps-clickfunnel form select:focus,
.sps-clickfunnel .ui-inputfield:focus {
  box-shadow: 0 0 0 2px var(--brand-accent, transparent);
}

/* --- Border-Radius ------------------------------------------------------- */
/* Buttons: siehe Buttonblock weiter oben (dort steht auch der Radius). */
.sps-clickfunnel form input[type=text],
.sps-clickfunnel form input[type=email],
.sps-clickfunnel form input[type=tel],
.sps-clickfunnel form input[type=password],
.sps-clickfunnel form textarea,
.sps-clickfunnel form select,
.sps-clickfunnel .ui-inputfield {
  border-radius: var(--brand-radius, 0);
}

/* Haken/Checkboxen: wirkt bei den selbst gestalteten Kaestchen (Cookie-Dialog,
   Webform-Styles); native Kaestchen ignorieren border-radius. */
.sps-clickfunnel input[type=checkbox],
.sps-clickfunnel .cc-custom-checkbox {
  border-radius: var(--brand-radius, 0);
}

.sps-clickfunnel .access-expired { border-radius: var(--brand-radius, .35rem); }
.sps-clickfunnel .accordion-item { border-radius: var(--brand-radius, 3px); }

/* Vorschaubilder: Spaltenbilder und die Kacheln der Videobibliothek
   (letztere ueber --vimeo-radius, siehe unten). */
.sps-clickfunnel .container--columns img.img-fluid {
  border-radius: var(--brand-radius, 0);
}

/* --- Kopf ---------------------------------------------------------------- */
.sps-clickfunnel header {
  background: var(--brand-header-bg, transparent);
  color: var(--brand-header-font, inherit);
}

/* Muss NACH der Grundregel stehen und hoeher spezifisch sein, sonst verliert
   der dunkle Zustand beim Scrollen (main.css: header.scrolled). */
.sps-clickfunnel header.scrolled {
  background: var(--brand-header-bg, rgba(0, 0, 0, 0.8));
}

.sps-clickfunnel header a {
  color: var(--brand-header-font, #fff);
}

/* --- Fuss ---------------------------------------------------------------- */
/* !important und der Nachfahrenselektor sind noetig, weil der Fuss die Klassen
   "bg-dark-gray text-light" traegt und main.css mit ".text-light *" die Farbe
   auf JEDES Kindelement schreibt. Fallbacks = heutige Werte (#c5c5c6 kommt aus
   .bg-dark-gray; die Regel .bg-dark-gray.text-light:not(footer) weiter oben
   nimmt den Fuss ausdruecklich aus). */
.sps-clickfunnel footer {
  background: var(--brand-footer-bg, #c5c5c6) !important;
}

/* Der Cookie-Schalter im Fuss behaelt seine eigene Farbe: seine Regel ist per
   ID spezifischer und gewinnt trotz !important auf beiden Seiten. */
.sps-clickfunnel footer,
.sps-clickfunnel footer * {
  color: var(--brand-footer-font, #fff) !important;
}

.sps-clickfunnel footer #btn-cookieconsent-update,
.sps-clickfunnel footer #btn-cookieconsent-update * {
  color: var(--foreground, #999) !important;
}

/* --- Videobibliothek (Element 1392) -------------------------------------- */
/* vimeo.css baut sein ganzes Farbschema auf diesen vier Variablen auf, damit
   sind Filterpillen, Karten, Kacheln, Hover-Vorschau und Detail-Modal dabei.

   DREI Selektoren, und alle drei sind noetig:
     .sps-clickfunnel          fuer die Ebenen, die per JS an <body> gehaengt
                               werden und damit NICHT in .vimeo-library liegen —
                               die Hover-Vorschau (.vimeo-hover) und das
                               Modal/Detailfenster (.vimeo-modal). Genau die
                               blieben sonst violett, weil var(--vimeo-accent)
                               dort auf den Fallback zurueckfaellt.
     .vimeo-library            vimeo.css deklariert die Variablen dort selbst;
                               eine Deklaration am Element schlaegt den geerbten
                               Wert, also muss sie hier ueberstimmt werden.
     .vimeo-hover-inner        deklariert sie aus demselben Grund ebenfalls neu
                               (vimeo.css) und braucht denselben Konter. */
.sps-clickfunnel,
.sps-clickfunnel .vimeo-library,
.sps-clickfunnel .vimeo-hover-inner {
  --vimeo-accent          : var(--brand-accent, var(--clr-secondary, #A64690));
  --vimeo-accent-contrast : var(--brand-accent-fg, var(--clr-secondary-contrast, #fff));
  --vimeo-accent-dark     : var(--brand-accent-hover, #883976);
  --vimeo-radius          : var(--brand-radius, 8px);
}

/* --- Kopf mit eigener Hintergrundfarbe ----------------------------------- */
/* Der Kopf ist fixed-top und liegt damit ueber dem ersten Abschnitt; die
   Abschnitte kompensieren das ueber padding-top. Eine DECKENDE Kopffarbe macht
   diese Ueberdeckung sichtbar, deshalb bekommt der erste Abschnitt hier genau
   die Kopfhoehe als Polsterung (Klasse brand-header-solid, gesetzt sobald
   Spalte 10 gepflegt ist).

   Der Kopf bleibt dabei DAUERHAFT fixiert. Ihn stattdessen in den Fluss zu
   stellen und beim Scrollen zu fixieren, ruckelt zwangslaeufig: beim Umschalten
   auf position:fixed fehlt seine Hoehe ploetzlich im Fluss und der Inhalt
   springt um genau diesen Betrag nach oben — verstaerkt noch dadurch, dass die
   Logos beim Scrollen kleiner werden, die Hoehe sich also im selben Moment
   aendert. Immer fixiert heisst: der Kopf nimmt nie Platz im Fluss ein, die
   Polsterung bleibt konstant, nichts springt. Das Schrumpfen der Logos bewegt
   dann nur noch den Kopf selbst.

   Die Polsterung rechnet mit der UNGESCROLLTEN Kopfhoehe (Logohoehe + 2x15px
   Kopf-Polsterung aus main.css) plus 30px Abstand. Absichtlich nicht mit der
   geschrumpften Hoehe: ein mitwachsender Wert waere wieder eine Bewegung. */
.sps-clickfunnel {
  --header-h: calc(var(--header-logo-h) + 30px);
}

.brand-header-solid header.fixed-top {
  position: fixed !important;    /* schlaegt auch die 599px-Regel weiter oben */
}

.brand-header-solid header + section:first-of-type,
.brand-header-solid header + .container:first-of-type {
  padding-top: calc(var(--header-h) + 30px) !important;
}

@media (max-width: 599px) {
  /* Der Ausgleich fuer den ueberlappenden Kopf entfaellt — das Bild beginnt jetzt
     unter dem Kopf, nicht darunter durch. */
  .brand-header-solid header + section:first-of-type .background-image-container.static {
    margin-top: 0 !important;
  }
}