/* ============================================================
   /pj teaser. Same setup as the /lab teaser (Felix: "same setup as the
   Lab page" / "just copy the style"), one backdrop image instead of two
   since only one PJ Planner capture exists, plus a DE/EN toggle the lab
   teaser does not need.
   ============================================================ */

.pj-teaser { position: relative; isolation: isolate; padding: var(--sp-8) 0; overflow: visible; }
.pj-teaser-bg {
  --pj-teaser-img: url(/assets/img/pj-teaser.jpg);
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--pj-teaser-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  filter: blur(3px) saturate(1.05);
}
/* The scrim. Same values and same reasoning as .lab-teaser-bg::after in
   lab.css, where the measurements are written down: a flat colour layer
   painted over the already blurred capture, dark in dark mode and light
   in light mode, so the copy reads. The blur is untouched. */
.pj-teaser-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink-0) 58%, transparent);
}
[data-theme="light"] .pj-teaser-bg::after {
  background: color-mix(in srgb, var(--paper-0) 62%, transparent);
}
.pj-teaser-inner {
  display: grid;
  gap: var(--sp-8);
  justify-items: center;
  text-align: center;
}
.pj-teaser-copy { max-width: 100%; }
.pj-teaser-copy .lead { margin-top: var(--sp-4); max-width: 34rem; color: var(--fg); }
.pj-teaser-signup {
  width: 100%;
  max-width: 26rem;
  text-align: left;
  box-shadow: 0 22px 48px rgba(7, 16, 18, 0.32);
}
[data-theme="light"] .pj-teaser-signup { box-shadow: 0 22px 48px rgba(31, 41, 46, 0.16); }
.pj-teaser-signup h2 { margin-top: var(--sp-2); }
.pj-teaser-signup .newsletter-form { margin-top: var(--sp-4); }
@media (min-width: 62rem) {
  .pj-teaser-inner { grid-template-columns: 1fr auto; align-items: center; text-align: left; justify-items: start; }
  .pj-teaser-copy { justify-self: start; }
}

/* ---------- Language toggle, DE default ----------
   Pure CSS, no script: a hidden checkbox, a label styled as the pill
   (the globe and "DE" Felix asked for double as this control, so it is
   one element, not a badge next to a separate button), and :checked
   flips both the label's own DE/EN text and which paragraph shows.
   Structural requirement: the checkbox, its label, and .pj-teaser-copy
   must be siblings under the same parent, checkbox first, for the + and
   ~ combinators below to reach them. No inline script, nothing new
   needed in the CSP. */
.pj-lang-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pj-lang-toggle {
  grid-column: 1 / -1;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 4px 12px 4px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
}
.pj-lang-toggle svg { width: 15px; height: 15px; flex: none; }
.pj-lang-input:focus-visible + .pj-lang-toggle { outline: 2px solid var(--focus); outline-offset: 2px; }
.pj-lang-en { display: none; }
.pj-lang-input:checked + .pj-lang-toggle .pj-lang-de { display: none; }
.pj-lang-input:checked + .pj-lang-toggle .pj-lang-en { display: inline; }
.pj-copy-en { display: none; }
.pj-lang-input:checked ~ .pj-teaser-copy .pj-copy-de { display: none; }
.pj-lang-input:checked ~ .pj-teaser-copy .pj-copy-en { display: block; }
/* The signup block carries both languages too, September 5 2026. */
.pj-lang-input:checked ~ .pj-teaser-signup .pj-copy-de { display: none; }
.pj-lang-input:checked ~ .pj-teaser-signup .pj-copy-en { display: block; }