:root {
    /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
    --base-fontsize: 1.15rem;
  
    /* Major third scale progression - see https://type-scale.com/ */
    --header-scale: 1.25;
  
    /* Line height is set to the "Golden ratio" for optimal legibility */
    --line-height: 1.618;
  
    /* Default (light) theme */
    --primary: #32374e; 
    --primary-400: #464d66;
    --secondary: #f3c600;
    --secondary-400: #eace5c;
    --secondary-dark: #c59e04;
    --paperwhite: #fffcf7;
    --grey: #4d4c4c;
    --grey-light: #b8b6b6;
    --btn-line-height: 0.5rem;

    --nav-link-font-size: 0.8rem;
  
  }
  
  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root {
    --primary: #32374e; 
    --primary-400: #464d66;
    --secondary: #f3c600;
    --secondary-400: #eace5c;
    --paperwhite: #fffcf7;
    --grey: #4d4c4c;
    }
  
   
  }

  .btn-light {
    --btn-color: var(--paperwhite);
    --btn-bg: var(--secondary-400);
    --btn-border-color: var(--secondary-400);
    --btn-hover-color: var(--paperwhite);
    --btn-hover-bg: var(--secondary);
    --btn-hover-border-color: var(--gray-500);
    --btn-focus-shadow-rgb: 207, 207, 209;
    --btn-active-color: var(--body-color);
    --btn-active-bg: var(--gray-400);
    --btn-active-border-color: var(--gray-600);
    --btn-active-shadow: inset 0 0 0 0 transparent;
    --btn-disabled-color: var(--body-color);
    --btn-disabled-bg: var(--gray-200);
    --btn-disabled-border-color: var(--gray-400);
}

.btn-primary {
    --btn-color: var(--paperwhite);
    --btn-bg: var(--primary-400);
    --btn-border-color: var(--primary-400);
    --btn-hover-color: var(--paperwhite);
    --btn-hover-bg: var(--primary);
    --btn-hover-border-color: var(--primary);
    --btn-focus-shadow-rgb: 48, 150, 255;
    --btn-active-color: var(--paperwhite);
    --btn-active-bg: var(--primary);
    --btn-active-border-color: var(--primary);
    --btn-active-shadow: inset 0 0 0 0 transparent;
    --btn-disabled-color: var(--paperwhite);
    --btn-disabled-bg: var(--primary-400);
    --btn-disabled-border-color: var(--primary-400);
}


.pt-form-input {
    appearance: none;
    display: block;
    width: 100%;
    background-color: white;
    margin: 0.5rem 0;
    line-height: 1.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid var(--grey-light);
    border-radius: 0.2rem;
    font-family: inherit;
}

.pt-form-input:focus {
    background-color: var(--secondary);
    color: var(--paperwhite);
    border:  0.0625rem solid var(--secondary);
    outline: none!important;
}

.pt-form-input:focus::placeholder {
    color: var(--paperwhite);
}

.pt-card-course > .card:nth-child(1) {
  background: #483C46;
  margin-right: 1.5rem;
  border-radius: 0.3rem;
}

.pt-card-course > .card:nth-child(2) {
  background: #3C6E71;
  border-radius: 0.3rem;
}

.pt-card-course > .card:nth-child(3) {
  background: #70AE6E;
  margin-left: 1.5rem;
  border-radius: 0.3rem;
}


