/* Beitrag "Welches Trainingslevel passt zu dir?" – LEVEL-Bloecke (gruen/blau/sand) wie im
   WordPress-Original (Spectra-Container 1340px) inkl. Aufklapp-Element. Prefix: .lvl- */

.prose .lvl-factors { font-weight: 700; }

/* ---------- LEVEL-Baender (brechen auf max. 1340px aus der Lesespalte aus) ---------- */
.prose .lvl-stack {
  --bw: min(1340px, calc(100vw - 2 * var(--gutter)));
  width: var(--bw);
  margin: 2.4em 0 2.6em calc(50% - var(--bw) / 2);
  display: grid; gap: 19px;
}
.lvl-band { color: #111; }
.lvl-band--green { background: #c5d1c0; }
.lvl-band--blue { background: #b3e0e8; }
.lvl-band--sand { background: #f5d9a2; }
.lvl-inner { width: min(1200px, 100% - 40px); margin-inline: auto; padding: 50px 0 80px; }
@media (max-width: 781px) { .lvl-inner { padding: 40px 0 60px; } }

.prose .lvl-title {
  margin: 0; color: #111;
  font-size: clamp(28px, 1.6rem + .4vw, 32px); font-weight: 700; line-height: 1.125; letter-spacing: -.1px;
}
.prose .lvl-sub {
  margin: 0; color: #111;
  font-size: clamp(18px, 1rem + .3vw, 22px); font-weight: 400; line-height: 1.125;
}

/* ---------- Aufklapp-Element ---------- */
.lvl-more { margin-top: 20px; background: #fff; }
.lvl-more > summary {
  display: block; cursor: pointer; list-style: none;
  padding: 10px; font-size: clamp(18px, 1rem + .3vw, 22px); font-weight: 300; line-height: 1.4; color: #111;
}
.lvl-more > summary::-webkit-details-marker { display: none; }
.lvl-more > summary:hover { background: #fafafa; }
.lvl-more > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lvl-more__body { padding: 10px 20px 30px; text-align: center; }
.prose .lvl-more__body p { margin: 0; font-size: clamp(17px, .95rem + .3vw, 22px); font-weight: 300; line-height: 1.4; }
.prose .lvl-more__body > p + * , .prose .lvl-more__body > * + p { margin-top: 20px; }
.lvl-cols { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
.lvl-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lvl-icon { display: inline-flex; width: 30px; height: 30px; color: #111; }
.lvl-icon svg { width: 100%; height: 100%; }
@media (min-width: 782px) {
  .lvl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lvl-more[open] .lvl-more__body { animation: lvl-in .3s ease-out; }
  @keyframes lvl-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---------- Abschluss: zentrierter Satz + schwarzer Button ---------- */
.prose .lvl-outro { margin-top: 2.4em; text-align: center; }
.prose .lvl-outro p { font-weight: 500; }
.prose .lvl-outro__btn { margin-top: 1.2em; }
.prose .lvl-outro__btn a {
  display: inline-block; padding: 16px 36px; border-radius: 5px;
  background: #111; color: #fff; font-size: 18px; font-weight: 400; line-height: 1.4; text-decoration: none;
  transition: background-color .2s;
}
.prose .lvl-outro__btn a:hover { background: #333; color: #fff; }