/* CSS Document */

/********** FARBEN **********/

:root {
    --vs-footer: #0e182a; 
    --vs-dark: #0e182a;
    --vs-light: #ebf4fa;
    --bg-nh: #586785;
    --vs-blue1: #a8c5e5;
    --vs-gelb1: #ffe566;
    --vs-gelb2: #f7e182;
    --vs-gelb3: #f8ea44;
    --vs-blut: #760715; 
    --vs-rot1: #b72a43;
    --vs-rot2: #d07e7f;
    --vs-rot3: #ebd0cb;
    --vs-rot4: #f8f0ee;        
}

/************** FARBEN ****************/

/* das gleiche wie vs-dark */
.vs-footer {
  background-color: var(--vs-footer);
  }

/* das dark Text */
.vs-text-dark {
  color: var(--vs-dark);
  }

/* Text hellblau statt weiss */
.vs-text-light  {
  color: var(--vs-light);
  }  
    
.text-inverse  {
  color: var(--vs-light) !important;
  }  
   
.vs-bg-dark {
  background-color: var(--vs-dark);
  }  

.vs-bg-light {
  background-color: var(--vs-light);
  } 

/* Produkt HG und Farbe für Infotexte */  
.vs-bg-blue1 {
  background-color: var(--vs-blue1);
  }                    

.navbar-bg-dark {
  background-color: var(--vs-dark);
  }  

.vs-text-gelb1 {
  color: var(--vs-gelb1);
  }   
  
.vs-bg-gelb1 {
  background-color: var(--vs-gelb1);
  }    
  
.vs-bg-gelb2 {
  background-color: var(--vs-gelb2);
  } 
  
.vs-bg-gelb3 {
  background-color: var(--vs-gelb3);
  } 
  
.vs-bg-blut {
  background-color: var(--vs-blut);
  }   
  
.vs-bg-rot1 {
  background-color: var(--vs-rot1);
  }   
  
.vs-bg-rot2 {
  background-color: var(--vs-rot2);
  }    
  
.vs-bg-rot3 {
  background-color: var(--vs-rot3);
  }    
  
.vs-bg-rot4 {
  background-color: var(--vs-rot4);
  } 
    
.divider-dark {
  color: var(--vs-dark);
  } 
  
.divider-vs-bg-blue1 {
  color: var(--vs-blue1);
  }  
  
.divider-softblue {
  color: var(--bs-soft-blue);
  } 
  
.divider-paleblue {
  color: var(--bs-pale-blue);
  }  
    
.divider-bg-1{
  color: var(--bg-1);
  }   


/************* GRADIENTS ***********************/


.vs-gradient-1 {
  background: linear-gradient(-30deg, rgba(111,161,213,1) 0%, rgba(50,83,136,1) 55%, rgba(35,59,98,1) 100%);  
}

.vs-gradient-2 {
  background: linear-gradient(0deg, rgba(79,120,172,1) 0%, rgba(50,83,136,1) 50%, rgba(38,63,105,1) 69%, rgba(14,24,42,1) 100%);
}

.vs-gradient-3 {
  background: linear-gradient(0deg, rgba(140,184,203,1) 0%, rgba(29,107,154,1) 31%, rgba(14,24,42,1) 100%);
}

