/* Scoped to the simpler courses; long-form landing pages keep their own layout. */
@scope (.course-simple) {
  .hero { background:var(--sz-cyan-wash); padding:66px 0; }
  .hero-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(32px,5vw,76px); }
  .hero h1 { max-width:20ch; font-size:clamp(2.2rem,4vw,3.8rem); overflow-wrap:break-word; hyphens:none; }
  .hero .lead { max-width:48ch; font-size:clamp(1.1rem,1.5vw,1.3rem); }
  .hero-visual { aspect-ratio:1; }
  .hero-visual .photo { object-fit:cover; }
  .course-section { padding:clamp(44px,5.5vw,76px) 0; background:var(--sz-paper); scroll-margin-top:110px; }
  .course-section-blue { background:var(--sz-cyan-wash); }
  .course-prose { max-width:780px; }
  .course-prose h2 { max-width:none; font-size:clamp(1.75rem,3vw,2.6rem); line-height:1.2; overflow-wrap:break-word; hyphens:none; }
  .course-prose h3 { font-size:clamp(1.15rem,2vw,1.5rem); }
  .course-prose :is(h2,h3):not(:first-child) { margin-top:2em; }
  .course-prose p { margin-bottom:1.1em; }
  .course-prose :is(ul,ol) { padding-left:1.35em; }
  .course-prose li { margin-bottom:.55em; }
  .course-prose blockquote { margin:1.5em 0; padding:0 0 0 1.2em; border-left:3px solid var(--sz-cyan-dark); font:inherit; }
  .course-prose img { max-width:100%; height:auto; }
  .course-prose > :last-child { margin-bottom:0; }
  /* Heading in the left third, running text in the right two-thirds - uses the
     page width better than a single narrow reading column. */
  .course-prose-grid { display:grid; grid-template-columns:1fr 2fr; gap:clamp(24px,4vw,56px); align-items:start; }
  .course-prose-grid .course-prose { max-width:none; }
  .course-prose-heading { margin:0; }
  .course-prose-heading :is(h1,h2,h3) { max-width:none; margin:0; font-size:clamp(1.75rem,3vw,2.6rem); line-height:1.2; overflow-wrap:break-word; hyphens:none; }
  .course-prose-heading-image { display:block; width:100%; max-width:320px; height:auto; margin-top:20px; box-shadow:0 6px 20px rgba(34,12,16,.17); }
  /* Several headings sharing one course-section call (e.g. "Katja Fusek
     hilft." + "Zielgruppe") stack as separate heading/text rows. */
  .wrap > .course-prose-grid + .course-prose-grid,
  .wrap > .course-prose + .course-prose-grid,
  .wrap > .course-prose-grid + .course-prose { margin-top:2.2em; }
  /* Hero is always blue and the testimonials always paper-coloured; the
     course-section blocks after that alternate automatically (see the
     course-section shortcode). */
  .testimonials { background:var(--sz-paper); }
  .schedule { scroll-margin-top:100px; }
  @media(max-width:700px) {
    .hero { padding:44px 0; }
    .hero-grid { grid-template-columns:minmax(0,1fr); }
    .hero-visual { width:min(100%,440px); margin:0; }
    .course-prose-grid { grid-template-columns:1fr; gap:14px; }
  }
  @media(max-width:520px) {
    .hero h1 { font-size:clamp(2rem,8vw,2.7rem); }
    .hero-actions .button { width:100%; }
  }
}