input type=“ceckbox“ reagiert nicht

Leider komme ich mit meinem bescheidenen Wissen nicht weiter und bitte um Hilfe.
Nutze twenty-sixteen-Child und habe in einer Beitragsseite eine Checkbox platziert, um versteckten Text einzublenden. Hier die Beitragsseite:

<div class="fluxpress">
    <p>Artikel <strong>H A Z</strong></p>

    <div class="fluxarticle">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci e....tias iure facere dolorum adipisci eum? Saepe, itaque.orem ipsum dolor sit amet, consectetur adipisicing e</p>
      <input id="fluxarticle-one" type="checkbox" name="fluxarticles">
      <label for="fluxarticle-one"> lesen</label>
      
<div class="fluxarticle-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaqueorem ipsum dolor sit amet, consectetur adipi....</p>
      </div>
    </div> <! -- End fluxarticle -->
</div>

Dazu gehören folgende Angaben in der style.css

.fluxpress {
	  float: left;
	  width: 100%;
	  padding: 0 1em;
	}
	/* Acordeon styles */
.fluxarticle {
	  position: relative;
	  margin-bottom: 1px;
	  width: 100%;
	  overflow: hidden;
	}
.fluxarticle input {
	  position: absolute;
	  opacity: 0;
	  z-index: 5;
	}
.fluxarticle label {
	  position: relative;
	  display: block;
	  padding: 0 0 0 1em;
	  border: 1px solid #263578;
	  cursor: pointer;
	}

.fluxarticle-content {
	  max-height: 0;
	  overflow: hidden;
	  border: 1px solid #263578;
	  -webkit-transition: max-height .35s;
	  -o-transition: max-height .35s; /* weglassen*/
	  transition: max-height .35s;
	}

.fluxarticle-content p {
	  margin: 1em;
	}
	/* :checked */
.fluxarticle input:checked ~ .fluxarticle-content {
	  max-height: none;
	}
	/* Icon */
.fluxarticle label::after {
	  position: absolute;
	  right: 0;
	  top: 0;
	  display: block;
	  width: 3em;
	  height: 3em;
	  text-align: center;
	color: #263578;
	  -webkit-transition: all .35s;
	  -o-transition: all .35s;
	  transition: all .35s;
	}
.fluxarticle input[name=fluxarticles] + label::before {
	  content: "--- mehr ";
	}
.fluxarticle input[name=fluxarticles] + label::after {
	  content: "\25BC";
	}
.fluxarticle input[name=fluxarticles]:checked + label::before {
	  content: "--- weniger ";
	}
.fluxarticle input[name=fluxarticles]:checked + label::after {
	  transform: rotateX(180deg);
	}

Die css-Anweisungen ab .fluxarticle input:checked werden offensichtlich nicht erkannt, so dass es nicht zu dem gewünschten Verhalten nach Klicken der Checkbox kommt.
Werden dieselben html und css Anweisungen außerhalb WordPress in einer einfachen html-Datei umgesetzt, klappen die Anweisungen. Dehalb bin ich derzeit ratlos, waoran es liegen kann bzw. wie ich den Fehler finden kann.
Danke für eure Hilfe!

zum Testen siehe : http://www.flux-hildesheim.org/testtab/