/*.sticky-top {position: -webkit-sticky; position: sticky;top: 0; z-index: 10; /*sonst dropdown Fehler von Icon Light/Dark*/}
.white {color:#fff!IMPORTANT}
[data-bs-theme=light] .white-colormode {color:#fff;}
[data-bs-theme=dark] .white-colormode {color:#fff;}

.hellblau  {background-color:#f2f4f9!IMPORTANT}
.form-control {padding: 0.2em 0.2em; font-size: 0.90rem;}

/*footer-sockel Korrekture Unterstrich*/
.link-underline-light {--bs-link-underline-opacity: 0.25; -webkit-text-decoration-color: rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity)) !important; text-decoration-color: rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity)) !important;}
  
.bd-placeholder-img {font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
.b-example-divider {width: 100%; height: 3rem; background-color: rgba(0, 0, 0, .1); border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);}
.b-example-vr {flex-shrink: 0; width: 1.5rem; height: 100vh;}
.nav-scroller {position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden;}
.nav-scroller .nav {display: flex; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; text-align: center; white-space: nowrap;-webkit-overflow-scrolling: touch;}
/*.bd-mode-toggle {z-index: 1500;}*/


/*FANCY SVG Übergänge*/
.fancy-svg-background svg {width: calc(100%);left: 0;height: 100%;position: relative;display: block;}
.fancy-svg-gedreht {transform: rotate(180deg);}



/*ICONS*/
.bi {vertical-align: -.050em; fill: currentColor;}
.bi.theme-icon-active {vertical-align: -0.125em!IMPORTANT;fill: currentColor;}/*Darkmode-Swither-Icon*/
.rwt-icon-text {padding-right: 3px!IMPORTANT;}
.rwt-icon-footer {font-size: 0.70rem!IMPORTANT; vertical-align: 0.100em!IMPORTANT;}
.rwt-icon-smaller {font-size: 0.75rem!IMPORTANT; vertical-align: 0.100em!IMPORTANT;}
.rwt-icon-smaller-topnav {font-size: 0.75rem!IMPORTANT; vertical-align: 0em!IMPORTANT;}




/* MENU Einstellungen  
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/

.nav-link {display: block; padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); font-size:0.90em}

.navbar-nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-navbar-color);
    /*--bs-nav-link-hover-color: var(--bs-navbar-hover-color);*/
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    list-style: none;
  }