.pt-cat_btn {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0 -0.5rem;
  justify-content: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

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


.cardLists{
  padding-left: 20px;
}
.pt-card {
  width: 18rem;
  border-radius: 0.3rem;

  margin: 10px 5px;
 }

 @media screen and (max-width: 500px) {
  .pt-card {
    width: 17.75rem;
    border-radius: 0.3rem;
    margin: 10px 0px 10px 0.35rem;
   }
   .navbar-brand {
     margin-left: 1.25rem !important;
   }
  }
  @media screen and (min-width: 800px) and (max-width: 900px) {
    .pt-card {
      width: 18.75rem;
      border-radius: 0.3rem;
      margin: 10px 1.3rem 10px 0.35rem !important;
     }
     .navbar-brand {
       margin-left: 1.25rem !important;
     }
    }

    @media screen and ((min-width: 1080px) and (max-width: 1200px)) {
      .pt-card {
        width: 17rem;
        border-radius: 0.3rem;
        margin: 10px 1.3rem 10px 0.35rem !important;
       }
       .navbar-brand {
         margin-left: 1.25rem !important;
       }
    }

    @media screen and (min-width: 1200px) {
      .pt-card {
        width: 18.35rem;
        border-radius: 0.3rem;
        margin: 10px 0.75rem 10px 0.35rem !important;
       }
       .navbar-brand {
         margin-left: 1.25rem !important;
       }
    }




.ftco-section img {
  max-width: 100%;
  height: auto;
}

.card-img {
   border-top-right-radius: 0.3rem; 
   border-top-left-radius: 0.3rem;  
  }

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

.btn {
  line-height: 1rem !important;
  border-radius: 0.3rem;
}

.btn-secondary {
  --btn-color: var(--grey);
  --btn-bg: var(--grey-light);
  --btn-border-color: var(--grey-light);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--secondary);
  --btn-hover-border-color: var(--secondary);
  --btn-focus-shadow-rgb: 69, 135, 167;
  --btn-active-color: #fff;
  --btn-active-bg: #1f6180;
  --btn-active-border-color: #1f6180;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #247297;
  --btn-disabled-border-color: #247297;
}

.btn-outline-secondary {
  --btn-color: var(--paperwhite);
  --btn-border-color: var(--secondary);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--secondary-400);
  --btn-hover-border-color: var(--secondary);
  --btn-focus-shadow-rgb: 36, 114, 151;
  --btn-active-color: #fff;
  --btn-active-bg: var(--secondary);
  --btn-active-border-color: var(--secondary);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: var(--secondary);
  --btn-disabled-bg: transparent;
  --gradient: none;
  background-color: var(--secondary);
}

.btn-outline-primary {
  --btn-color: var(--paperwhite);
  --btn-border-color: var(--primary);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--primary-400);
  --btn-hover-border-color: var(--primary);
  --btn-focus-shadow-rgb: 36, 114, 151;
  --btn-active-color: #fff;
  --btn-active-bg: var(--primary);
  --btn-active-border-color: var(--primary);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: var(--primary);
  --btn-disabled-bg: transparent;
  --gradient: none;
  background-color: var(--primary);
}

.btn-outline-grey {
  --btn-color: var(--paperwhite);
  --btn-border-color: var(--gray-500);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--primary-400);
  --btn-hover-border-color: var(--primary);
  --btn-focus-shadow-rgb: 36, 114, 151;
  --btn-active-color: #fff;
  --btn-active-bg: #1f6282;
  --btn-active-border-color: #247297;
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: #247297;
  --btn-disabled-bg: transparent;
  --gradient: none;
  background-color: var(--gray-500);
}

