/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

 @import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  

/* Start reset CSS */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

  
  body {
  font-family: "Anybody", sans-serif;
  font-weight: 400; /* Regular */
  margin: 0;
  line-height: 22px;
  color: #333333;
  font-size: 16px;

  /* Hintergrundbild einfügen und fixieren */
  background-image: url('background.png');
  background-size: cover; /* Hintergrundbild an den Bildschirm anpassen */
  background-repeat: no-repeat;
  background-attachment: fixed; /* Hintergrund bleibt beim Scrollen fixiert */
  background-position: center;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

a.surveytitle {
  margin: 10px 0;
  display: block;
}

.survey-welcome {
  padding-bottom: 10px;
}

h1, h2 {
  display: block;
  text-align: center;
  position: relative;
  margin-top: 0;
  margin-bottom: 30px;
  padding: 20px 0;
  font-size: 30px;
  color: #E1007A;
  font-family: "Anybody", sans-serif;
  font-weight: 900; /* Black */
  line-height: 40px;
}

a {
  color: #009EE0;
}

li {
  list-style-type: none;
}

#wrapper {
  max-width: 920px;
  margin: 50px auto; /* Abstand oben und unten */
  padding: 40px; /* Erhöhtes Padding oben und unten */
  background-color: white;
  border-radius: 15px;
  box-sizing: border-box; /* Verhindert Layout-Probleme */
}

.ui-button-text {
  font-size: 16px;
  font-weight: bold;
  color: #0088cc;
  background-color: #FFF;
  padding: 10px 20px;
  border-radius: 5px;
}

.submit.button.ui-button {
  background: #FFF;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  margin: 0px 0 20px 0;
  width: calc(50% - 3px);
  border-radius: 5px;
  max-width: 100%; /* Verhindert das Überschreiten der Breite */
}

.ui-button-icon-secondary, .ui-button-icon-primary {
  display: none;
}

label.hide.label, label.hide.read {
  display: none;
}

.question-wrapper {
  width: 100%;
  margin-bottom: 5px;
}

td.questiontext {
  font-weight: bold;
}

.text, select {
  padding: 10px;
  font-size: 16px;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: calc(100% - 22px);
  max-width: 100%; /* Verhindert das Überlaufen */
}

.qnumcode, .asterisk {
  float: left;
  margin-right: 8px;
}

div.asterisk {
  color: red;
}

.questionhelp {
  font-size: 14px;
  color: #969792;
  margin: 5px 0px 5px 0px;
}

.survey-question-help {
  font-size: 14px;
  color: #969792;
  padding: 5px 0 10px 15px;
  font-weight: bold;
}

.errormandatory {
  font-size: 14px;
  font-weight: bold;
  color: red;
  padding: 0;
  margin: 10px 0 10px 15px;
}

.survey-question-help img {
  display: none;
}

.submit-buttons {
  text-align: center;
}

.group-description {
  padding: 0 0 22px 3px;
}

#footer {
  width: 100%;
  max-width: 960px;
  font-size: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 20px;
  margin: 20px auto 0 auto;
  box-sizing: border-box; /* Verhindert Layout-Probleme */
}

p {
  margin: 0;
  padding-left: 20px;
}

.textarea {
  font-family: "Anybody", sans-serif;
  font-size: 14px;
  padding: 15px;
  width: calc(100% - 30px);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  background-color: white;
  max-width: 100%; /* Verhindert das Überlaufen */
}

.answertext {
  text-align: left;
  line-height: 1.5em;
}

table { 
  border-spacing: 10px;
  border-collapse: separate;
}

.questions-list .answer-item.radio-item {
  text-align: center;
}

.hide {
  display: none;
}

#logo-container {
  width: 100%;
  text-align: center;
}

#logo-container img {
  max-width: 200px;
  height: auto;
}

/* Responsives Design für mobile Geräte */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
  }

  h1, h2 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 20px;
    padding: 10px 0;
  }

  #wrapper {
    padding: 20px; /* Erhöhtes Padding oben und unten für mobile Geräte */
    max-width: 100%;
    margin: 20px auto; /* Abstand oben und unten wiederherstellen */
    box-sizing: border-box;
  }

  .submit.button.ui-button {
    width: 100%;
    max-width: 100%;
  }

  #footer {
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .text, select, .textarea {
    width: 100%;
    max-width: 100%;
  }

  .submit-buttons {
    padding: 0 10px;
  }

  #logo-container img {
    max-width: 150px;
  }
}