@charset "utf-8";  

/* 
CSS Document HPK - Layout 21 
Definition Farbschema 
Gelb (#fdcd14) - Dunkelblau (#2e2d58) - Hellblau (#f8f9fc) - Footer Dark
*/


.bg-gradient-dark-translucent {
    background: linear-gradient(91deg, rgb(4 16 59) 0%, rgb(11 25 73 / 0%) 100%) !important;
}

/**********************************************/
/********* Carousel Caption linksbündig ******/
/********************************************/

/* Inhaltsblock nach links statt zentriert */
.carousel-caption.justify-content-center {
    justify-content: flex-start !important;
}

/* Textausrichtung in der Caption erzwingen,
   auch wenn im Markup .text-center gesetzt ist */
.carousel-caption,
.carousel-caption *,
.carousel-caption .text-center {
    text-align: left !important;
}

/* Buttons / Inline-Elemente links ausrichten */
.carousel-caption .btn,
.carousel-caption .d-flex,
.carousel-caption .row,
.carousel-caption .nav,
.carousel-caption ul,
.carousel-caption ol {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Auto-Zentrierung des Innencontainers aufheben */
.carousel-caption .mx-auto,
.carousel-caption > div {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/**********************************************/
/***************** Default, Light ************/
/********************************************/

h1, h2, h3, h4, h5, h6 {
    color: var(--si-navy) !important;
}

section .link-typ1 {
    --si-btn-color: var(--si-navy);
    --si-btn-hover-border-color: var(--si-primary);
}

section .link-typ1:hover {
    background-color: var(--si-primary);
    color: var(--si-navy);
}

.bg-primary .link-typ1:hover {
    background-color: var(--si-primary);
    color: var(--si-navy);
}

.bg-primary .link-typ2 {
    color: rgba(255, 255, 255, 0.9);
}

.bg-primary .link-typ2:hover  {
    color: var(--si-primary);
}

.bg-primary {
    background-color: var(--si-navy) !important;
    color: rgba(255, 255, 255, 0.9);
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6 {
    color: #ffffff !important;
}

img.bg-primary {
    background-color: var(--si-primary) !important;
}

/* Hellblau, fast weiss */
.bg-secondary {
    background-color: var(--si-light-blue) !important;
    color: var(--si-navy);
}

.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary h5,
.bg-secondary h6,
.bg-secondary p,
.bg-secondary li {
    color: var(--si-navy) !important;
}

.bg-secondary .card {
    background-color: #ffffff;
    color: var(--si-navy);
}

.btn-primary {
    --si-btn-color: var(--si-btn-primary-color) !important;
    --si-btn-hover-color: var(--si-btn-primary-color) !important;
    --si-btn-active-color: var(--si-btn-primary-color) !important;
    --si-btn-disabled-color: var(--si-btn-primary-color) !important;
}

footer.footer .btn-primary {
    color: var(--si-btn-primary-color) !important;
}

/* Navigation: dunkelblaue Schrift */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .dropdown-item {
    color: var(--si-navy);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-link.show {
    color: var(--si-navy) !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--si-navy);
    background-color: var(--si-primary-bg-subtle);
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    color: var(--si-navy);
    background-color: var(--si-primary);
}

    

.btn-outline-primary {
    --si-btn-color: var(--si-navy);
    --si-btn-border-color: rgba(var(--si-primary-rgb), 0.45);

    --si-btn-hover-color: var(--si-navy);
    --si-btn-hover-bg: var(--si-primary);
    --si-btn-hover-border-color: var(--si-primary-hover);

    --si-btn-focus-shadow-rgb: var(--si-primary-rgb);

    --si-btn-active-color: var(--si-navy);
    --si-btn-active-bg: var(--si-primary-active);
    --si-btn-active-border-color: var(--si-primary-active);

    --si-btn-active-shadow: unset;

    --si-btn-disabled-color: rgba(var(--si-navy-rgb), 0.5);
    --si-btn-disabled-bg: transparent;
    --si-btn-disabled-border-color: rgba(var(--si-primary-rgb), 0.35);

    --si-gradient: none;
}

.bg-primary .btn-outline-primary {
    --si-btn-color: #ffffff;
    --si-btn-border-color: rgba(255, 255, 255, 0.45);
    --si-btn-hover-color: var(--si-navy);
    --si-btn-hover-bg: var(--si-primary);
    --si-btn-hover-border-color: var(--si-primary);
}

.btn-secondary {
    --si-btn-color: var(--si-navy);
    --si-btn-hover-color: var(--si-navy);
    --si-btn-active-color: var(--si-navy);
    --si-btn-disabled-color: rgba(var(--si-navy-rgb), 0.5);
}

.accordion {
    --si-accordion-color: var(--si-body-color);
    --si-accordion-btn-font-weight: 600;
    --si-accordion-btn-color: var(--si-navy);
    --si-accordion-btn-icon-box-size: 2.25rem;
    --si-accordion-btn-icon-box-border-radius: 50%;
    --si-accordion-btn-icon-box-bg: var(--si-light-blue);
    --si-accordion-btn-icon-box-active-bg: var(--si-primary);
    --si-accordion-btn-icon-box-active-shadow: 0 -0.5rem 1.125rem -0.5rem rgba(var(--si-primary-rgb), 0.9);
}

:root,
[data-bs-theme=light] {
    
    --si-blue: #0d6efd;
    --si-indigo: #6610f2;
    --si-purple: #6f42c1;
    --si-pink: #d63384;
    --si-red: #dc3545;
    --si-orange: #fd7e14;
    --si-yellow: #ffc107;
    --si-green: #198754;
    --si-teal: #20c997;
    --si-cyan: #0dcaf0;
    --si-black: #000;
    --si-white: #fff;
    --si-gray: #999999;
    --si-gray-dark: #3a3a3a;
    --si-gray-100: #f9f9f9;
    --si-gray-200: #f2f2f2;
    --si-gray-300: #e8e8e8;
    --si-gray-400: #d9d9d9;
    --si-gray-500: #b8b8b8;
    --si-gray-600: #999999;
    --si-gray-700: #565656;
    --si-gray-800: #3a3a3a;
    --si-gray-900: #1b1b1b;    

    --si-success: #adeeeb;          
    --si-success-hover: #990000;
    --si-success-active: #800000;

    --si-info: #4c82f7;
    --si-info-hover: #990000;
    --si-info-active: #800000;

    --si-warning: #ffba08;
    --si-warning-hover: #ff6666;
    --si-warning-active: #ff4d4d;

    --si-danger: #e60000;
    --si-danger-hover: #cc0000;
    --si-danger-active: #990000;

    --si-light: #fff;
    --si-light-hover: #f2f2f2;
    --si-light-active: #e6e6e6;

    --si-dark: #1b1b1b;
    --si-dark-hover: #333;
    --si-dark-active: #660000;
    
    /* Hauptfarben */

    /* Dunkelblau + Hellblau aus der Vorlage */
    --si-navy: #2e2d58;
    --si-navy-hover: #3b3a6e;
    --si-navy-dark: #18182d;
    --si-navy-rgb: 46, 45, 88;

    --si-light-blue: #f8f9fc;
    --si-light-blue-hover: #eef0f7;
    --si-light-blue-active: #e2e5ef;

    --si-primary: #fdcd14;
    --si-primary-hover: #ffd947;
    --si-primary-active: #d9ae00;
    --si-primary-light: #fee9a3;

    --si-secondary: #f8f9fc;
    --si-secondary-hover: #eef0f7;
    --si-secondary-active: #e2e5ef;
    --si-secondary-bg-light: #f8f9fc;    

    --si-primary-rgb: 253, 205, 20;
    --si-secondary-rgb: 248, 249, 252;

    --si-primary-text-emphasis: #fdcd14;
    --si-secondary-text-emphasis: var(--si-navy);

    --si-primary-border-subtle: #fee9a3;
    --si-secondary-border-subtle: #e2e5ef;

    --si-gradient-1: #3b3a6e;
    --si-gradient-2: #2e2d58;
    --si-gradient-3: #18182d;
    
    --si-primary-bg-subtle: #fffaea;
    --si-secondary-bg-subtle: #f8f9fc;

    --si-code-color: #fdcd14;
    --si-highlight-color: #ffd947;
    --si-highlight-bg: #fff3cc;
    --si-heading-link-hover-color: #fdcd14;
    --si-heading-link-color: var(--si-navy);

    --si-heading-color: var(--si-navy);

    --si-heading-color2: var(--si-light);
    --si-body-color2: rgba(255, 255, 255, 0.8);
    --si-secondary-bg2: rgba(255, 255, 255, .04);
    --si-card-border-color2: rgba(255, 255, 255, .15);
    --si-primary2: var(--si-primary-hover);
    --si-primary-hover2: var(--si-primary-active);
    --si-primary-active2: var(--si-primary-active);
    
      --si-success-rgb: 173, 238, 235;
      --si-info-rgb: 76, 130, 247;
      --si-warning-rgb: 255, 186, 8;
      --si-danger-rgb: 239, 68, 68;
    --si-light-rgb: 255, 255, 255;
    --si-dark-rgb: 27, 27, 27;
    
    --si-success-text-emphasis: #83E5E1;
    --si-info-text-emphasis: #1B60F5;
    --si-warning-text-emphasis: #D49900;
    --si-danger-text-emphasis: #EB1515;
    --si-light-text-emphasis: var(--si-navy);
    --si-dark-text-emphasis: #1B1B1B;
    
    --si-success-bg-subtle: #F7FDFD;
    --si-info-bg-subtle: #EDF2FE;
    --si-warning-bg-subtle: #FFF8E6;
    --si-danger-bg-subtle: #FDECEC;
    --si-light-bg-subtle: #fff;
    --si-dark-bg-subtle: #EDEDED;
    
    --si-success-border-subtle: #EAFBFA;
    --si-info-border-subtle: #D2E0FD;
    --si-warning-border-subtle: #FFEEC1;
    --si-danger-border-subtle: #FBD0D0;
    --si-light-border-subtle: #e2e5ef;
    --si-dark-border-subtle: #333333;

    --si-body-color: #2e2d58;
    --si-body-color-rgb: 46, 45, 88;
    --si-body-bg: #fff;
    --si-body-bg-rgb: 255, 255, 255;

    --si-link-color: var(--si-navy);
    --si-link-color-rgb: var(--si-navy-rgb);
    --si-link-hover-color: #d9ae00;
    --si-link-hover-color-rgb: 217, 174, 0;

    --si-nav-link-color: var(--si-navy);
    --si-nav-link-hover-color: var(--si-navy);
    --si-nav-link-disabled-color: rgba(var(--si-navy-rgb), 0.4);

    --si-dropdown-link-color: var(--si-navy);
    --si-dropdown-link-hover-color: var(--si-navy);
    --si-dropdown-link-hover-bg: var(--si-primary-bg-subtle);
    --si-dropdown-link-active-color: var(--si-navy);
    --si-dropdown-link-active-bg: var(--si-primary);
    --si-dropdown-link-disabled-color: rgba(var(--si-navy-rgb), 0.4);

    --si-btn-primary-color: var(--si-navy);
    --si-btn-primary-bg: var(--si-primary);
    --si-btn-primary-border: var(--si-primary);
    --si-btn-primary-hover-bg: var(--si-primary-hover);
    --si-btn-primary-hover-border: var(--si-primary-hover);
    --si-btn-primary-active-bg: var(--si-primary-active);
    --si-btn-primary-active-border: var(--si-primary-active);
    --si-btn-primary-disabled-bg: rgba(253, 205, 20, 0.5);
    --si-btn-primary-disabled-border: rgba(253, 205, 20, 0.5);

    --si-btn-secondary-color: var(--si-navy);
    --si-btn-secondary-bg: var(--si-secondary);
    --si-btn-secondary-border: var(--si-secondary-border-subtle);
    --si-btn-secondary-hover-bg: var(--si-secondary-hover);
    --si-btn-secondary-hover-border: var(--si-secondary-hover);
    --si-btn-secondary-active-bg: var(--si-secondary-active);
    --si-btn-secondary-active-border: var(--si-secondary-active);
    --si-btn-secondary-disabled-bg: rgba(248, 249, 252, 0.5);
    --si-btn-secondary-disabled-border: rgba(226, 229, 239, 0.5);

    --si-bx-search-color: var(--si-navy);    
}

/**********************************************/
/**************** Footer Dark ****************/
/********************************************/

#Menu.bg-secondary {
  background-color: var(--si-navy-dark) !important;
  color: #ffffff;
}

#Menu .card {
    background-color: rgba(255, 255, 255, .07);
    color: #ffffff;
    --si-border-color: rgba(255, 255, 255, 0.14)
}


#Menu .card a {
    color: #ffffff;
}

