/* Bildungsurlaub: only what this page adds to ../site.css, ../pages.css and ../retreat.css. The "Neu" chip over the
   title, the programme's photo beside its rows, the three reasons as still cards, and their four steps as numbered
   cards (the number a circle on the card's top edge). Media rules at the END. */
.open__text > .chip { vertical-align: 0; margin-bottom: -6px; }

/* the programme */
.prog { align-items: center; }
.prog__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.prog__sub { display: block; margin-top: 6px; font-size: 0.55em; color: var(--ink-2); }
.prog .feature__text { gap: 16px; }
.prog .feature__text > p:not(.eyebrow) { max-width: 52ch; }
.prog__label { margin-top: 6px; }

/* what it means */
.means { display: grid; gap: 14px; }
.means p:not(.lede) { color: var(--ink-2); max-width: 60ch; }

/* why Prana Veda: still cards, an icon over each */
.why { align-content: start; gap: 12px; }
.why .ricon { margin-bottom: 4px; }

/* how it works: numbered cards, two by two */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 36px) clamp(16px, 2.4vw, 28px); margin: 0; padding: 18px 0 0; list-style: none; }
.step { align-content: start; gap: 12px; padding-top: clamp(30px, 3vw, 36px); }
.step__n { position: absolute; top: 0; left: clamp(20px, 2.4vw, 28px); translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 0.95rem/1 var(--text); }
.step h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }
.step a { color: var(--accent-ink); }
.step .note-box { margin-top: 2px; }

/* the close: WhatsApp's mark in the ghost button */
.close .btn .mark { width: 18px; height: 18px; }

/* ═══════════ Media rules ═══════════ */
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}