/*
 * „Kommentar-Box” - kommentar.css (utf-8)
 *  - https://werner-zenk.de
 */

/* Nur zur Demo! */
html {
  scroll-behavior: Smooth;
}
body {
  font-family: Verdana, Arial, Sans-Serif;
  margin-bottom: 250px;
  scroll-behavior: Smooth;
}
h2 {
  font-weight: Normal;
}
/* Nur zur Demo! */




/* Kommentar-Box */
fieldset.kommentarBox {
background-color: #f5f5f5;
  background-color: #0060a5;
  background-color: var(--footerBackgroundColor);
  border-radius: 25px;
  border: Solid 1px #a8a8a8;
  border: Solid 3px var(--colorTopNav2TextHover);
  box-shadow: 3px 4px 9px 6px #00000030;
  cursor: Default;
  margin: 25px Auto 25px Auto;
  max-width: min(650px,90%);
  padding: 20px;
  scroll-margin-top: 25px;
  color: white;
}

fieldset.kommentarBox p {
  color: white;
}


/* Überschrift */
fieldset.kommentarBox legend {
color: #f00;
  color: #fbe778;
  color: #fff;
  font-family: Verdana, Arial, 
  vSans-Serif;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 25px 5px 0 5px;
  font-size: 150%;
  
  color: var(--colorTopNav2TextHover);
}

/* Navigation */
fieldset.kommentarBox nav {
  text-align: Right;
}

/* Kommentar */
fieldset.kommentarBox dl.kommentar dt {
  border-bottom: Solid 1px #d8d8d8;
}

fieldset.kommentarBox dl.kommentar dd {
  margin-left: 40px;
}

/* Hyperlinks */
fieldset.kommentarBox a:link,
fieldset.kommentarBox a:visited {
  color: #4169e1;
  color: var(--colorTopNav2TextHover);
  text-decoration: None;
}

/* Formularfelder */
fieldset.kommentarBox input,
fieldset.kommentarBox button,
fieldset.kommentarBox textarea,
fieldset.kommentarBox select {
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 1rem;
  margin-top: 5px;
  padding: 5px;
}

textarea {
	width: 95%;
}

fieldset.kommentarBox input[type="number"] {
  width: 65px;
}

fieldset.kommentarBox button[type="submit"] {
  background-color: lightgray;
  border: solid 1px #777;
  
  background-color: var(--colorTopNav2TextHover);
  border: solid 1px #777;
  border-radius: 15px;
}

/* Optionen */
fieldset.kommentarBox input[type="radio"]:checked + label {
  color: #4169e1;
  color: var(--colorTopNav2TextHover);
  color: #00ee00;
}

fieldset.kommentarBox input[type="radio"]#lbl2:checked + label {
  color: #ee0000;
}

fieldset.kommentarBox input[type="radio"]#lbl3:checked + label {
  color: #ee6600;
}

/* Fokusindikator (all) */
:focus-visible {
  outline: solid 1px #4169e1;
}

/* Pflichtangabe */
fieldset.kommentarBox mark {
  color: #ff0000;
  background-color: Transparent;
}

/* Bewertung */
fieldset.kommentarBox span.bewertung_ok {
  color: #ffd700;
  color: var(--colorTopNav2TextHover);
  font-size: 150%;
}

fieldset.kommentarBox span.bewertung_ko {
  color: #c8c8c8;
/**  color: #ffc8c8; **/
  font-size: 150%;
}

/* Statusmeldung */
p.status {
  background-color: #eaffef;
  border-radius: 5px;
  border: Solid 1px #d8d8d8;
  color: #00b32d;
  color: green;
  cursor: default;
  margin: 25px Auto 25px Auto;
  padding: 5px 5px 5px 15px;
  width: 510px;
}

p.statusx {
  background-color: #ffe8e8;
  background-color: red;
  border-radius: 5px;
  border: Solid 1px #d8d8d8;
  color: #ee0000;
  color:red;
  color:white;
  cursor: default;
  margin: 5px Auto 25px Auto;
  padding: 5px 5px 5px 15px;
  width: 510px;
}