.vs-gradient-4 {
  background-image: linear-gradient(20deg, #1d2f4d, #325388);
}

.vs-gradient-5 {
  background: linear-gradient(180deg, rgba(14,24,42,1) 0%, rgba(29,107,154,1) 73%);
}

.vs-gradient-6 {
  background: linear-gradient(-10deg, rgba(252,240,212,1) 0%, rgba(111,161,213,1) 100%);
}


.vs-gradient-7 {
  background: radial-gradient(circle, rgba(87,97,125,1) 0%, rgba(40,50,71,1) 52%, rgba(14,24,42,1) 100%);
}

.vs-gradient-8 {
  background: linear-gradient(180deg, rgba(79,120,172,1) 0%, rgba(50,83,136,1) 50%, rgba(38,63,105,1) 69%, rgba(14,24,42,1) 100%);
}

.vs-gradient-9 {
  background: linear-gradient(0deg, rgba(14,24,42,1) 0%, rgba(29,107,154,1) 73%);
}

.vs-gradient-10 {
  background: linear-gradient(180deg, rgba(27,45,76,1) 0%, rgba(38,63,105,1) 48%, rgba(79,120,172,1) 100%);
}

.gradient-11 {
  background: linear-gradient(-30deg, rgba(136,177,219,1) 0%, rgba(110,159,211,1) 35%, rgba(50,83,136,1) 78%);
}

.gradient-12 {
  background: linear-gradient(-30deg, rgba(133,183,214,1) 7%, rgba(111,161,213,1) 34%, rgba(69,104,147,1) 73%, rgba(41,66,103,1) 100%);
}

/************* GRADIENTS END ***********************/

.box-container {
  display: flex;
  gap: 20px; /* Space between left and right sections */
  max-width: 1200px;
  width: 100%;
  padding: 0px;
  border-radius: 15px;
  /* background-color: #fff7dc; */
  flex-wrap: nowrap; /* Prevent wrapping so the layout stays side-by-side */
}

/* Left Section */
.left-box {
  flex: 2; /* Takes 2/3rd of the space */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  border-radius: 10px;
}

.left-box img {
  width: 100%;
  height: auto;
  max-height: 600px; /* Ensure the image scales responsibly */
  border-radius: 10px;
}

/* Right Section */
.right-box {
  flex: 1; /* Takes 1/3rd of the space */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Adds consistent 20px spacing (gutter) between boxes */
  align-items: stretch; /* Ensures child boxes stretch to fill the width */
  height: auto; /* Let the height match content without adding extra gap */
}  

/* Info Boxes */
.info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  padding: 1.2em 0.5em 1.2em 0.5em;
  text-align: center;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */

  /* Adjust box height */
  flex-grow: 1; /* Ensures proportional growth */
  min-height: 100px; /* Minimum height for better visibility */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .box-container {
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 12px; /* Reduce space between sections on smaller screens */
  }

  .left-box img {
    max-height: 400px; /* Scale the left image for smaller viewports */
  }

  .right-box {
    flex: 1; /* Maintain right alignment */
    height: auto; /* Adjust height to content */
    gap: 12px; /* Adjust the gutter spacing on smaller screens */
  }

  .info-box {
    min-height: 100px; /* Reduce the height slightly for smaller screens */
  }
}

/*.os-800, .display-1 {

  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
*/

/**************** HEADLINES *******************/

/* DISPLAY-1 Hauptheadline */
.display-1 {
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 3.0rem;
    font-weight: 400;
  }
}

@media screen and (max-width: 768px) {
  .display-1 {
    font-size: 2.0rem;
    font-weight: 400;
  }
}

/* DISPLAY-2 kleinere Headline Start*/
.display-2 {
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 2.7rem;
    font-weight: 400;
  }
}

@media screen and (max-width: 768px) {
  .display-2 {
    font-size: 2.0rem;
    font-weight: 400;
  }
}

/* DISPLAY-3 Headlines dazwischen*/
.display-3 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 768px) {
  .display-3 {
    font-size: 1.4rem;
  }
}

/* DISPLAY-4 CTA Headlines*/
.display-4 {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .display-4 {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 768px) {
  .display-4 {
    font-size: 1.4rem;
  }
}

/* DISPLAY-5 Produkt Headlines*/
.display-5 {
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 1.0rem;
  }
}

@media screen and (max-width: 768px) {
  .display-5 {
    font-size: 0.8rem;
  }
}

/* DISPLAY-6 Little Headlines Icon*/
.display-6 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .display-6 {
    font-size: 0.8rem;
  }
}

