/* Ramunė Bauer v13 subpages
   A purpose-built editorial system for every page beyond the landing page. */

.sp-page {
  --sp-ink: #4A4D56;
  --sp-ink-2: #565A64;
  --sp-paper: #FCFCFB;
  --sp-paper-2: #F8F3F6;
  --sp-white: #FFFFFF;
  --sp-coral: #DD8FA1;
  --sp-coral-dark: #AE475F;
  --sp-gold: #E3CF9A;
  --sp-gold-soft: #E9DFC4;
  --sp-line: rgba(74, 77, 86, .16);
  --sp-light-line: rgba(252, 252, 251, .18);
  background: var(--sp-paper);
  color: #5D616C;
}

.sp-page main { overflow: clip; }
.sp-page .v13-menu a[aria-current="page"]::after { right: 0; }
.sp-page .v13-menu a[aria-current="page"] { color: var(--sp-coral-dark); }
.sp-page .v13-header { z-index: 200; }
.sp-page .v13-footer { position: relative; z-index: 2; }

.sp-shell {
  width: min(100%, 1360px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 4.5rem);
}

.sp-measure { max-width: 66ch; }
.sp-narrow { max-width: 840px; }
.sp-section { position: relative; padding-block: clamp(5.5rem, 9vw, 10rem); }
.sp-section--tight { padding-block: clamp(3.75rem, 6vw, 6.5rem); }
.sp-section--paper { background: var(--sp-paper); }
.sp-section--white { background: var(--sp-white); }
.sp-section--sand { background: var(--sp-paper-2); }
.sp-section--ink { background: var(--sp-ink); color: #E8E9ED; }
.sp-section--gold { background: var(--sp-gold); color: var(--sp-ink); }
.sp-section--blush { background: #F2E7EE; }
.sp-section--blush .sp-kicker { color: var(--sp-coral-dark); }
.sp-section--blush .sp-lead { color: #5D616C; }
.sp-section--ink h2,
.sp-section--ink h3 { color: var(--sp-white); }

.sp-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.3rem;
  color: var(--sp-coral-dark);
  font-family: var(--v13-mono);
  font-size: .68rem;
  font-weight: 680;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}
.sp-kicker::before { content: ""; width: 1.7rem; height: 1px; background: currentColor; }
.sp-section--ink .sp-kicker { color: var(--sp-gold); }
.sp-section--gold .sp-kicker { color: var(--sp-ink); }

.sp-display {
  margin: 0;
  color: inherit;
  font-family: var(--v13-display);
  font-size: clamp(3.25rem, 6.3vw, 7rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
}
.sp-display em { color: var(--sp-coral); font-weight: 500; }
.sp-section--ink .sp-display em { color: var(--sp-gold); }

.sp-title {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(3.2rem, 5.7vw, 6.1rem);
  line-height: .95;
}
.sp-title--wide { max-width: 18ch; }
.sp-subtitle { margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.1rem); line-height: .98; }
.sp-lead {
  max-width: 56ch;
  margin: 0;
  color: #5D616C;
  font-size: clamp(1.08rem, 1rem + .42vw, 1.35rem);
  line-height: 1.55;
}
.sp-section--ink .sp-lead { color: #E8E9ED; }
.sp-section--gold .sp-lead { color: #4A4D56; }

.sp-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .9rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--v13-sans);
  font-size: .78rem;
  font-weight: 680;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  transition: transform .25s var(--v13-ease), background .25s ease, border-color .25s ease, color .25s ease;
}
.sp-button:hover { transform: translateY(-2px); }
.sp-button--coral { background: var(--sp-coral); color: #fff; }
.sp-button--coral:hover { background: var(--sp-coral-dark); color: #fff; }
.sp-button--gold { background: var(--sp-gold); color: var(--sp-ink); }
.sp-button--gold:hover { background: var(--sp-gold-soft); color: var(--sp-ink); }
.sp-button--ink { background: var(--sp-ink); color: #fff; }
.sp-button--ink:hover { background: #5D616C; color: #fff; }
.sp-button--line { border-color: currentColor; background: transparent; color: var(--sp-ink); }
.sp-button--line:hover { border-color: var(--sp-ink); background: var(--sp-white); color: var(--sp-ink); }
.sp-section--ink .sp-button--line { color: var(--sp-white); }
.sp-section--ink .sp-button--line:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: var(--sp-white); }
.sp-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

/* Shared hero, deliberately stronger and more editorial than the old PageHero. */
.sp-hero {
  position: relative;
  min-height: min(790px, calc(100svh - 82px));
  display: grid;
  align-items: stretch;
  background: var(--sp-ink);
  color: var(--sp-white);
}
.sp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
  align-items: stretch;
}
.sp-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 640px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 8vw, 8.5rem) clamp(2rem, 6vw, 7rem) clamp(4rem, 7vw, 7rem) 0;
}
.sp-hero-copy::after {
  content: "";
  position: absolute;
  right: -8vw;
  bottom: 10%;
  width: clamp(140px, 17vw, 270px);
  aspect-ratio: 1;
  border: 1px solid rgba(221, 143, 161, .4);
  border-radius: 48% 52% 45% 55% / 56% 42% 58% 44%;
  pointer-events: none;
}
.sp-hero .sp-kicker { color: var(--sp-gold); }
.sp-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--sp-white);
  font-size: clamp(4.2rem, 7vw, 8.1rem);
  line-height: .9;
}
.sp-hero h1 em { display: block; color: var(--sp-coral); font-weight: 500; }
/* Lange Woerter (Neurographica) duerfen nie in die Bildspalte laufen: Schrift folgt der Spaltenbreite (28.07.) */
@supports (font-size: 1cqw) {
  @media (min-width: 1001px) {
    .sp-hero-copy { container-type: inline-size; }
    .sp-hero h1 { font-size: clamp(3.2rem, 12.4cqw, 8.1rem); }
  }
}
.sp-hero-intro {
  max-width: 51ch;
  margin: 1.65rem 0 0;
  color: #E8E9ED;
  font-size: clamp(1.05rem, .98rem + .34vw, 1.25rem);
  line-height: 1.62;
}
.sp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.4rem;
  margin-top: 2rem;
  color: #C4C6CD;
  font-family: var(--v13-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* R3-ABOUT-01: Der Punkt sitzt auf der ersten Textzeile, auch wenn der Eintrag zweizeilig laeuft. */
.sp-hero-meta span { display: inline-flex; align-items: flex-start; gap: .5rem; }
.sp-hero-meta span::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: calc(.825em - 3px); border-radius: 50%; background: var(--sp-coral); }
.sp-hero-media {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: var(--sp-coral);
}
.sp-hero-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--v13-ease); }
/* Runde 3, R3-SITE-01: Bilder laden gerade und ruhig. Erst beim Mouseover neigen sie sich leicht. */
.sp-hero:hover .sp-hero-media img { transform: rotate(1.2deg); }
.sp-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 12px rgba(74, 77, 86, .08);
  pointer-events: none;
}
.sp-hero-caption {
  position: absolute;
  z-index: 2;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: .58rem .8rem;
  background: rgba(74, 77, 86, .82);
  color: #fff;
  font-family: var(--v13-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.sp-hero--portrait .sp-hero-media {
  padding: clamp(2.5rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 78% 18%, rgba(221, 143, 161, .16), transparent 46%), radial-gradient(circle at 28% 80%, rgba(227, 207, 154, .10), transparent 42%), var(--sp-ink);
}
.sp-hero--portrait .sp-hero-media::before {
  content: "";
  position: absolute;
  width: clamp(300px, 33vw, 430px);
  aspect-ratio: 1;
  transform: translate(-7%, 5%);
  border: 1px solid rgba(221, 143, 161, .28);
  border-radius: 50%;
  pointer-events: none;
}
.sp-hero--portrait .sp-hero-media::after {
  content: "";
  position: absolute;
  width: clamp(210px, 23vw, 300px);
  aspect-ratio: 1;
  transform: translate(34%, -34%);
  border: 1px solid rgba(252, 252, 251, .13);
  border-radius: 50%;
  pointer-events: none;
}
.sp-hero--portrait .sp-hero-media img {
  position: relative;
  z-index: 1;
  width: min(100%, 320px);
  height: auto;
  max-height: 440px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(252, 252, 251, .34), 0 0 70px rgba(221, 143, 161, .3), 0 24px 55px rgba(0, 0, 0, .4);
}
.sp-hero--drawing .sp-hero-media { padding: clamp(1.5rem, 4vw, 4rem); display: grid; place-items: center; }
.sp-hero--drawing .sp-hero-media img {
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border: 12px solid var(--sp-white);
  box-shadow: 0 30px 80px rgba(74, 77, 86, .28);
}

/* Editorial building blocks */
.sp-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.sp-split--reverse { grid-template-columns: 1.12fr .88fr; }
.sp-sticky { position: sticky; top: 112px; }
.sp-copy { display: grid; gap: 1.15rem; }
.sp-copy p { margin: 0; }
.sp-copy strong { color: var(--sp-ink); }
.sp-section--ink .sp-copy strong { color: #fff; }

.sp-rule-list { margin: 0; padding: 0; list-style: none; counter-reset: item; }
.sp-rule-list li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1.1rem, 2.5vw, 2.6rem);
  padding: clamp(1.6rem, 3vw, 2.8rem) 0;
  border-top: 1px solid var(--sp-line);
}
.sp-rule-list li:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-rule-list li::before {
  content: "0" counter(item);
  color: var(--sp-coral);
  font-family: var(--v13-display);
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  line-height: .85;
}
.sp-section--ink .sp-rule-list li { border-color: var(--sp-light-line); }
.sp-section--ink .sp-rule-list li::before { color: var(--sp-gold); }
.sp-rule-list h3 { margin: 0 0 .5rem; font-size: clamp(1.65rem, 2.3vw, 2.5rem); line-height: 1; }
.sp-rule-list p { max-width: 58ch; margin: 0; color: #5D616C; }
.sp-section--ink .sp-rule-list p { color: #C4C6CD; }

.sp-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.5rem, 5vw, 5rem); background: var(--sp-line); border: 1px solid var(--sp-line); }
@media (min-width: 1001px) {
  .sp-card-grid:has(> .sp-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-card-grid:has(> .sp-card:nth-child(4)) .sp-card { min-height: 280px; }
}
.sp-card {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.7rem);
  border: 1px solid transparent;
  background: var(--sp-white);
  overflow: hidden;
  transition: transform .45s var(--v13-ease), box-shadow .45s var(--v13-ease), border-color .45s var(--v13-ease);
}
.sp-card::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 10rem;
  aspect-ratio: 1;
  border: 1px solid rgba(174, 71, 95, .22);
  border-radius: 55% 45% 49% 51%;
  transition: transform .45s var(--v13-ease);
}
.sp-card:hover {
  position: relative;
  z-index: 1;
  transform: translateY(-6px);
  border-color: rgba(221, 143, 161, .65);
  box-shadow: 0 22px 50px rgba(174, 71, 95, .12);
}
.sp-card:hover::after { transform: translate(-1rem, -1rem) rotate(15deg); }
.sp-card-no { color: var(--sp-coral); font-family: var(--v13-mono); font-size: .64rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.sp-card h3 { margin: auto 0 .8rem; color: var(--sp-ink); font-size: clamp(1.8rem, 2.6vw, 2.8rem); }
.sp-card p { margin: 0; color: #5D616C; font-size: .95rem; }
.sp-card--gold { background: #F2E7EE; }
.sp-card--gold p { color: #5D616C; }
.sp-card--gold .sp-card-no { color: var(--sp-coral-dark); }
.sp-card--gold h3 { color: var(--sp-ink); }
.sp-card--ink { background: var(--sp-ink); }
.sp-card--ink h3 { color: #fff; }
.sp-card--ink p { color: #C4C6CD; }
.sp-card--ink .sp-card-no { color: var(--sp-gold); }
/* Auf dunklen Sektionen muessen Ink-Karten und Rasterlinien vom Hintergrund abheben (HOW-05, Runde 2) */
.sp-section--ink .sp-card-grid { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16); }
.sp-section--ink .sp-card--ink { background: var(--sp-ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

.sp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(2.5rem, 5vw, 5rem) 0 0; border-block: 1px solid var(--sp-line); }
.sp-fact { padding: 1.7rem clamp(1rem, 2.2vw, 2rem); border-left: 1px solid var(--sp-line); }
.sp-fact:first-child { border-left: 0; }
.sp-fact dt { margin-bottom: .55rem; color: var(--sp-coral-dark); font-family: var(--v13-mono); font-size: .64rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.sp-fact dd { margin: 0; color: var(--sp-ink); font-size: .92rem; line-height: 1.45; }
.sp-split .sp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-split .sp-fact:nth-child(3) { border-left: 0; }
.sp-split .sp-fact:nth-child(n+3) { border-top: 1px solid var(--sp-line); }

.sp-art-frame { position: relative; margin: 0; padding: clamp(1rem, 2.2vw, 2rem); background: var(--sp-white); box-shadow: 0 30px 80px rgba(74, 77, 86, .14); transition: transform .8s var(--v13-ease); }
/* Muss .sp-reveal.is-visible schlagen, darum mit .sp-page qualifiziert. */
.sp-page .sp-art-frame:hover { transform: rotate(-1deg); }
.sp-art-frame img { width: 100%; max-height: 760px; object-fit: cover; }
.sp-art-frame figcaption { margin-top: .8rem; color: #656974; font-family: var(--v13-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }

.sp-quote { margin: 0; padding: clamp(2rem, 4vw, 4rem); border-left: 4px solid var(--sp-gold); background: var(--sp-ink-2); }
.sp-quote blockquote { margin: 0; color: #fff; font-family: var(--v13-display); font-size: clamp(2.15rem, 3.6vw, 4rem); line-height: 1.04; letter-spacing: -.03em; }
.sp-quote figcaption { margin-top: 1.2rem; color: var(--sp-gold-soft); font-family: var(--v13-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }

/* Offer and course pages */
.sp-offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 5rem); }
.sp-offer {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 4vw, 4rem);
  border: 1px solid var(--sp-line);
  background: var(--sp-white);
  overflow: hidden;
  transition: transform .45s var(--v13-ease), box-shadow .45s var(--v13-ease), border-color .45s var(--v13-ease);
}
.sp-offer:hover {
  position: relative;
  z-index: 1;
  transform: translateY(-6px);
  border-color: rgba(221, 143, 161, .65);
  box-shadow: 0 22px 50px rgba(174, 71, 95, .12);
}
.sp-offer--feature { background: var(--sp-ink); color: #E8E9ED; }
.sp-offer--feature h3 { color: #fff; }
.sp-offer::before {
  content: "";
  position: absolute;
  top: -7rem;
  right: -5rem;
  width: 18rem;
  aspect-ratio: 1;
  border: 1px solid rgba(174, 71, 95, .22);
  border-radius: 45% 55% 58% 42%;
}
.sp-offer--feature::before { border-color: rgba(221, 143, 161, .4); }
.sp-offer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sp-label { color: var(--sp-coral-dark); font-family: var(--v13-mono); font-size: .65rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.sp-offer--feature .sp-label { color: var(--sp-gold); }
.sp-price { text-align: right; color: var(--sp-ink); font-family: var(--v13-display); font-size: clamp(2.5rem, 4.5vw, 4.8rem); line-height: .8; }
.sp-price small { display: block; margin-top: .6rem; font-family: var(--v13-mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; }
.sp-offer--feature .sp-price { color: var(--sp-coral); }
.sp-offer h3 { max-width: 9ch; margin: auto 0 1rem; font-size: clamp(2.7rem, 4.2vw, 4.7rem); line-height: .92; }
.sp-offer > p { max-width: 48ch; margin: 0 0 1.6rem; }
.sp-offer-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-top: 1.25rem; border-top: 1px solid var(--sp-line); }
.sp-offer--feature .sp-offer-footer { border-color: var(--sp-light-line); }
.sp-offer-footer span { color: #656974; font-family: var(--v13-mono); font-size: .63rem; letter-spacing: .09em; text-transform: uppercase; }
.sp-offer--feature .sp-offer-footer span { color: #C4C6CD; }

.sp-course-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3rem, 6vw, 6rem); }
.sp-course-path::before { content: ""; position: absolute; top: 23px; left: 4%; right: 4%; height: 1px; background: var(--sp-line); }
.sp-path-step { position: relative; padding-right: clamp(1rem, 2vw, 2.4rem); }
.sp-path-dot { position: relative; z-index: 1; width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid var(--sp-ink); border-radius: 50%; background: var(--sp-paper); color: var(--sp-ink); font-family: var(--v13-mono); font-size: .65rem; }
.sp-path-step.is-current .sp-path-dot { border-color: var(--sp-gold); background: var(--sp-gold); }
.sp-path-step h3 { margin: 1.3rem 0 .6rem; font-size: clamp(1.55rem, 2vw, 2.2rem); }
.sp-path-step p { margin: 0; color: #5D616C; font-size: .9rem; }
.sp-path-step a { color: var(--sp-coral-dark); }

.sp-course-list { display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 5rem); background: var(--sp-light-line); border: 1px solid var(--sp-light-line); }
.sp-course {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(2rem, 5vw, 5rem);
  background: var(--sp-ink-2);
}
.sp-course-index { color: var(--sp-gold-soft); font-family: var(--v13-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.sp-course h3 { max-width: 10ch; margin: 1rem 0; color: #fff; font-size: clamp(2.7rem, 4.8vw, 5rem); }
/* Lange Kursnamen (NeuroComposition) duerfen nicht in die Textspalte laufen (28.07.) */
@supports (font-size: 1cqw) {
  @media (min-width: 1001px) {
    .sp-course > div:first-child { container-type: inline-size; }
    .sp-course h3 { font-size: clamp(2.2rem, 11.6cqw, 5rem); }
  }
}
.sp-course-status { display: inline-flex; padding: .45rem .7rem; border: 1px solid rgba(233,223,196,.8); border-radius: 99px; color: var(--sp-gold-soft); font-family: var(--v13-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.sp-course-copy > p { margin: 0 0 1.4rem; color: #E8E9ED; }
.sp-course-facts { margin: 0 0 1.7rem; padding: 0; }
.sp-course-facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--sp-light-line); }
.sp-course-facts dt { color: #D6D8DD; font-family: var(--v13-mono); font-size: .61rem; letter-spacing: .09em; text-transform: uppercase; }
.sp-course-facts dd { margin: 0; color: #fff; font-size: .86rem; }

/* Events */
.sp-event-duo { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; margin-top: clamp(2.5rem, 5vw, 5rem); }
.sp-event-option { display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 5rem); background: var(--sp-white); }
.sp-event-option + .sp-event-option { background: #F2E7EE; }
.sp-event-option h3 { max-width: 8ch; margin: auto 0 1rem; font-size: clamp(3rem, 5vw, 5.6rem); }
.sp-event-option p { max-width: 46ch; margin: 0 0 1.8rem; }
.sp-event-detail { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--sp-line); color: #656974; font-family: var(--v13-mono); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.sp-event-option + .sp-event-option .sp-label { color: var(--sp-coral-dark); }
.sp-event-option + .sp-event-option .sp-event-detail { color: var(--sp-ink); }
/* Events V16.12: konkretes Event und Event-Historie */
.sp-event-next .sp-course-list { background: none; border: 0; }
.sp-event-past .sp-course-copy .sp-gallery-strip { margin-top: 1.6rem; gap: .6rem; }
.sp-event-past .sp-course-copy .sp-gallery-strip figure { aspect-ratio: 4 / 3; }

.sp-included { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(2.5rem, 5vw, 5rem); background: var(--sp-light-line); }
.sp-included article { min-height: 330px; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.6rem); background: var(--sp-ink-2); transition: background .3s ease; }
.sp-included article:hover { background: var(--sp-ink-2); box-shadow: inset 0 0 0 1px rgba(252, 252, 251, .4); }
.sp-included span { color: var(--sp-gold-soft); font-family: var(--v13-mono); font-size: .64rem; letter-spacing: .1em; }
.sp-included h3 { margin: auto 0 .7rem; color: #fff; font-size: clamp(2rem, 3vw, 3.2rem); }
.sp-included p { margin: 0; color: #D6D8DD; font-size: .9rem; }

/* Neurographica overview and benefit pages */
.sp-definition {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.sp-definition-statement { max-width: 20ch; margin: 0; color: var(--sp-ink); font-family: var(--v13-display); font-size: clamp(3rem, 5.3vw, 5.8rem); line-height: .98; letter-spacing: -.04em; }
.sp-definition-statement em { color: var(--sp-coral); font-weight: 500; }
.sp-neuro-mark { width: 100%; max-width: 390px; overflow: visible; }
.sp-neuro-mark .nm-line { fill: none; stroke: var(--sp-ink); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nm-draw 2s var(--v13-ease) forwards; }
.sp-neuro-mark .nm-ring { fill: none; stroke: var(--sp-coral); stroke-width: 1.4; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nm-draw .9s ease-out forwards; }
.sp-neuro-mark .nm-node { fill: var(--sp-gold); stroke: var(--sp-ink); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; scale: 0; animation: nm-pop .65s cubic-bezier(.34, 1.56, .64, 1) forwards, nm-float 6.5s ease-in-out infinite alternate; }
.sp-neuro-mark .nm-node--rose { fill: var(--sp-coral); }
.sp-neuro-mark .nm-node--small { fill: var(--sp-gold-soft); }
.sp-neuro-mark .nm-field { opacity: 0; animation: nm-field-in 1.7s ease forwards; }
@keyframes nm-draw { to { stroke-dashoffset: 0; } }
@keyframes nm-pop { to { scale: 1; } }
@keyframes nm-float { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes nm-field-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sp-neuro-mark .nm-line, .sp-neuro-mark .nm-ring { animation: none; stroke-dashoffset: 0; }
  .sp-neuro-mark .nm-node { animation: none; scale: 1; }
  .sp-neuro-mark .nm-field { animation: none; opacity: 1; }
}

/* Zertifikate auf der About-Seite (28.07.), weisser Rahmen und Mono-Caption wie die Galerie-Karten */
.sp-cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); max-width: 880px; margin-top: clamp(2.5rem, 5vw, 5rem); }
.sp-cert-grid figure { margin: 0; }
.sp-cert-item { display: block; width: 100%; padding: 10px; border: 1px solid var(--sp-line); background: var(--sp-white); box-shadow: 0 18px 45px rgba(74, 77, 86, .14); cursor: zoom-in; transition: transform .45s var(--v13-ease), box-shadow .45s var(--v13-ease); }
.sp-cert-item:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 0 26px 60px rgba(74, 77, 86, .2); }
.sp-cert-grid img { display: block; width: 100%; height: auto; }
.sp-cert-grid figcaption { margin-top: .9rem; color: #656974; font-family: var(--v13-mono); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 640px) { .sp-cert-grid { grid-template-columns: 1fr; } }

/* Gleichmaessige Kacheln statt 1 gross + 2 klein (Wunsch Philippe, 28.07.) */
.sp-gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(3rem, 6vw, 6rem); }
.sp-gallery-strip:has(> figure:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.sp-gallery-strip:has(> figure:nth-child(4)) figure { aspect-ratio: 1 / 1; }
.sp-gallery-strip figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.sp-gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--v13-ease); }
.sp-gallery-strip figure:hover img { transform: scale(1.035); }

.sp-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--sp-line); border-left: 1px solid var(--sp-line); }
.sp-benefit {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.7rem);
  border-right: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
  background: rgba(252, 252, 251, .35);
  transition: background .35s ease, transform .35s var(--v13-ease), box-shadow .35s var(--v13-ease);
}
.sp-benefit:hover { position: relative; z-index: 1; background: var(--sp-white); transform: translateY(-4px); box-shadow: 0 22px 50px rgba(174, 71, 95, .12); }
.sp-benefit span { color: var(--sp-coral-dark); font-family: var(--v13-mono); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; }
.sp-benefit h3 { margin: auto 0 .75rem; font-size: clamp(1.9rem, 2.8vw, 3rem); }
.sp-benefit p { margin: 0; color: #5D616C; font-size: .91rem; }
.sp-benefit--accent { background: #F2E7EE; }
.sp-benefit--accent span { color: var(--sp-coral-dark); }
.sp-benefit--accent p { color: #5D616C; }

.sp-disclaimer { margin-top: 2rem; padding: 1.25rem 1.4rem; border-left: 3px solid var(--sp-coral-dark); background: rgba(255,255,255,.45); color: #656974; font-size: .83rem; }
.sp-plain-list { margin: 1.5rem 0 2rem; padding-left: 1.15rem; }
.sp-plain-list li { margin: .5rem 0; color: #5D616C; }
.sp-section--ink .sp-plain-list li { color: #D6D8DD; }

/* Exercise and video */
.sp-exercise-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.sp-video { margin: 0; }
.sp-video-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sp-ink); box-shadow: 0 30px 80px rgba(74,77,86,.18); }
.sp-video-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.9); }
/* Bildertausch V16.8: Das Cover ist jetzt das echte 16:9 YouTube-Thumbnail mit Logo und Titeltext.
   Die kraeftige Abdunklung des alten Zeichnungs-Covers wuerde beides schlucken, darum hier nur
   eine leichte Absenkung, gerade genug fuer den Kontrast zum Play-Button. */
.sp-video-media--thumb img { filter: brightness(.94) saturate(1); }
.sp-video-play {
  position: absolute;
  inset: 0;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin: auto;
  padding: 0 0 0 5px;
  border: 0;
  border-radius: 50%;
  background: var(--sp-coral);
  color: #fff;
  cursor: pointer;
  transition: transform .3s var(--v13-ease), background .3s ease;
}
.sp-video-play:hover { transform: scale(1.08); background: var(--sp-coral-dark); color: #fff; }
.sp-video-iframe { width: 100%; height: 100%; border: 0; }
.sp-video figcaption { margin-top: .8rem; color: #656974; font-size: .78rem; text-align: center; }
.sp-materials { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.sp-materials li { padding: .55rem .8rem; border: 1px solid var(--sp-line); border-radius: 99px; color: var(--sp-ink); font-size: .78rem; }

/* Booking */
.sp-booking-frame { min-height: 240px; display: grid; place-items: center; margin-top: 2.2rem; border: 1px solid var(--sp-light-line); background: var(--sp-ink-2); }
.sp-booking-frame:has(.sp-cal-embed) { min-height: 620px; display: block; padding: 0; background: #fff; }
.sp-cal-embed { width: 100%; min-height: 620px; }
.sp-booking-hint { max-width: 36ch; margin: 0; padding: 2rem; color: #D6D8DD; text-align: center; }
.sp-booking-note { margin: .8rem 0 0; color: #D6D8DD; font-size: .75rem; }

/* Forms */
.sp-form-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(290px, .84fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.sp-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: clamp(1.6rem, 4vw, 4rem);
  background: var(--sp-white);
  box-shadow: 0 25px 70px rgba(74, 77, 86, .09);
}
.sp-field { display: grid; gap: .48rem; }
.sp-field--full { grid-column: 1 / -1; }
.sp-field label,
.sp-field > span { color: var(--sp-ink); font-size: .76rem; font-weight: 650; }
.sp-field small { color: #656974; font-weight: 400; }
.sp-form input:not([type="checkbox"]),
.sp-form select,
.sp-form textarea {
  width: 100%;
  min-height: 54px;
  padding: .85rem 1rem;
  border: 0;
  border-bottom: 1px solid #7A7D87;
  border-radius: 0;
  outline: 0;
  background: #F5EDF2;
  color: var(--sp-ink);
  font: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.sp-form textarea { min-height: 150px; resize: vertical; }
.sp-form input:focus,
.sp-form select:focus,
.sp-form textarea:focus { border-color: var(--sp-coral-dark); background: #fff; }
.sp-consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: #656974; font-size: .78rem; }
.sp-consent input { width: 18px; height: 18px; margin-top: .12rem; accent-color: var(--sp-coral-dark); }
.sp-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sp-privacy-note { margin: 0; color: #656974; font-size: .73rem; }
.sp-hp { position: absolute !important; left: -9999px !important; }
.sp-form-side { padding-top: .5rem; }
.sp-form-side h2 { max-width: 14ch; margin: 0 0 1.4rem; font-size: clamp(2.6rem, 4vw, 4.3rem); }
.sp-contact-links { display: grid; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--sp-line); list-style: none; }
.sp-contact-links li { border-bottom: 1px solid var(--sp-line); }
.sp-contact-links a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; color: var(--sp-ink); font-size: .86rem; text-decoration: none; }
.sp-contact-links a::after { content: "↗"; color: var(--sp-coral-dark); }

/* About */
/* R3-ABOUT-03: Das grosse R.-Monogramm ist entfernt, die Story laeuft jetzt einspaltig. */
.sp-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 8rem); }
.sp-story-copy { display: grid; gap: 1.4rem; max-width: 74ch; }
.sp-story-copy p { margin: 0; font-size: clamp(1.06rem, 1rem + .24vw, 1.2rem); line-height: 1.7; }
.sp-story-copy p:first-child::first-letter { float: left; margin: .05em .12em 0 0; color: var(--sp-coral); font-family: var(--v13-display); font-size: 5.8em; line-height: .72; }

.sp-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(2.5rem, 5vw, 5rem); background: var(--sp-light-line); }
.sp-value { min-height: 300px; padding: clamp(1.7rem, 4vw, 3.5rem); background: var(--sp-ink-2); }
.sp-value span { color: var(--sp-gold-soft); font-family: var(--v13-mono); font-size: .63rem; letter-spacing: .1em; }
.sp-value h3 { margin: 4rem 0 .75rem; color: #fff; }
.sp-value p { max-width: 47ch; margin: 0; color: #D6D8DD; }

/* CTA */
.sp-cta { position: relative; overflow: hidden; padding-block: clamp(5rem, 9vw, 9rem); background: var(--sp-coral); color: #FCFCFB; }
.sp-cta .sp-kicker { color: #5A2331; }
.sp-cta::after {
  content: "";
  position: absolute;
  right: -8vw;
  top: -10vw;
  width: min(50vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 48% 52% 57% 43%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .025), 0 0 0 140px rgba(255, 255, 255, .018);
  transform: rotate(24deg);
}
.sp-cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: end; }
.sp-cta h2 { max-width: 11ch; margin: 0; color: #5A2331; font-size: clamp(3.8rem, 7vw, 7.8rem); }
.sp-cta-copy p { max-width: 42ch; margin: 0 0 1.6rem; color: #5A2331; }
.sp-cta .sp-button--ink { background: #FFFFFF; color: var(--sp-coral-dark); }
.sp-cta .sp-button--ink:hover { background: #F2E7EE; color: var(--sp-coral-dark); }
.sp-cta .sp-button--line { border-color: rgba(90, 35, 49, .6); color: #5A2331; }
.sp-cta .sp-button--line:hover { border-color: #5A2331; background: #FFFFFF; color: var(--sp-coral-dark); }

/* Legal and utility pages */
.sp-legal-hero { padding-block: clamp(5rem, 9vw, 9rem); background: var(--sp-ink); }
.sp-legal-hero h1 { margin: 0; color: #fff; font-size: clamp(4rem, 8vw, 8.5rem); }
.sp-legal-hero .sp-kicker { color: var(--sp-gold); }
.sp-legal-layout { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: clamp(2.5rem, 7vw, 8rem); justify-content: center; align-items: start; }
.sp-legal-nav { position: sticky; top: 115px; display: grid; gap: .65rem; }
.sp-legal-nav a { color: #656974; font-size: .75rem; text-decoration: none; }
.sp-legal-nav a:hover { color: var(--sp-coral-dark); }
.sp-prose h2 { margin: 2.3em 0 .7em; font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1; }
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose h3 { margin: 1.7em 0 .45em; font-size: 1.5rem; }
.sp-prose p,
.sp-prose li { color: #5D616C; line-height: 1.72; }
.sp-prose a { color: var(--sp-coral-dark); }
.sp-prose address { color: var(--sp-ink); font-style: normal; font-size: 1.05rem; line-height: 1.7; }

.sp-success { min-height: calc(100svh - 82px); display: grid; align-items: center; background: var(--sp-ink); color: #E8E9ED; }
.sp-success-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; padding-block: clamp(5rem, 10vw, 10rem); }
.sp-success h1 { max-width: 12ch; margin: 0; color: #fff; font-size: clamp(4.5rem, 8vw, 8.6rem); }
.sp-success h1 em { display: block; color: var(--sp-gold); font-weight: 500; }
.sp-success p { max-width: 48ch; }
.sp-success-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.sp-success-art::before,
.sp-success-art::after { content: ""; position: absolute; border: 1px solid rgba(227,207,154,.5); border-radius: 44% 56% 52% 48%; }
.sp-success-art::before { inset: 10%; transform: rotate(15deg); }
.sp-success-art::after { inset: 24%; transform: rotate(-22deg); }
.sp-success-art span { width: 20%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--sp-gold); color: var(--sp-ink); font-size: 2rem; }

/* Motion and accessibility */
.sp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--v13-ease), transform .8s var(--v13-ease); }
.sp-reveal.is-visible { opacity: 1; transform: none; }
.sp-reveal:nth-child(2) { transition-delay: .07s; }
.sp-reveal:nth-child(3) { transition-delay: .14s; }
.sp-reveal:nth-child(4) { transition-delay: .21s; }
.sp-page :focus-visible { outline: 2px solid var(--sp-coral-dark); outline-offset: 4px; }
.sp-section--ink :focus-visible { outline-color: var(--sp-gold); }

@media (max-width: 1000px) {
  .sp-hero { min-height: 0; }
  .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-hero-copy { min-height: 560px; padding-right: 0; }
  .sp-hero-media { min-height: 56vw; max-height: 680px; }
  .sp-hero--portrait .sp-hero-media { min-height: 0; max-height: none; padding: 2.5rem 1.5rem 3rem; }
  /* V16.11: Die Zeichnungen sind schon durch die img-Regel begrenzt (height auto, max-height 72vh,
     object-fit contain). Ein zusaetzlicher Deckel am Rahmen hat zusammen mit overflow:hidden
     Hochformate wie den Events-Baum oben und unten abgeschnitten. */
  .sp-hero--drawing .sp-hero-media { max-height: none; }
  .sp-hero-copy::after { right: 2vw; }
  .sp-split,
  .sp-split--reverse,
  .sp-definition,
  .sp-exercise-intro,
  .sp-form-layout,
  .sp-story,
  .sp-success-grid { grid-template-columns: 1fr; }
  .sp-sticky,
  .sp-legal-nav { position: static; }
  .sp-card-grid,
  .sp-benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-facts { grid-template-columns: repeat(2, 1fr); }
  .sp-fact:nth-child(3) { border-left: 0; }
  .sp-course-path { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
  .sp-course-path::before { display: none; }
  .sp-included { grid-template-columns: 1fr 1fr; }
  .sp-legal-layout { grid-template-columns: 1fr; }
  .sp-legal-nav { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
}

@media (max-width: 760px) {
  .sp-hero-copy { min-height: 510px; }
  .sp-hero h1 { font-size: clamp(3.8rem, 16vw, 6rem); }
  .sp-hero-media { min-height: 78vw; }
  .sp-hero--portrait .sp-hero-media { min-height: 0; }
  .sp-hero--portrait .sp-hero-media img { width: min(78%, 280px); }
  .sp-hero--drawing .sp-hero-media { padding: 1.5rem; }
  .sp-hero h1 { font-size: clamp(3.2rem, 14vw, 5.4rem); }
  .sp-card-grid,
  .sp-offers,
  .sp-event-duo,
  .sp-course-path,
  .sp-benefit-grid,
  .sp-values,
  .sp-cta-grid { grid-template-columns: 1fr; }
  .sp-event-duo { min-height: 0; }
  .sp-event-option { min-height: 520px; }
  .sp-offer { min-height: 510px; }
  .sp-course { grid-template-columns: 1fr; }
  .sp-gallery-strip,
  .sp-gallery-strip:has(> figure:nth-child(4)) { grid-template-columns: 1fr 1fr; }
  .sp-rule-list li { grid-template-columns: 3.2rem 1fr; }
  .sp-form { grid-template-columns: 1fr; }
  .sp-field--full,
  .sp-consent,
  .sp-form-actions { grid-column: 1; }
  .sp-success-art { max-width: 420px; }
}

@media (max-width: 560px) {
  .sp-section { padding-block: 4.5rem; }
  .sp-hero-copy { min-height: auto; }
  .sp-hero h1 { font-size: clamp(2.75rem, 13vw, 4.6rem); }
  .sp-hero-intro { font-size: 1rem; }
  .sp-hero-meta { letter-spacing: .06em; font-size: .62rem; }
  /* V16.11: Der fruehere Deckel 62vw war auf Querformat kalibriert und schnitt das
     Hochformat (Events-Baum) ab. Nur noch min-height zuruecksetzen, die Obergrenze
     regelt die img-Regel (siehe Breakpoint 1000px). */
  .sp-hero--drawing .sp-hero-media { min-height: 0; }
  .sp-legal-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .sp-success h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .sp-facts,
  .sp-included { grid-template-columns: 1fr; }
  .sp-fact { border-left: 0; border-top: 1px solid var(--sp-line); }
  .sp-course-facts div { grid-template-columns: 1fr; gap: .3rem; }
  .sp-gallery-strip,
  .sp-gallery-strip:has(> figure:nth-child(4)) { grid-template-columns: 1fr; }
  .sp-gallery-strip figure { grid-column: auto; aspect-ratio: 4 / 3; }
  .sp-offer-footer,
  .sp-event-detail { align-items: flex-start; flex-direction: column; }
  .sp-cta h2 { font-size: clamp(3.4rem, 16vw, 5.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-page *, .sp-page *::before, .sp-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .sp-reveal { opacity: 1; transform: none; }
  .sp-page .sp-hero:hover .sp-hero-media img,
  .sp-page .sp-art-frame:hover { transform: none; }
}

@media print {
  .sp-page .v13-header,
  .sp-page .v13-footer,
  .sp-legal-nav { display: none; }
  .sp-legal-hero { padding: 2rem 0; background: #fff; }
  .sp-legal-hero h1 { color: #000; }
  .sp-section { padding-block: 2rem; }
  .sp-prose { max-width: none; }
}

/* V16.13 */
/* Materialtipp auf how-it-works: Der Hinweis unter den vier Karten ist ein voller
   Absatz, keine Fussnote. Die globale .sp-booking-note-Regel (.75rem, #D6D8DD) bleibt
   fuer die kurzen Stempelzeilen auf coaching und courses unveraendert. Der Selektor
   greift nur dort, wo eine .sp-card-grid direkt vor dem Hinweis steht, und das ist
   ausschliesslich neurographica/how-it-works. */
.sp-section--ink .sp-card-grid + .sp-booking-note {
  max-width: 72ch;
  margin-top: 1.6rem;
  color: #E8E9ED;
  font-size: 1rem;
  line-height: 1.6;
}