body,

div,

h1,

html {

  margin: 0;

  padding: 0;

}



body {

  width: 980px;

  max-width: 42em!important;

  margin-left: auto;

  margin-right: auto;

  background: #fdf7f1;

  color: #666;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  -moz-font-feature-settings: "liga" on;

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 19px;

  line-height: 1.58;

  letter-spacing: -.003em;

}



.header {

  background: #BB939c;

  color: #fff;

  text-align: center;

  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

  padding: 1em 0; /* Dynamisches Padding oben und unten */

  border-radius: 10px; /* Runde Ecken */

}



.header h1 {

  font-size: 1.8em;

  margin: 0; /* Entfernt den Standard-Margin */

}



.logo {

  text-align: center;

  padding: 10px;

}



.nav {

  text-align: center;

  padding-top: 1em;

  padding-bottom: 1em;

}



.nav h2 {

  font-size: 1.2em;

  font-weight: bold;

}



select {

  background: #fff;

  width: 18em;

  padding: 5px;

  font-size: 1.2em;

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

  line-height: 24px;

  border: 1px solid #c99e67;

  border-radius: 3px;

  height: 1.8em;

  margin-top: 0.3em;

  margin-bottom: 1em;

}



figure {

  border-collapse: collapse;

  border: 0;

  width: 100%;

  margin: 0;

  padding-bottom: 40px;

  padding-top: 20px;

}



figcaption {

  font-size: 18px;

  font-style: italic;

  margin-top: 0;

  padding-top: 10px;

  padding-left: 21px;

}



figure img {

  max-width: 100%!important;

  width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

}



.container {

  background: #fff;

  padding: 0;

  margin: 0;

}



.container h2,

.container p,

.padding {

  padding: 0 21px;

}



h1,

h2,

h2 a {

  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

  font-weight: 100;

  font-style: normal;

  font-size: 1.6em;

  margin-left: -2.25px;

  line-height: 1.15;

  letter-spacing: -.02em;

  text-decoration: none;

  color: #87686f;

  overflow-wrap: break-word;

  word-wrap: break-word;

  text-align: center;

}



.cta,

.cta a:link,

.cta h2,

.header h1,

.header h2 {

  color: #fff;

}



h2 {

  margin-top: 35px;

  font-size: 30px

}



ul {

  margin-left: 0;

  line-height: .9em

}



li {

  margin-bottom: .5em;

  padding-left: 10px;

  line-height: 1.58;

  text-align: left;

}



.cta {

  padding: 10px;

  margin-top: 40px;

  margin-bottom: 40px;

  text-align: center;

  background-color: #BB939c;

}



.ctabutton {

  padding: 10px;

  margin-top: 40px;

  margin-bottom: 40px;

  text-align: center;

}



.ctabtn {

  display: inline-block;

  outline: none;

  cursor: pointer;

  font-weight: bold;

  border-radius: 6px;

  padding: 14px 24px;

  border: none;

  background: #BB939c;

  color: #fff;

}



a.ctabtn:link,

a.ctabtn:visited,

a.ctabtn:hover,

a.ctabtn:active {

  text-decoration: none;

}



.mobile,

.tablet {

  display: none;

}



@media screen and (max-width: 48em) {

  .desktop,

  .tablet {

    display: none;

  }

  .mobile {

    display: block;

  }

  body {

    width: 100%;

    font-size: 17px;

    max-width: 36em!important;

    margin-left: auto;

    margin-right: auto;

    background: #fff;

  }

  .container {

    background: #FFF;

  }

  li {

    padding-bottom: 5px;

    margin-bottom: 0;

  }

  .container h2,

  .container p,

  .padding {

    padding: 0 16px;

  }

}



.ref {

  color: #000;

  font-weight: bold;

  margin-top: 3em;

}



.refpers,

.refpersj {

  font-weight: bold;

  margin-bottom: 3em;

  border-bottom: 1px solid #ccc;

}



.refpersj:before {

  content: "Jameda Bewertung Note ";

}



hr {

  height: 10px;

  border: 0;

  box-shadow: 0 10px 10px -10px #8c8b8b inset;

  margin-top: 20px;

  margin-bottom: 20px;

}



button {

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

  background-color: #EBD9DE;

  border: 2px solid #fff;

  color: black;

  font-size: 19px;

  font-weight: normal;

  padding: 10px 20px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  margin: 4px 2px;

  cursor: pointer;

  border-radius: 4px;

  transition-duration: 0.4s;

  line-height: 1.6;

  width: 250px;

}



button:hover,

button:focus {

  background-color: white;

  color: #c99e67;

}



.active-button {

  background-color: #fff;

}



.stars {

  color: #c99e67;

  font-size: 30px;

  text-align: center;

}



.content-container {

  text-align: center;

}



.slider-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



.slider {

  -webkit-appearance: none;

  /* Override default appearance */

  appearance: none;

  width: 80%;

  /* Slider width relative to the parent container */

  height: 8px;

  /* Slider track height */

  background: #e3ccaf;

  /* Slider track color */

  outline: none;

  margin: 10px 0;

  /* Center the slider horizontally */

  border-radius: 10px;

  /* Rounded corners for the track */

  border: none;

  /* No border for the track */

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

  /* Subtle inset shadow for depth */

}



.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  /* Override default appearance */

  appearance: none;

  width: 25px;

  /* Width of the slider thumb */

  height: 25px;

  /* Height of the slider thumb */

  background: #fff;

  /* Color of the slider thumb */

  cursor: pointer;

  border-radius: 50%;

  /* Circular shape for the thumb */

  border: 1px solid #e3ccaf;

  /* Border color matching the track */

  transition: background-color 0.2s ease-in-out;

  /* Smooth transition for color changes */

}



.slider::-webkit-slider-thumb:hover {

  background-color: #e3ccaf;

  /* Color change on hover for feedback */

}



.slider::-moz-range-thumb {

  width: 25px;

  /* Width of the slider thumb */

  height: 25px;

  /* Height of the slider thumb */

  background: #fff;

  /* Color of the slider thumb */

  cursor: pointer;

  border-radius: 50%;

  /* Circular shape for the thumb */

  border: 1px solid #e3ccaf;

  /* Border color matching the track */

  transition: background-color 0.2s ease-in-out;

  /* Smooth transition for color changes */

}



.slider::-moz-range-thumb:hover {

  background-color: #e3ccaf;

  /* Color change on hover for feedback */

}



#emoji {

  text-align: center;

}


.qc {

  padding-left: 50px;

}


#summary {

  font-weight: bold;

  /* Bold text for summary */

  color: #c99e67;

  /* Color matching the slider theme */

}



#rangeValue {

  color: #333;

  /* Darker text for readability */

}



input[type="text"] {

  width: 90%;

  padding: 10px;

  border: 1px solid #c99e67;

  border-radius: 4px;

  margin: 10px 0;

  font-size: 1.2em;

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

  color: #666;

}

textarea {

  width: 90%;

  padding: 10px;

  border: 1px solid #c99e67;

  border-radius: 4px;

  margin: 10px 0;

  font-size: 1.2em;

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

  color: #666;

}

.slider + label {

  margin-top: 10px;

  font-size: 1em;

  color: #666;

  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

}

.slider-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  margin: auto;

}



.weighting-slider-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  margin: auto;

}

.content-div {
  display: none;
}