#Menu .card a:hover {
    color: var(--si-primary);
}

#Menu .card .btn-outline-primary {
    color: #ffffff;
    border-color: #ffffff;
}

#Menu .card .btn-outline-primary:hover {
    background-color: var(--si-primary);
    border-color: var(--si-primary);
    color: var(--si-navy);
}

footer.footer {

  --si-body-bg: #18182d;
  --si-body-color: rgba(255, 255, 255, 1);

  --si-gray-600: rgba(255, 255, 255, 0.55);
  --si-gray-700: rgba(255, 255, 255, 0.75);
  --si-gray-800: rgba(255, 255, 255, 0.9);

  --si-secondary-bg: rgba(255, 255, 255, 0.07);
  --si-secondary-bg-subtle: #2e2d58;

  background-color: var(--si-body-bg);
  color: var(--si-body-color);
}

footer.footer h1,
footer.footer h2,
footer.footer h3,
footer.footer h4,
footer.footer h5,
footer.footer h6 {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer.footer .text-dark {
  color: var(--si-body-color) !important;
}

footer.footer a,
footer.footer .nav-link {
  color: var(--si-gray-800);
}

footer.footer a:hover,
footer.footer .nav-link:hover {
  color: var(--si-primary);
}

footer.footer .btn-primary:hover {
    color: var(--si-btn-primary-color);
}

footer.footer h6,
footer.footer h6 a {
  color: rgba(255, 255, 255, 0.9);
}

footer.footer.bg-secondary {
  background-color: #18182d !important;
}

footer.footer .btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

footer.footer .text-muted {
  color: rgba(255, 255, 255, 0.55) !important;
}

footer.footer hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/**********************************************/
/***************** Dark **********************/
/********************************************/

[data-bs-theme=dark] {
    
    color-scheme: dark;    
    
    --si-gray-600: rgba(255, 255, 255, .5);
    --si-gray-700: rgba(255, 255, 255, .7);
    --si-gray-800: rgba(255, 255, 255, .85);
    --si-gray-900: #fff;
    --si-secondary-bg: rgba(255, 255, 255, .07);
    --si-heading-color: #ffffff;
    --si-heading-link-color: rgba(255, 255, 255, 0.85);
    --si-heading-link-hover-color: var(--si-primary-hover);
    --si-code-color: #ffd947;
        
    --si-body-color: rgba(255, 255, 255, 0.9);
    --si-body-color-rgb: 255, 255, 255;
    --si-body-bg: #18182d;
    --si-body-bg-rgb: 24, 24, 45;

    --si-primary-text-emphasis: #ffe073;
    --si-secondary-text-emphasis: rgba(255, 255, 255, 0.85);
    --si-success-text-emphasis: #66ffff;
    --si-info-text-emphasis: #4d8dff;
    --si-warning-text-emphasis: #ffcc66;
    --si-danger-text-emphasis: #ff4d4d;
    --si-light-text-emphasis: #ffffff;
    --si-dark-text-emphasis: #d95c1b;

    --si-primary-bg-subtle: #332905;
    --si-secondary-bg-subtle: #2e2d58;
    --si-success-bg-subtle: #660000;
    --si-info-bg-subtle: #800000;
    --si-warning-bg-subtle: #993333;
    --si-danger-bg-subtle: #b30000;
    --si-light-bg-subtle: #260000;
    --si-dark-bg-subtle: #0d0000;

    --si-primary-border-subtle: #ffe073;
    --si-secondary-border-subtle: #3b3a6e;
    --si-success-border-subtle: #ff3333;
    --si-info-border-subtle: #ff4d4d;
    --si-warning-border-subtle: #ff8080;
    --si-danger-border-subtle: #ff0000;
    --si-light-border-subtle: #3b3a6e;
    --si-dark-border-subtle: #3b3a6e;

    --si-link-color: #ffe073;
    --si-link-hover-color: #fff0b3;
    --si-link-color-rgb: 255, 224, 115;
    --si-link-hover-color-rgb: 255, 240, 179;

    --si-nav-link-color: rgba(255, 255, 255, 0.85);
    --si-nav-link-hover-color: var(--si-primary);

    --si-btn-primary-color: var(--si-navy);
    --si-btn-primary-bg: var(--si-primary);
    --si-btn-primary-border: var(--si-primary);
    --si-btn-primary-hover-bg: var(--si-primary-hover);
    --si-btn-primary-hover-border: var(--si-primary-hover);
    --si-btn-primary-active-bg: var(--si-primary-active);
    --si-btn-primary-active-border: var(--si-primary-active);
    --si-btn-primary-disabled-bg: var(--si-primary);
    --si-btn-primary-disabled-border: var(--si-primary);

    --si-bx-search-color: #b3b3b3;

    --si-heading-color2: var(--si-light);
    --si-body-color2: rgba(255, 255, 255, 0.9);
    --si-secondary-bg2: rgba(255, 255, 255, .04);
}