.navbar-nav .nav-link.active, .navbar-nav  { color: #fff;  } /*.nav-link.show*/

.offcanvas-header {padding-left: 30px;}

/*färbt ein, Menüpunkt*/
.nav-pills {--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0073cf;}

.dropdown-menu .nav-link:hover {font-size: 40px!IMPORTANT; --bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#eb0125!IMPORTANT;}

#navbar-topnav {font-size:0.8em;} /*Schriftgröße oben in der Topnav-Zeile*/


/* Macht Dropdown bei HOVER sichtbar beeinfluss aber die Funktion dropdown letzter Menüpunkt*/
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu{ display: none; }
.navbar .nav-item:hover .nav-link {background:#0073cf;color: #ffffff} 
.navbar .nav-item:hover .dropdown-menu{ display: block;}

.navbar .nav-item .dropdown-menu{ margin-top:0; }
#navbar-topnav .dropdown-item  {font-size:0.9em!IMPORTANT }
#navbar-topnav .nav-link:hover {background: transparent!IMPORTANT; color: #ffffff} 
}


/* Alternative ohne HOVER 2.ebene, aber dafür steht kein Dropdown außerhalb des Bildschirms	
@media all and (min-width: 768px) {
.navbar .nav-item:hover .nav-link {background:#0073cf;color: #ffffff} 
.navbar .nav-item .dropdown-menu{ margin-top:0; }
#navbar-topnav .dropdown-item  {font-size:0.9em!IMPORTANT }
#navbar-topnav .nav-link:hover {background: transparent!IMPORTANT; color: #ffffff} 
}
*/
@media all and (max-width: 992px) {
.nav-link {font-size:1.10em}
#navbar-topnav {font-size:1em;} /*Schriftgröße oben in der Topnav-Zeile*/
/*Wenn das Menü collapse ist, dann soll die Schrift in der Sidebar etwas größer als normal*/
.navbar .nav-item {font-size:1.1em!IMPORTANT }
.navbar .nav-item .dropdown-menu{ font-size:1em!IMPORTANT}
#navbar-topnav .dropdown-item  {font-size:0.9em!IMPORTANT }
/*NOT IN USE #navbar-topnav .navbar .nav-item:hover .nav-link {background: #eb0128!IMPORTANT;} /*färbt die 1. Ebene bei hover ein, wenn dropdown benutzt wird*/
.dropdown-item {padding: 10px 10px 10px 16px;border-radius:0px;}
.form-control {padding: 0.6em 0.8em;font-size: 1rem;}
}	

/*3.Ebene Menü*/
.dropdown-menu {padding:8px 8px}
.dropdown-menu li {position: relative;}
.dropdown-menu .dropdown-submenu {display: none!IMPORTANT;position: absolute;left: 100%;top: -7px;}
.dropdown-menu .dropdown-submenu-left {right: 100%;left: auto;}
.dropdown-menu > li:hover > .dropdown-submenu {display: block!IMPORTANT;}
  /* #################################################*/

.dropdown-item.active, .dropdown-item:active {color: #fff;text-decoration: none;background-color:  rgb(0, 115, 207, 0.8)/*#0073cf*/; border-radius: .25rem;}
.offcanvas .nav-item a:hover {background:#0073cf; color:#fff!IMPORTANT; border-radius:5px}

.dropdown-item {padding: 10px 15px 10px 15px;border-radius:0px;}
.dropdown-item:hover {border-radius:0.25em!IMPORTANT;}


/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
/* ENDE CAROUSEL 
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/




/* START SUCHE / SUCHBOX 
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/
.search-box{
  width: fit-content;
  height: fit-content;
  position: relative;
  
}
.input-search{
  height: 40px;
  width: 40px;
  border-style: none;
  padding: 10px;
  font-size: 17px;
  letter-spacing: 0px;
  outline: none;
  /*border-radius: 25px;*/
  transition: all .5s ease-in-out;
  /*background-color: #22a6b3;*/
  background-color: transparent;
  padding-right: 40px;
  color:#fff;
}
.input-search::placeholder{
  color:rgba(255,255,255,1);
  font-size: 16px;
  letter-spacing: 0.5px;
  font-weight: 400;margin-left: 20px;
}
.btn-search{
  width: 40px;
  height: 40px;
  border-style: none;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  /*border-radius: 50%;*/
  position: absolute;
  right: 0px;
  color:#e1e1e1;
  background-color:transparent;
  pointer-events: painted;  
}
/* ausgeschaltet weil die Bauweise nicht mit form funktioniert, es muss doch eine java Komponente installiert werden.
.btn-search:focus ~ .input-search{
  width: 200px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,1);
  margin-left: 20px;
}
.input-search:focus{
  width: 200px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  margin-left: 20px;
}*/

/* ENDE SUCHE / SUCHBOX
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/






/* Backgrounds beispielhaft und zur weiteren Ergänzung
/* #############################################################################################*/
.bg-blue {background-color:hsla(230, 100%, calc(56% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-indigo {background-color:hsla(263, 90%, calc(51% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-purple {background-color:hsla(261, 51%, calc(51% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-pink {background-color:hsla(330, 67%, calc(52% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-red {background-color:hsla(354, 70%, calc(54% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-orange {background-color:hsla(27, 98%, calc(54% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-yellow {background-color:hsla(45, 100%, calc(51% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-green {background-color:hsla(152, 69%, calc(31% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-teal {background-color:hsla(162, 73%, calc(46% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-cyan {background-color:hsla(190, 90%, calc(50% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-white {background-color:hsla(0, 0%, calc(100% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-gray-dark {background-color:hsla(210, 10%, calc(23% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-navy {background-color:hsla(210, 100%, calc(12% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-maroon {background-color:hsla(331, 74%, calc(30% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-brown {background-color:hsla(28, 28%, calc(39% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-magenta {background-color:hsla(314, 88%, calc(51% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-lime {background-color:hsla(146, 100%, calc(50% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
.bg-black {background-color:hsla(0, 0%, calc(0% * var(--tor-bg-lightness, 1)), var(--tor-bg-opacity, 1)) !important}
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/



/* ROOT Einstellungen für Buttons, LIGHT und DARK MODE 
/* #############################################################################################*/
/* #############################################################################################*/
/* #############################################################################################*/

  .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0067BC;
    --bs-btn-border-color: #0067BC;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #014a93;
    --bs-btn-hover-border-color: #014a93;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
  }
  [data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: #ffffff;
  }

  .btn-outline-primary {
    --bs-btn-color: #0067BC;
    --bs-btn-border-color: #0067BC;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #014a93;
    --bs-btn-hover-border-color: #014a93;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
  }

  .btn-secondary {
    --bs-btn-color: #222222;
    /*--bs-btn-bg: #6c757d;*/
    --bs-btn-bg: #479ADE;
    --bs-btn-border-color: #479ADE;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #014a93;
    --bs-btn-hover-border-color: #014a93;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0067BC;
    --bs-btn-active-border-color: #0067BC;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
  }
  .btn-outline-secondary {
    --bs-btn-color: #222222;
    --bs-btn-border-color: #479ADE;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #014a93;
    --bs-btn-hover-border-color: #014a93;
    --bs-btn-focus-shadow-rgb: 108,117,125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
  }
  [data-bs-theme=dark] 
  .btn-outline-secondary {
    --bs-btn-color: #ffffff;
  }

  .btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #EBA430;
    --bs-btn-border-color: #EBA430;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
  }
  .btn-outline-warning {
    --bs-btn-color: #C35009;
    --bs-btn-border-color: #C35009;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #C35009;
    --bs-btn-hover-border-color: #C35009;
    --bs-btn-focus-shadow-rgb: 255,193,7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffc107;
    --bs-gradient: none;
  }

  .btn-outline-info {
    --bs-btn-color: #595959;
    --bs-btn-border-color: #595959;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0dcaf0;
    --bs-btn-hover-border-color: #0dcaf0;
    --bs-btn-focus-shadow-rgb: 13,202,240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0dcaf0;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0dcaf0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0dcaf0;
    --bs-gradient: none;
  }

 [data-bs-theme=dark] 
  .btn-outline-info {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: #111111;
  }

:root,
[data-bs-theme=light] {
  --bs-blue: #014a93;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #014a93!IMPORTANT;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1.1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  /* --bs-secondary-color: rgba(140, 37, 41, 0.75)!IMPORTANT;*/
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  /*--bs-tertiary-bg-rgb: 248, 249, 250;*/
  --bs-tertiary-bg-rgb: 242, 244, 249;
  --bs-heading-color: inherit;
  --bs-link-color: #014a93!IMPORTANT;
  --bs-link-color-rgb: 1, 74, 176;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #016bd6!IMPORTANT;
  --bs-link-hover-color-rgb: 1, 74, 176;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 2px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #f7f7f7;
    --bs-body-color-rgb: 173, 181, 189;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(173, 181, 189, 0.75);
    --bs-secondary-color-rgb: 173, 181, 189;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(173, 181, 189, 0.5);
    --bs-tertiary-color-rgb: 173, 181, 189;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
  }
 

  
@media (max-width: 767px) {
  .abstand-top-null {margin-top: 0px}
  .abstand-top-xs   {margin-top: 20px }  
  .abstand-top-s    {margin-top: 30px}  /* DEFAULT-Wert macht Sinn? */
  .abstand-top-m    {margin-top: 20px}
  .abstand-top-l    {margin-top: 40px}
  .abstand-top-xl   {margin-top: 60px}
  .abstand-top-xxl  {margin-top: 80px}

  .abstand-bottom-null {margin-bottom: 0px}
  .abstand-bottom-xs   {margin-bottom: 20px }  
  .abstand-bottom-s    {margin-bottom: 30px}  /* DEFAULT-Wert macht Sinn? */
  .abstand-bottom-m    {margin-bottom: 20px}
  .abstand-bottom-l    {margin-bottom: 40px}
  .abstand-bottom-xl   {margin-bottom: 60px}
  .abstand-bottom-xxl  {margin-bottom: 80px}
}

@media (min-width: 768px) {
  .abstand-top-null {margin-top: 0px}
  .abstand-top-xs   {margin-top: 20px }  /* DEFAULT-Wert macht Sinn? */
  .abstand-top-s    {margin-top: 30px}
  .abstand-top-m    {margin-top: 20px}
  .abstand-top-l    {margin-top: 40px}
  .abstand-top-xl   {margin-top: 60px}
  .abstand-top-xxl  {margin-top: 80px}

  .abstand-bottom-null {margin-bottom: 0px}
  .abstand-bottom-xs   {margin-bottom: 20px }  
  .abstand-bottom-s    {margin-bottom: 30px}  /* DEFAULT-Wert macht Sinn? */
  .abstand-bottom-m    {margin-bottom: 30px}
  .abstand-bottom-l    {margin-bottom: 40px}
  .abstand-bottom-xl   {margin-bottom: 60px}
  .abstand-bottom-xxl  {margin-bottom: 80px}
  }

@media (min-width: 992px) {
  .abstand-top-null {margin-top: 0px}
  .abstand-top-xs   {margin-top: 20px }  /* DEFAULT-Wert macht Sinn? */
  .abstand-top-s    {margin-top: 30px}
  .abstand-top-m    {margin-top: 40px}
  .abstand-top-l    {margin-top: 60px}
  .abstand-top-xl   {margin-top: 80px}
  .abstand-top-xxl  {margin-top: 100px}

  .abstand-bottom-null {margin-bottom: 0px}
  .abstand-bottom-xs   {margin-bottom: 20px }  
  .abstand-bottom-s    {margin-bottom: 30px}  /* DEFAULT-Wert macht Sinn? */
  .abstand-bottom-m    {margin-bottom: 40px}
  .abstand-bottom-l    {margin-bottom: 60px}
  .abstand-bottom-xl   {margin-bottom: 80px}
  .abstand-bottom-xxl  {margin-bottom: 100px}
}

@media (min-width: 1200px) {
  .abstand-top-null {margin-top: 0px}  /* DEFAULTWERT für oben */
  .abstand-top-xs   {margin-top: 30px }  
  .abstand-top-s    {margin-top: 40px}
  .abstand-top-m    {margin-top: 60px}
  .abstand-top-l    {margin-top: 80px}
  .abstand-top-xl   {margin-top: 100px}
  .abstand-top-xxl  {margin-top: 120px}

  .abstand-bottom-null {margin-bottom: 0px}
  .abstand-bottom-xs   {margin-bottom: 30px }  
  .abstand-bottom-s    {margin-bottom: 40px} /* DEFAULT-Wert für unten */
  .abstand-bottom-m    {margin-bottom: 60px}
  .abstand-bottom-l    {margin-bottom: 80px}
  .abstand-bottom-xl   {margin-bottom: 100px}
  .abstand-bottom-xxl  {margin-bottom: 120px}
}

@media (min-width: 1400px) {
  .abstand-top-null {margin-top: 0px} /* DEFAULTWERT für oben */
  .abstand-top-xs   {margin-top: 30px }  
  .abstand-top-s    {margin-top: 40px}
  .abstand-top-m    {margin-top: 60px}
  .abstand-top-l    {margin-top: 80px!IMPORTANT}
  .abstand-top-xl   {margin-top: 100px!IMPORTANT}
  .abstand-top-xxl  {margin-top: 120px!IMPORTANT}

  .abstand-bottom-null {margin-bottom: 0px}
  .abstand-bottom-xs   {margin-bottom: 30px }  
  .abstand-bottom-s    {margin-bottom: 40px} /* DEFAULT-Wert für unten */
  .abstand-bottom-m    {margin-bottom: 60px}
  .abstand-bottom-l    {margin-bottom: 80px!IMPORTANT}
  .abstand-bottom-xl   {margin-bottom: 100px!IMPORTANT}
  .abstand-bottom-xxl  {margin-bottom: 120px!IMPORTANT}
}


/*######################################################################################*/
/*######################################################################################*/



.padding-top-1 {padding-top: 10px}
.padding-top-2 {padding-top: 20px}
.padding-top-3 {padding-top: 30px}
.padding-top-4 {padding-top: 40px}
.padding-top-5 {padding-top: 50px}
.padding-top-6 {padding-top: 60px}
.padding-top-7 {padding-top: 70px}
.padding-top-8 {padding-top: 80px}
.padding-top-9 {padding-top: 90px}
.padding-top-10 {padding-top: 100px}
.padding-top-11 {padding-top: 110px}
.padding-top-12 {padding-top: 120px}

.padding-bottom-1 {padding-bottom: 10px}
.padding-bottom-2 {padding-bottom: 20px}
.padding-bottom-3 {padding-bottom: 30px}
.padding-bottom-4 {padding-bottom: 40px}
.padding-bottom-5 {padding-bottom: 50px}
.padding-bottom-6 {padding-bottom: 60px}
.padding-bottom-7 {padding-bottom: 70px}
.padding-bottom-8 {padding-bottom: 80px}
.padding-bottom-9 {padding-bottom: 90px}
.padding-bottom-10 {padding-bottom: 100px}
.padding-bottom-11 {padding-bottom: 110px}
.padding-bottom-12 {padding-bottom: 120px}

.margin-top-1 {margin-top: 10px}
.margin-top-2 {margin-top: 20px}
.margin-top-3 {margin-top: 30px}
.margin-top-4 {margin-top: 40px}
.margin-top-5 {margin-top: 50px}
.margin-top-6 {margin-top: 60px}
.margin-top-7 {margin-top: 70px}
.margin-top-8 {margin-top: 80px}
.margin-top-9 {margin-top: 90px}
.margin-top-10 {margin-top: 100px}
.margin-top-11 {margin-top: 110px}
.margin-top-12 {margin-top: 120px}

.margin-bottom-1 {margin-bottom: 10px}
.margin-bottom-2 {margin-bottom: 20px}
.margin-bottom-3 {margin-bottom: 30px}
.margin-bottom-4 {margin-bottom: 40px}
.margin-bottom-5 {margin-bottom: 50px}
.margin-bottom-6 {margin-bottom: 60px}
.margin-bottom-7 {margin-bottom: 70px}
.margin-bottom-8 {margin-bottom: 80px}
.margin-bottom-9 {margin-bottom: 90px}
.margin-bottom-10 {margin-bottom: 100px}
.margin-bottom-11 {margin-bottom: 110px}
.margin-bottom-12 {margin-bottom: 120px}