@charset "UTF-8";
/* ──────────────────────────────────────────────────────────
   overlay.css — additions on top of CD's styles, not edits to them.
   Keeps the design-system files (styles.css, speaking.css, etc.)
   pristine and easy to redo if Marco wants a CD revision.
   ────────────────────────────────────────────────────────── */

/* Consent checkbox on signup forms — small, calm, fits the rule of the inputs */
.td-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-3);
  cursor: pointer;
}
.td-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--ochre);
  cursor: pointer;
}
.td-consent a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--rule-strong);
}
.td-consent a:hover {
  color: var(--ink);
  text-decoration-color: var(--ochre);
}

/* Status line under signup form */
.td-form-status {
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  min-height: 1em;
}
.td-form-status.is-ok    { color: var(--pitch); }
.td-form-status.is-error { color: oklch(50% 0.18 25); }

/* Disabled state when submitting */
.td-signup.is-submitting button {
  opacity: 0.55;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   Speaking hero fixes
   ──────────────────────────────────────────────────────────
   Bug: CD wrote `.sp-headline { font-size: clamp(1.9rem, 3.4vw, 2.8rem) }`
   but `h1.display { font-size: var(--h1) }` in styles.css has higher
   specificity, so the homepage-scale H1 (up to 6.5rem) was winning on
   the /speaking page — making the headline overflow and dwarf the
   portrait. Boost specificity so `.sp-headline` actually applies, and
   align the grid baseline to match the homepage rhythm.            */

h1.display.sp-headline {
  font-size: clamp(2.6rem, 5.5vw, 4.7rem);
  max-width: 21ch;
}

.sp-hero .sp-hero-grid {
  align-items: end;
}

.sp-hero .sp-subhead {
  max-width: 48ch;
}

/* ──────────────────────────────────────────────────────────
   Simplified legal page head — replaces CD's `.lg-masthead-section` block.
   Plain H1 + short lede, no document classification, no cross-doc tabs.
   The footer already links between Privacy / Impressum / Cookies / Terms. */
.lg-head {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.lg-content-wide {
  max-width: 70ch;
  margin-inline: auto;
}

/* Native HTML5 video player — give it the editorial frame around it */
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  background: var(--ink);
}
.video-card.has-video .poster,
.video-card.has-video .play,
.video-card.has-video .asset-note {
  display: none;
}