/* ==========================================================================
   Info-Text SEO — steht GENAU EINMAL im DOM, als erste Section in <main>
   (früh für Suchmaschinen, trägt die semantische <h1>).

   Muster wie hairrender.com: das Panel wird per position:absolute; top:100%
   an den Boden der Seite (unter den Footer) gelegt und ist standardmäßig
   display:none. Der Footer-Link (data-infotext-toggle) setzt .is-open →
   display:block, dann klappt der Text auf. KEINE zweite DOM-Kopie.
   ========================================================================== */

/* Bezugsrahmen für das absolut positionierte Panel = das Seiten-Layout.
   base.php rendert <main> als erstes Kind; wir hängen das Panel an den
   Body-Boden (unter den Footer). */
body:has(.info-text-panel) {
  position: relative;
}

.info-text-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-white);
}

.info-text-panel.is-open {
  display: block;
  padding: var(--space-xl) 0 var(--space-lg);
}

.info-text-panel__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-inline: 0;
}

@media (max-width: 1240px) {
  .info-text-panel__inner { padding-inline: var(--content-edge-tablet); }
}

@media (max-width: 767px) {
  .info-text-panel__inner { padding-inline: var(--content-edge-mobile); }
}

/* Heading-Typografie — Panel-Kontext (kleinere Größen). Font-family/weight/
   color kommen aus base.css; hier nur Size + Margin als Modul-Spezifikum. */
.info-text-panel__inner h1 {
  font-size: 1.8rem;
  margin: 0 0 var(--space-sm);
}
.info-text-panel__inner h2 {
  font-size: 1.4rem;
  margin: var(--space-lg) 0 var(--space-xs);
}
.info-text-panel__inner h3 {
  font-size: 1.15rem;
  margin: var(--space-md) 0 var(--space-xs);
}

.info-text-panel__inner p {
  color: var(--color-text);
  line-height: 1.71;
  margin: 0 0 var(--space-sm);
}