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

* Damit Fließtextlinks vom restlichen Fließtext besser unterscheidbar und damit
* BITV-konform sind, sind sie IMMER unterstrichen, nicht nur bei MouseHover.
*/

a {
  text-decoration: underline;
  font-size: inherit;
}

a.close {
  text-decoration: none;
}
 /*****************************************************************
    Willkommensseite angepasst
    --------------------------
/* Breite Welcome Container */
#welcome-container  {
    max-width: 100%;
}

/* Zeilenabstand vergrößert */
#welcome-container .form-heading {
    line-height: 1.8rem;
}

/* Absatzabstand vergrößert */
#welcome-container p {
    margin-bottom: 0.8rem;
}

/* Abstand Beschreibungstext zu Titel und Willkommensnachricht zu gering */
#welcome-container > .survey-description.form-heading {
    margin-top:10px; margin-bottom:30px; text-align: center
}

/******************************************************
    Umfragetitel und Beschreibungstext zentriert ausrichten zur besseren Abhebung vom Folgetext */
    
#welcome-container > .survey-name.large-heading {
    text-align: center
}

/* Warninglabel ist kräftiges Lila, dunkle Schrift war nicht zu lesen (Beispiel: Datenschutzwarnung Willkommensseite) 
    -> angepasst: Schrift weiß */
#datasecurity_error {
    color:#ffffff;
    font-weight: 600;
}

/* Überschriften und Schriftgrößen anpassen*/
.question-container .ls-label-question {
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
}

.large-heading {
    line-height: 60px; /*Zeilenabstand erhöht */
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.question-help-container {
    font-size: 1rem;
}

/* Abstände verringert */
p {
    margin-bottom: 0.2rem;
}
 
h3, .h3 {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 28px;
}

h2, .h2 {
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 38px;
}

h1, .h1 {
    font-weight: 500;
    font-size: 2rem;
    line-height: 38px;
}
/******************************************************************/


/* fehlenden Tastatur-Fokus bei Radio-Buttons hinzugefügt 
 * ("Gleichzeitig wird das neue Design der Radio-Buttons aus oben genanntem Grund unsichtbar gemacht.")
 */

.radio-item input[type="radio"] {
  appearance: none;                             /* neuer Look */
  color: #e51433;                               /* neuer Look */
  border: 3px solid #6e748c;                    /* neuer Look */
  border-radius: 50%;                           /* neuer Look */
  display: inline-block;
  position: relative;
  width: 17px;
  height: 17px;
  line-height: 21px;
  text-indent: 21px;
  opacity: 1;
}

.radio-item input[type="radio"]:checked {     /* neuer Look */
  background-image: radial-gradient(
    hsl(351, 84%, 49%) 40%,                   
    transparent calc(40% + 1px)
  );
  border-color:  #e51433;
}


.radio-item input[type="radio"]:focus-visible {
  color: #e51433;                               /* neuer Look */
  border: 3px solid #e51433;                    /* neuer Look */
  border-radius: 50%;                           /* neuer Look */
  box-shadow: 0 0 0 2pt grey;
  outline: none;
  transition: .1s;
}

/* label-radio Fehler der Entwickler, kommt bei "other option" vor */
.control-label.radio-label::before, 
.control-label.label-radio::before{ 
    opacity: 0;
}
.control-label.radio-label::after,
.control-label.label-radio::after{
    opacity: 0;
}

.radio-item input[type="radio"]{
  top: 1px;
}

.radio-item .ls-label-xs-visibility {
  opacity: 1;
}

.radio-item .ls-label-xs-visibility {
  width: 0;
  height: 0;
}


/* **********************************************************************************************************
    Checkboxen
 * ******************************************************************************************************** */

/*
.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
  margin-left: 0px;
}
*/

.checkbox-item input[type="checkbox"] {
  appearance: none;                             /* neuer Look */
  color: #e51433;                               /* neuer Look */
  border: 0px solid #ffffff;                    /* neuer Look */
  border-radius: 0;                             /* neuer Look */
  display: inline-block;
  position: relative;
  top:3px;
  left:8px;
  width: 24px;
  height: 24px;
  line-height: 28px;
  text-indent: 28px;
  opacity: 1;
  z-index: auto;
}


.checkbox-array.table .checkbox-item input[type="checkbox"] {
  position: relative;
  top: 7.4px;
  left: 8.3px;
}



.checkbox-list.checkbox-text-list .checkbox-item input[type="checkbox"] {
      top: -4px;
      left: 27px;
}

#datasecurity_accepted {
    top: -4px;
      left: 0.5px;
}



/* fehlenden Tastatur-Fokus bei Checkboxen hinzugefügt */

.checkbox-item input[type="checkbox"]:focus,
.checkbox-item input[type="checkbox"]:focus + label:before {
  outline: 2px dotted  #e51433;
  outline-offset: 5px;
}

.checkbox-item .ls-label-xs-visibility {
  opacity: 1;
}

table.ls-answers .ls-label-xs-visibility {
  display: inline-block;
}

.alert {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}


/* bei multiple choice die Ausrichtung korrigiertr */

.checkbox-item label {
  /* display: inline-block; */
  display: block;
}

.ls-answers label,
.answer-item label,
.control-label {
  /* line-height: 20px; */
  line-height: 1.6rem;
}

.checkbox-item input[type="checkbox"] {
  /* position: relative; */
  position: absolute;
  top: 0px;
  left: 0px;
}


/* ****************************************************************************************************** */
/* Fragen Nummerierung
/* ****************************************************************************************************** */
/* Nur bei Bilschirmbreite ueber 1200px die Fragenummerierung nach link herausschieben
 */
@media (min-width: 1200px) {
  .question-title-container .question-number {
    display: block;
    position: absolute;
    margin-left: -64px;
    width: 60px;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 6px;
  }
  /* Sternchen fuer Pflichtfragen auch nach links vor die Nummerierung schieben */
  i.asterisk {
    display: block;
    width: 40px;
    position: absolute;
    margin-left: -86px;
    margin-top: 4px;
      
  }

  /* bei multiple choice die Ausrichtung korrigiertr */
  
  .checkbox-item label {
    /* display: inline-block; */
    display: block;
  }
  
  .ls-answers label,
  .answer-item label,
  .control-label {
    /* line-height: 20px; */
    line-height: 1.6rem;
  }
  
  .checkbox-item input[type="checkbox"] {
    /* position: relative; */
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* ****************************************************************************************************** */
/* Anpassungen für Mobilansicht <= 760px breit  */
/* ****************************************************************************************************** */
/* Position Checkboxen und Radiobuttons in Mobilansicht */
@media (max-width: 760px) {

  /* Checkbox Datenschutzhinweis zurechtruecken */
  #datasecurity_accepted {
    top: -3px;
    left: 0px;
  }

  /* Pseudo-Buttons komplett ausblenden */
  .radio-item label::before {
    opacity: 0;
    width: 17px;
    height: 17px;
    left: -2px;
    top: 1px;
  }

  .radio-item label::after {
    opacity: 0;
    left: 0px;
  }

  /* fixed semantisches Diff. in mobil Ansicht */
  table.ls-answers .answertextright {
    text-align: left;
  }

  /* bei multiple choice die Ausrichtung korrigiertr */
  
  .checkbox-item label {
    /* display: inline-block; */
    display: block;
  }
  
  .ls-answers label,
  .answer-item label,
  .control-label {
    /* line-height: 20px; */
    line-height: 1.6rem;
  }
  
    .checkbox-item input[type="checkbox"] {
    /* position: relative; */
    position: absolute;
    top: 0;
    left: 0;
  }


}