.form-check-input {
  --form-check-input-width: 1.25rem;
  --form-check-input-height: 1.25rem;
  --form-check-input-bg: var(--white);
  --form-check-input-border: calc(var(--border-width) * 2) solid var(--gray-400);
  --form-check-input-border-radius: 0.1875em;
  --form-check-input-focus-border: var(--component-active-bg);
  --form-check-input-focus-box-shadow: var(--focus-ring-box-shadow);
  --form-check-input-checked-bg-color: var(--secondary);
  --form-check-input-checked-border-color: transparent;
  --form-check-input-disabled-opacity: 0.5;
  --form-check-input-indeterminate-bg-color: var(--component-active-bg);
  --form-check-input-indeterminate-border-color: transparent;
  --form-check-checked-bg-color-rgb: var(--component-active-bg-rgb);
  --form-check-checked-border-color: transparent;
  --form-check-radio-border-radius: 100rem;
  width: var(--form-check-input-width);
  height: var(--form-check-input-height);
  margin-top: calc((var(--body-line-height) - var(--form-check-input-height)) * 0.5);
  vertical-align: top;
  background-color: var(--form-check-input-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: var(--form-check-input-border);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  transition: box-shadow var(--transition-base-timer) ease-in-out, border-color var(--transition-base-timer) ease-in-out, background-color var(--transition-base-timer) ease-in-out;
}

.pt-message {
  background-color: rgba(var(--black-rgb), 0.035);
}
.modal-backdrop {
  z-index: -1;
}

.pt-log-img {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius:0.25rem;
}

.page-link {
  min-width: calc(var(--pagination-font-size) * var(--body-line-height) + var(--pagination-border-width) * 1 + var(--pagination-padding-y) * 1);
  text-align: center;
  }

.page-link {
  position: relative;
  display: block;
  padding: 0;
  font-size: var(--pagination-font-size);
  color: var(--pagination-color);
  background-color: var(--pagination-bg);
  border: var(--pagination-border-width) solid var(--pagination-border-color);
  transition: color var(--transition-base-timer) ease-in-out, background-color var(--transition-base-timer) ease-in-out, border-color var(--transition-base-timer) ease-in-out, box-shadow var(--transition-base-timer) ease-in-out;
  }

  .page-link:hover {
    z-index: 2;
    color: var(--paperwhite);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.active > .page-link, .page-link.active {
  z-index: 3;
  color: var(--paperwhite);
  background-color: var(--primary);
  border-color: var(--primary);
}

.pt-standard-card {
  margin: 1rem 1rem;
  
}

.pt-card-body {
  padding: 1rem 0 0 0;
  font-weight: 300;
  font-size: 0.9rem;
}

a.pt-link-green:link {color: #059669;}
a.pt-link-green:visited {color: #059669;}
a.pt-link-green:hover {color: #f6955d;}

a.pt-link-white:link {color: #fefefe;}
a.pt-link-white:visited {color: #fefefe;}
a.pt-link-white:hover {color: #cecece;}

a.pt-link-red:link {color: #ef4444 !important;}
a.pt-link-red:visited {color: #ef4444;}
a.pt-link-red:hover {color: #f6955d;}

a.pt-link-grey:link {color: #747373 !important;}
a.pt-link-grey:visited {color: #747373;}
a.pt-link-grey:hover {color: #f6955d;}

.bg-purpur { background-color: #534a52; } 
.bg-oliveLight { background-color: #afae5d; }  
.bg-beige { background-color: #dcbf93; } 
.bg-lachs { background-color: #eda591; } 
.bg-braun { background-color: #81612f; } 
.bg-wein { background-color: #81362f; }
.bg-stahl { background-color: #607e95; }   

.btn-coockie {
  --btn-color: var(--primary);
  --btn-border-color: var(--secondary);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--secondary-400);
  --btn-hover-border-color: var(--secondary);
  --btn-focus-shadow-rgb: 36, 114, 151;
  --btn-active-color: #fff;
  --btn-active-bg: var(--secondary);
  --btn-active-border-color: var(--secondary);
  --btn-active-shadow: inset 0 0 0 0 transparent;
  --btn-disabled-color: var(--secondary);
  --btn-disabled-bg: transparent;
  --gradient: none;
  background-color: var(--secondary);
}

#cookie-popup { 
  text-align: center; 
  background: var(--primary);
  position: fixed;
  color: var(--paperwhite);
  top: 0px; 
  left: 0;
  right: 0;
  z-index: 9999;
  font-size:14px; 
  line-height:20px;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }
 
#cookie-popup.hidden {
  display: none;
}

a.datenschutz:link {color: #000; font-weight: bold;}
a.datenschutz:visited {color: #000; font-weight: bold;}
a.datenschutz:hover {color: #21741e;}

.pt-info-ul {
  background: red;
}