/* DISPLAY-7 Open Sans größer*/
.display-7 {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}
@media (min-width: 1200px) {
  .display-7 {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 768px) {
  .display-7 {
    font-size: 0.7rem;
  }
}

/* DISPLAY-7 kleinere Headline*/
.display-8 {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0;
}
@media (min-width: 1200px) {
  .display-8 {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 768px) {
  .display-8 {
    font-size: 1.2rem;
  }
}

.lead {
  font-size: 1.0rem;
  font-weight: 500;
}

@media (min-width: 1200px) {
  .lead {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 768px) {
  .lead {
    font-size: 0.8rem;
  }
}

/*************** HEADLINE END *************/


  
.rahmen {
  border: 0.15rem solid;
  border-color: var(--vs-light);
  }
      
.trans-dark-light {
background-color: var(--bs-soft-blue);
  }

.div-path-light path {
fill: #0e182a;
  }

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  font-family: "Young Serif", serif;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--vs-dark);
  }

body {
  color: var(--vs-dark);
}
  
.svg-bg.svg-bg-lg .icon-svg {
  width: 2.0rem;
  height: 2.0rem;
}

@media (max-width:575px) {
  .col-xs {
    flex: 1 0 0%;
  }
  .row-cols-xs-auto>* {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xs-1>* {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xs-2>* {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xs-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xs-4>* {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xs-5>* {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xs-6>* {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .row-cols-xs-7>* {
    flex: 0 0 auto;
    width: 14.2857142857%;
  }
  .row-cols-xs-8>* {
    flex: 0 0 auto;
    width: 12.5%;
  }
  .row-cols-xs-9>* {
    flex: 0 0 auto;
    width: 11.1111111111%;
  }
  .row-cols-xs-10>* {
    flex: 0 0 auto;
    width: 10%;
  }
  .row-cols-xs-11>* {
    flex: 0 0 auto;
    width: 9.0909090909%;
  }
  .row-cols-xs-12>* {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xs-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xs-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xs-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xs-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xs-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xs-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xs-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xs-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xs-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xs-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xs-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xs-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xs-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xs-0 {
    margin-left: 0;
  }
  .offset-xs-1 {
    margin-left: 8.33333333%;
  }
  .offset-xs-2 {
    margin-left: 16.66666667%;
  }
  .offset-xs-3 {
    margin-left: 25%;
  }
  .offset-xs-4 {
    margin-left: 33.33333333%;
  }
  .offset-xs-5 {
    margin-left: 41.66666667%;
  }
  .offset-xs-6 {
    margin-left: 50%;
  }
  .offset-xs-7 {
    margin-left: 58.33333333%;
  }
  .offset-xs-8 {
    margin-left: 66.66666667%;
  }
  .offset-xs-9 {
    margin-left: 75%;
  }
  .offset-xs-10 {
    margin-left: 83.33333333%;
  }
  .offset-xs-11 {
    margin-left: 91.66666667%;
  }
  .g-xs-0,
  .gx-xs-0 {
    --bs-gutter-x: 0;
  }
  .g-xs-0,
  .gy-xs-0 {
    --bs-gutter-y: 0;
  }
  .g-xs-1,
  .gx-xs-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xs-1,
  .gy-xs-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xs-2,
  .gx-xs-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xs-2,
  .gy-xs-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xs-3,
  .gx-xs-3 {
    --bs-gutter-x: 0.75rem;
  }
  .g-xs-3,
  .gy-xs-3 {
    --bs-gutter-y: 0.75rem;
  }
  .g-xs-4,
  .gx-xs-4 {
    --bs-gutter-x: 1rem;
  }
  .g-xs-4,
  .gy-xs-4 {
    --bs-gutter-y: 1rem;
  }
  .g-xs-5,
  .gx-xs-5 {
    --bs-gutter-x: 1.25rem;
  }
  .g-xs-5,
  .gy-xs-5 {
    --bs-gutter-y: 1.25rem;
  }
  .g-xs-6,
  .gx-xs-6 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xs-6,
  .gy-xs-6 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xs-7,
  .gx-xs-7 {
    --bs-gutter-x: 1.75rem;
  }
  .g-xs-7,
  .gy-xs-7 {
    --bs-gutter-y: 1.75rem;
  }
  .g-xs-8,
  .gx-xs-8 {
    --bs-gutter-x: 2rem;
  }
  .g-xs-8,
  .gy-xs-8 {
    --bs-gutter-y: 2rem;
  }
  .g-xs-9,
  .gx-xs-9 {
    --bs-gutter-x: 2.25rem;
  }
  .g-xs-9,
  .gy-xs-9 {
    --bs-gutter-y: 2.25rem;
  }
  .g-xs-10,
  .gx-xs-10 {
    --bs-gutter-x: 2.5rem;
  }
  .g-xs-10,
  .gy-xs-10 {
    --bs-gutter-y: 2.5rem;
  }
  .g-xs-11,
  .gx-xs-11 {
    --bs-gutter-x: 3rem;
  }
  .g-xs-11,
  .gy-xs-11 {
    --bs-gutter-y: 3rem;
  }
  .g-xs-12,
  .gx-xs-12 {
    --bs-gutter-x: 3.5rem;
  }
  .g-xs-12,
  .gy-xs-12 {
    --bs-gutter-y: 3.5rem;
  }
  .g-xs-13,
  .gx-xs-13 {
    --bs-gutter-x: 4rem;
  }
  .g-xs-13,
  .gy-xs-13 {
    --bs-gutter-y: 4rem;
  }
  .g-xs-14,
  .gx-xs-14 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xs-14,
  .gy-xs-14 {
    --bs-gutter-y: 4.5rem;
  }
  .g-xs-15,
  .gx-xs-15 {
    --bs-gutter-x: 5rem;
  }
  .g-xs-15,
  .gy-xs-15 {
    --bs-gutter-y: 5rem;
  }
  .g-xs-16,
  .gx-xs-16 {
    --bs-gutter-x: 6rem;
  }
  .g-xs-16,
  .gy-xs-16 {
    --bs-gutter-y: 6rem;
  }
  .g-xs-17,
  .gx-xs-17 {
    --bs-gutter-x: 7rem;
  }
  .g-xs-17,
  .gy-xs-17 {
    --bs-gutter-y: 7rem;
  }
  .g-xs-18,
  .gx-xs-18 {
    --bs-gutter-x: 8rem;
  }
  .g-xs-18,
  .gy-xs-18 {
    --bs-gutter-y: 8rem;
  }
  .g-xs-19,
  .gx-xs-19 {
    --bs-gutter-x: 9rem;
  }
  .g-xs-19,
  .gy-xs-19 {
    --bs-gutter-y: 9rem;
  }
  .g-xs-20,
  .gx-xs-20 {
    --bs-gutter-x: 10rem;
  }
  .g-xs-20,
  .gy-xs-20 {
    --bs-gutter-y: 10rem;
  }
  .g-xs-21,
  .gx-xs-21 {
    --bs-gutter-x: 12.5rem;
  }
  .g-xs-21,
  .gy-xs-21 {
    --bs-gutter-y: 12.5rem;
  }
  .g-xs-22,
  .gx-xs-22 {
    --bs-gutter-x: 15rem;
  }
  .g-xs-22,
  .gy-xs-22 {
    --bs-gutter-y: 15rem;
  }
  .g-xs-23,
  .gx-xs-23 {
    --bs-gutter-x: 17.5rem;
  }
  .g-xs-23,
  .gy-xs-23 {
    --bs-gutter-y: 17.5rem;
  }
  .g-xs-24,
  .gx-xs-24 {
    --bs-gutter-x: 20rem;
  }
  .g-xs-24,
  .gy-xs-24 {
    --bs-gutter-y: 20rem;
  }
  .g-xs-25,
  .gx-xs-25 {
    --bs-gutter-x: 22.5rem;
  }
  .g-xs-25,
  .gy-xs-25 {
    --bs-gutter-y: 22.5rem;
  }
}

.badge {
  --bs-badge-font-weight: 600;
}

.ratings {
  display: inline-block;
  position: relative;
  width: 4rem;
  height: 0.8rem;
  font-size: 0.9rem;
  line-height: 1;
}
.ratings:after,
.ratings:before {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-style: normal;
  font-weight: normal;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--vs-dark);
  content: "\2605\2605\2605\2605\2605";
  overflow: hidden;
}
.ratings:before {
  color: rgba(38, 43, 50, 0.1);
}
.ratings.one:after {
  content: "\2605";
}
.ratings.two:after {
  content: "\2605\2605";
}
.ratings.three:after {
  content: "\2605\2605\2605";
}
.ratings.four:after {
  content: "\2605\2605\2605\2605";
}
.custom-control .ratings {
  height: 0.9rem;
}
.ratings-wrapper span {
  display: inline-block;
}
.ratings-wrapper span.ratings {
  vertical-align: -1px;
}

  .table {
  --bs-table-color: #0e182a;
  --bs-table-border-color: #0e182a;
}

  .footerlines {
  --bs-table-border-color: white;
}

.btn-white {
  --bs-btn-bg: #ebf4fa;
  --bs-btn-border-color: #ebf4fa;
  --bs-btn-hover-bg: #ebf4fa;
  --bs-btn-hover-border-color: #ebf4fa;
  --bs-btn-active-color: #343f52;
  --bs-btn-active-bg: #ebf4fa;
  --bs-btn-active-border-color: #ebf4fa;
  --bs-btn-disabled-bg: #ebf4fa;
  --bs-btn-disabled-border-color: #ebf4fa;
}

.accordion-wrapper .card-header button:before {
  font-family: "Unicons";
  position: absolute;
  left: 1.3rem;
  font-size: 1.15rem;
  font-weight: normal;
  width: 1rem;
  margin-top: -0.25rem;
  margin-left: -0.3rem;
  display: inline-block;
  color: var(--bs-primary);
}
.accordion-wrapper .card-header button.collapsed {
  color: #343f52;
}
.accordion-wrapper .card-header button.collapsed:before {
}
.accordion-wrapper .card-header button:hover {
  color: var(--bs-primary);
}

/* Thick border */
.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--vs-dark) !important;
}

/* Thick red border */
hr.shopfinder {
  border: 1px solid;
  color: var(--vs-blue1);
}

.mark,
mark {
  color: inherit;
  border-radius: 0.4rem;
}

mark,
.mark {
  padding: 0.05rem 0.4rem 0.2rem;
  background-color: var(--bs-highlight-bg);
}

.kastl {
  display: inline-block;
  padding: 6px 10px;
  color: var(--vs-light);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--vs-dark);
  box-shadow: var(--bs-btn-box-shadow);
  transition: all 0.2s ease-in-out;
}

.hg-subscribe {
  background-image: url('./assets/img/wald.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}