/*!
 * KayJay's Dance Center — Design System
 * Implements the relaunch design canvas (artboards: Main, HipHop, Kursseite,
 * Tanzlehrerprofil, Navigation, Footer, HomeMobil, NavMobil) for the kj-*
 * class vocabulary already used in the staging page content.
 *
 * ACCENT COLOR: the brand accent is the logo indigo, #404AA9, defined ONCE
 * below as --kj-accent. The hover and soft tints derive from it via color-mix,
 * so a future logo change means editing a single value.
 */

/* ---------- Fonts (self-hosted, GDPR-clean, no external requests) ---------- */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --kj-bg: #121114;
  --kj-surface: #1A191D;
  --kj-surface-2: #232228;
  --kj-surface-3: #1E1D22;
  --kj-line: #2A2830;
  --kj-text: #F5F3EE;
  --kj-muted: #A29E97;
  --kj-dim: #6E6B65;
  --kj-light: #CFCBC4;
  --kj-accent: #404AA9;        /* logo indigo — the single source of truth */
  --kj-accent-text: #848AC7;   /* --kj-accent lightened for text on dark, raised in 1.1.8 to clear WCAG AA on every surface (4.84–5.77:1) */
  --kj-accent-hover: color-mix(in oklab, var(--kj-accent) 30%, white);
  --kj-accent-soft:  color-mix(in oklab, var(--kj-accent) 17%, white);
  --kj-display: Anton, 'Arial Narrow', Impact, sans-serif;
  --kj-body: Archivo, Helvetica, Arial, sans-serif;
  --kj-max: 1312px;            /* 1440 canvas minus 2×64 gutter */
}

/* Fallback for browsers without color-mix() (pre-2023): custom properties
   would otherwise fail at computed-value time. Regenerate these two only if
   --kj-accent changes; modern browsers derive them automatically above. */
@supports not (color: color-mix(in oklab, red 50%, white)) {
  :root {
    --kj-accent-hover: #C6C9E5;
    --kj-accent-soft:  #DEE0F0;
  }
}

/* ---------- Base (scoped to pages that opt in via .kj-page, plus header/footer) ---------- */
body:has(.kj-page) { background: var(--kj-bg); }
.kj-page, .kj-header, .kj-footer, .kj-cta {
  font-family: var(--kj-body);
  color: var(--kj-text);
  -webkit-font-smoothing: antialiased;
}
.kj-page { background: var(--kj-bg); overflow-x: clip; }
.kj-page a, .kj-footer a { color: var(--kj-accent-text); text-decoration: none; }
.kj-page a:hover, .kj-footer a:hover { color: var(--kj-accent-hover); }

/* Sections get consistent horizontal rhythm */
.kj-page > * { max-width: var(--kj-max); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 900px) { .kj-page > * { padding-left: 64px; padding-right: 64px; } }

/* Sections that sit outside .kj-page get the same rhythm. On the teacher
   profile pages "Eindrucke" and "Weitere Trainer:innen" are children of
   .entry-content, not of .kj-page, so the rule above never reached them and
   they rendered flush at x=0 while everything above them was indented.
   Direct child on purpose: a .kj-section inside .kj-page must not be padded
   twice. Same 900px breakpoint as the rule above, deliberately. */
.entry-content > .kj-section {
  max-width: var(--kj-max);
  margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
}
@media (min-width: 900px) {
  .entry-content > .kj-section { padding-left: 64px; padding-right: 64px; }
}

/* ---------- Typography ---------- */
.kj-page h1, .kj-page h2, .kj-page h3, .kj-disp {
  font-family: var(--kj-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--kj-text);
  line-height: 1.05;
  margin: 0 0 0.4em 0;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.kj-page h1 { font-size: clamp(40px, 6vw, 72px); }
.kj-page h2 { font-size: clamp(28px, 4vw, 44px); margin-top: 1.6em; }
.kj-page h3 { font-size: clamp(20px, 2.6vw, 26px); }
.kj-page p, .kj-page li { font-size: 16px; line-height: 1.7; color: var(--kj-light); }
.kj-page b, .kj-page strong { color: var(--kj-text); }

.kj-kicker, .kj-page .kj-kicker { font: 700 13px/1 var(--kj-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--kj-accent-text); margin-bottom: 14px; }
.kj-lead { font-size: 19px !important; line-height: 1.65 !important; color: var(--kj-muted) !important; max-width: 62ch; }
.kj-crumb { font: 500 13px/1 var(--kj-body); color: var(--kj-muted); letter-spacing: 0.04em; }
.kj-crumb a { color: var(--kj-muted); }
.kj-crumb a:hover { color: var(--kj-text); }
.kj-muted { color: var(--kj-muted); }

/* ---------- Buttons (exactly two styles) ---------- */
.kj-btn, .kj-btn--ghost {
  display: inline-block;
  font: 700 15px/1 var(--kj-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kj-btn { background: var(--kj-accent); color: #FFFFFF !important; }
.kj-btn:hover { background: color-mix(in oklab, var(--kj-accent) 85%, white); color: #FFFFFF !important; }
.kj-btn--ghost { background: transparent; border: 1px solid rgba(245, 243, 238, 0.4); color: var(--kj-text) !important; padding: 17px 27px; }
.kj-btn--ghost:hover { border-color: var(--kj-text); color: var(--kj-text) !important; }
.kj-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- Hero ---------- */
.kj-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 900px) { .kj-hero { grid-template-columns: 1.1fr 0.9fr; gap: 64px; padding-top: 80px; padding-bottom: 80px; } }
.kj-hero__text > * + * { margin-top: 18px; }

/* Full-bleed video hero. Migrated from page ID 18's inline <style id="kj-hero--full">
   block (kayjays.de/protostar/) — opt in per hero with .kj-hero--full. */
html, body { overflow-x: clip; }
.kj-hero--full { position: relative; display: block !important; isolation: isolate; overflow: hidden;
  width: auto; max-width: none; margin-left: 0; margin-right: 0;
  min-height: min(82vh, 820px); padding: clamp(56px, 12vh, 140px) clamp(20px, 7vw, 110px); box-sizing: border-box; }
.kj-hero--full > .kj-ph { position: absolute !important; inset: 0 !important; z-index: 0; margin: 0 !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; max-width: none !important; aspect-ratio: auto !important;
  background-size: cover; background-position: center 60%; }
.kj-hero--full > .kj-ph video { object-position: center 60%; }
.kj-hero--full::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,12,.78) 0%, rgba(10,10,12,.52) 50%, rgba(10,10,12,.18) 100%), linear-gradient(0deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,0) 45%); }
.kj-hero--full > .kj-hero__text { position: relative; z-index: 2; max-width: 42rem; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .kj-hero--full > .kj-ph video { display: none; } }

/* Photo container: real image or hatched placeholder */
.kj-ph {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--kj-surface-3) 0px, var(--kj-surface-3) 14px, var(--kj-surface-2) 14px, var(--kj-surface-2) 28px);
}
.kj-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kj-ph--wide { aspect-ratio: 16 / 9; }
.kj-ph-tag, .kj-ph__tag { position: absolute; left: 12px; bottom: 12px; background: rgba(18, 17, 20, 0.85); color: var(--kj-muted); font: 600 11px/1 var(--kj-body); letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 10px; z-index: 1; }
.kj-ph--short { aspect-ratio: 16 / 7; }

/* ---------- Cards & grids ---------- */
.kj-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .kj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-grid--2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .kj-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kj-card { background: var(--kj-surface); border: 1px solid var(--kj-line); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.kj-card h3 { margin: 0; }
.kj-card--accent { border-color: var(--kj-accent); }
.kj-card a.kj-more { font: 700 13px/1 var(--kj-body); letter-spacing: 0.12em; text-transform: uppercase; margin-top: auto; padding-top: 12px; }

/* ---------- FAQ (native details/summary — answers stay in the HTML) ---------- */
.kj-faq details { border-top: 1px solid var(--kj-line); }
.kj-faq details:last-child { border-bottom: 1px solid var(--kj-line); }
.kj-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font: 600 17px/1.4 var(--kj-body);
  color: var(--kj-text);
}
.kj-faq summary::-webkit-details-marker { display: none; }
.kj-faq summary::after { content: '+'; font: 400 26px/1 var(--kj-body); color: var(--kj-accent-text); flex-shrink: 0; }
.kj-faq details[open] summary::after { content: '–'; }
.kj-faq details > *:not(summary) { padding: 0 0 22px 0; max-width: 68ch; }

/* ---------- CTA band (pre-footer, every page) ---------- */
.kj-cta { background: var(--kj-accent); padding: 48px 24px; }
@media (min-width: 900px) { .kj-cta { padding: 56px 64px; } }
/* Works with an explicit __inner wrapper (footer pattern) and without one
   (the in-page .kj-cta blocks on staging, whose children are div + a). */
.kj-cta__inner, .kj-cta:not(:has(> .kj-cta__inner)) {
  max-width: var(--kj-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
@media (min-width: 900px) {
  .kj-cta__inner, .kj-cta:not(:has(> .kj-cta__inner)) { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
}
.kj-cta h2, .kj-cta .kj-cta__title { font-family: var(--kj-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; color: var(--kj-text); margin: 0 0 8px 0; }
.kj-cta p { font: 400 16px/1.5 var(--kj-body); color: var(--kj-accent-soft); margin: 0; }
.kj-cta .kj-btn { background: var(--kj-bg); color: var(--kj-text) !important; flex-shrink: 0; padding: 20px 32px; }
.kj-cta .kj-btn:hover { background: #000; }

/* ---------- Header / navigation ---------- */
.kj-header { position: sticky; top: 0; z-index: 50; background: var(--kj-bg); border-bottom: 1px solid var(--kj-line); }
/* ...and the same on the wrapper WordPress puts around a template part.
   `header.wp-block-template-part` is exactly as tall as the header inside
   it (93px), and a sticky box can only travel inside its containing block,
   so .kj-header unstuck after 93px and the menu and the Probestunde button
   were gone for the remaining ~11,300px of the mobile home page. Sticking
   the wrapper makes .wp-site-blocks the containing block, i.e. the whole
   page. The wrapper has no box of its own here, so nothing moves.
   :has() is already load-bearing in this file — see body:has(.kj-page). */
header.wp-block-template-part:has(> .kj-header) { position: sticky; top: 0; z-index: 50; }
/* ...and the price of a header that now really sticks: a fragment jump puts the
   target at y=0, which is underneath it. Before the fix the header unstuck after
   93px and anchors landed clean, so this is a regression the fix introduces, not
   an old bug. The values are the measured wrapper heights — 65px at 357px, 93px
   from 900px, border included — plus 7px, so the heading the reader jumped to is
   not flush against the bar. Measured without this rule: 65px of the target sat
   underneath the header. */
html { scroll-padding-top: 72px; }
@media (min-width: 900px) { html { scroll-padding-top: 100px; } }
.kj-header__inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; }
@media (min-width: 900px) { .kj-header__inner { height: 92px; padding: 0 64px; } }
.kj-logo { display: flex; align-items: baseline; gap: 12px; color: var(--kj-text) !important; }
/* Header-only KJ mark, left of the wordmark. Decorative (::before, no alt text) —
   the accessible name of a.kj-logo stays "KayJays Dance Center München" from its
   text content. flex: none so it never shrinks; explicit width + height (source
   trimmed to its opaque bounding box, 1755x1909, ratio 11/12) instead of
   aspect-ratio, for older Safari. .kj-header .kj-logo__name gets its own
   line-height here so its line box centres against the mark instead of sitting
   ~4px high on the unscoped line-height (footer keeps that one). */
.kj-header .kj-logo, .kj-header .kj-logo:hover { text-decoration: none; }
.kj-header .kj-logo::before { content: ''; display: block; flex: none; align-self: center; width: 37px; height: 40px; background-image: url("kj-mark.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.kj-header .kj-logo__name { line-height: 40px; }
@media (min-width: 900px) { .kj-header .kj-logo::before { width: 44px; height: 48px; } .kj-header .kj-logo__name { line-height: 48px; } }
.kj-logo__name { font-family: var(--kj-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: 0.02em; }
@media (min-width: 900px) { .kj-logo__name { font-size: 28px; } }
.kj-logo__sub { font: 600 11px/1 var(--kj-body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--kj-muted); display: none; }
@media (min-width: 700px) { .kj-logo__sub { display: inline; } }

.kj-nav { display: none; align-items: center; gap: 36px; }
@media (min-width: 1000px) { .kj-nav { display: flex; } }
.kj-nav > a:not(.kj-btn), .kj-nav .kj-dd > button {
  font: 600 14px/1 var(--kj-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kj-text); background: none; border: 0; padding: 0; cursor: pointer;
}
.kj-nav > a:not(.kj-btn):hover, .kj-dd > button:hover, .kj-dd.is-open > button { color: var(--kj-accent-text); }
.kj-nav .kj-btn { padding: 14px 22px; font-size: 14px; }

/* Dropdown */
.kj-dd { position: static; }
.kj-dd > button::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.kj-dd__panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--kj-surface); border-bottom: 1px solid var(--kj-line);
  padding: 40px 64px 44px 64px;
}
.kj-dd.is-open .kj-dd__panel, .kj-dd:focus-within .kj-dd__panel { display: block; }
.kj-dd__cols { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.kj-dd__head { font: 700 12px/1 var(--kj-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--kj-muted); margin-bottom: 14px; }
.kj-dd__head--accent { color: var(--kj-accent-text); }
.kj-dd__panel a { display: block; color: var(--kj-text); font: 500 15px/2.2 var(--kj-body); }
.kj-dd__panel a:hover { color: var(--kj-accent-text); }
.kj-dd__panel a.kj-dd__feature { font-family: var(--kj-display); font-size: 22px; line-height: 1.5; text-transform: uppercase; }
.kj-dd__panel a.kj-dd__sub { color: var(--kj-muted); font-size: 14px; }
.kj-dd__all { max-width: 1312px; margin: 32px auto 0 auto; border-top: 1px solid var(--kj-line); padding-top: 20px; }
.kj-dd__all a { font: 700 13px/1 var(--kj-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kj-accent-text); }

/* Mobile nav */
.kj-burger { display: inline-flex; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--kj-text); }
@media (min-width: 1000px) { .kj-burger { display: none; } }
.kj-header .kj-btn--mobile { display: inline-block; font-size: 12px; padding: 11px 14px; }
@media (min-width: 1000px) { .kj-header .kj-btn--mobile { display: none; } }
.kj-mnav { display: none; background: var(--kj-bg); border-top: 1px solid var(--kj-line); padding: 12px 24px 24px 24px; max-height: calc(100vh - 64px); overflow-y: auto; }
.kj-mnav.is-open { display: flex; flex-direction: column; }
@media (min-width: 1000px) { .kj-mnav.is-open { display: none; } }
.kj-mnav > a, .kj-macc > button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--kj-display); font-weight: 400; font-size: 30px; line-height: 1;
  text-transform: uppercase; color: var(--kj-text); padding: 18px 0; border-bottom: 1px solid var(--kj-line);
}
.kj-macc > button { display: flex; justify-content: space-between; align-items: center; }
.kj-macc > button::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--kj-muted); border-bottom: 2px solid var(--kj-muted); transform: rotate(45deg); transition: transform 0.15s; }
.kj-macc.is-open > button { color: var(--kj-accent-text); }
.kj-macc.is-open > button::after { transform: rotate(225deg); border-color: var(--kj-accent-text); }
.kj-macc__panel { display: none; padding: 8px 0 16px 16px; border-bottom: 1px solid var(--kj-line); }
.kj-macc.is-open .kj-macc__panel { display: flex; flex-direction: column; }
.kj-macc__panel a { display: block; color: var(--kj-muted); font: 500 16px/1 var(--kj-body); padding: 12px 0; }
.kj-macc__panel a.kj-strong { color: var(--kj-text); font-weight: 700; }
.kj-macc__panel a.kj-all { color: var(--kj-accent-text); font-weight: 600; }
.kj-mnav .kj-btn { display: block; text-align: center; margin-top: 28px; padding: 20px 0; font-size: 16px; }
.kj-mnav__social { text-align: center; padding-top: 16px; color: var(--kj-muted); font: 500 13px/1 var(--kj-body); }

/* ---------- Footer ---------- */
.kj-footer { background: var(--kj-bg); border-top: 1px solid var(--kj-line); padding: 56px 24px 32px 24px; }
@media (min-width: 900px) { .kj-footer { padding: 56px 64px 32px 64px; } }
.kj-footer__inner { max-width: var(--kj-max); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.kj-footer__cols { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 640px) { .kj-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kj-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; } }
.kj-footer .kj-logo__name { font-size: 26px; }
.kj-footer__brand { display: flex; flex-direction: column; gap: 16px; font: 400 14px/1.7 var(--kj-body); color: var(--kj-muted); }
.kj-fhead { font: 700 12px/1 var(--kj-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--kj-text); margin: 0 0 14px 0; }
.kj-fhead + .kj-fhead, .kj-footer__cols a + .kj-fhead { margin-top: 24px; }
.kj-flink { display: block; color: var(--kj-muted) !important; font: 500 14px/2.1 var(--kj-body); }
.kj-flink:hover { color: var(--kj-text) !important; }
.kj-footer__bar { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--kj-line); padding-top: 24px; font: 400 13px/1.5 var(--kj-body); color: var(--kj-dim); }
@media (min-width: 900px) { .kj-footer__bar { flex-direction: row; justify-content: space-between; align-items: center; } }
.kj-footer__social { display: flex; gap: 14px; }
.kj-footer__social svg { stroke: var(--kj-muted); }
.kj-footer__social a:hover svg { stroke: var(--kj-text); }

/* ---------- Editor to-do notice (loud on purpose; delete blocks before publish) ---------- */
.kj-todo {
  background: #3A2E00; border: 1px solid #8A6D00; color: #FFD34D;
  font: 500 13px/1.6 var(--kj-body); padding: 14px 18px; margin: 16px auto;
}
.kj-todo p { color: #FFD34D !important; font-size: 13px !important; margin: 0; }

/* ---------- Schedule/course blocks (Studio Classes & Schedule plugin) ----------
   Set Settings → Studio Classes: mode=dark + the real accent color.
   The rules below only align spacing inside kj-page sections. */
.kj-page .stcls { margin-top: 24px; }

/* ---------- WordPress block editor niceties ---------- */
.kj-page .wp-block-group { margin-top: 0; }
.kj-page hr { border: 0; border-top: 1px solid var(--kj-line); margin: 48px 0; }
.kj-page figure { margin: 0; }
.kj-page img { max-width: 100%; height: auto; }

/* ---------- Accessibility ---------- */
.kj-page a:focus-visible, .kj-header a:focus-visible, .kj-header button:focus-visible,
.kj-footer a:focus-visible { outline: 2px solid var(--kj-accent-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .kj-btn, .kj-btn--ghost, .kj-macc > button::after { transition: none; } }

/* ==========================================================================
   PAGE CONTENT VOCABULARY
   Every kj-* class that actually occurs in the staging page content
   (WXR export 01.09.2026), styled from the real markup — not from guesses.
   ========================================================================== */

/* ---------- Sections & splits ---------- */
.kj-section { padding-top: 56px; padding-bottom: 8px; }
@media (min-width: 900px) { .kj-section { padding-top: 88px; } }
.kj-section > h2:first-of-type, .kj-section > .kj-kicker + h2 { margin-top: 0; }

.kj-split { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) {
  .kj-split { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
  .kj-split--wide { grid-template-columns: 1fr 1.9fr; }
  .kj-split > *:first-child > h2 { margin-top: 0; }
}
.kj-prose { max-width: 72ch; }
.kj-prose h2 { font-size: clamp(24px, 3vw, 32px); }

/* ---------- Tags / labels / facts ---------- */
.kj-tag {
  display: inline-block; background: var(--kj-surface-2); border: 1px solid var(--kj-line);
  color: var(--kj-muted); font: 600 12px/1 var(--kj-body); letter-spacing: 0.04em;
  padding: 7px 10px; white-space: nowrap;
}
.kj-tag--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: var(--kj-accent-text); border-color: color-mix(in oklab, var(--kj-accent) 45%, var(--kj-line)); }

.kj-label { font: 700 12px/1 var(--kj-body) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kj-muted) !important; margin: 0 0 6px 0; }
.kj-fact__value { font: 600 17px/1.4 var(--kj-body) !important; color: var(--kj-text) !important; margin: 0; }
.kj-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  border-top: 1px solid var(--kj-line); border-bottom: 1px solid var(--kj-line);
  /* padding-block, never the `padding: 28px 0` shorthand: the shorthand also
     sets padding-inline to 0 and so cancels the 24px gutter that
     `.kj-page > *` gives every section, which rendered each fact at x=0. */
  padding-block: 28px; margin-top: 40px;
  /* border-box, because padding-block alone is not enough: .kj-facts is a plain
     <div> with no wp-block-* class, so core's box-sizing reset never reaches it.
     With content-box the 64px gutter is added OUTSIDE max-width, the strip grows
     to 1440px, pins to the viewport edge and its text lands 54px to the left of
     every sibling section's. Measured on staging at 1434px: text at 64px vs the
     sections' 118px; with border-box both read 118px. */
  box-sizing: border-box;
}
@media (min-width: 900px) { .kj-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

/* ---------- Cards ---------- */
.kj-card { text-decoration: none; }
/* Card hover behind (hover: hover). On a touch screen the :hover state latches
   after a tap and stays until something else is tapped, so a tapped card kept
   its accent border for the rest of the visit. */
@media (hover: hover) {
  a.kj-card:hover { border-color: var(--kj-accent); }
}
.kj-card__title { display: block; font-family: var(--kj-display); font-weight: 400; text-transform: uppercase; font-size: 21px; line-height: 1.15; color: var(--kj-text); }
.kj-card__more { display: block; margin-top: auto; padding-top: 12px; font: 700 13px/1 var(--kj-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kj-accent-text); }
@media (hover: hover) {
  a.kj-card:hover .kj-card__more { color: var(--kj-accent-hover); }
}
.kj-grid--3 { grid-template-columns: 1fr; }
/* One column on a phone. Two columns from 0px up left a ~96px text column at
   357px, which is where the course cards live on the home page. */
.kj-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 480px) { .kj-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .kj-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .kj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kj-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Course rows (hand-written schedule rows in page content) ---------- */
.kj-course {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--kj-line); padding: 18px 0;
}
@media (min-width: 760px) { .kj-course { grid-template-columns: 64px 1fr auto; gap: 24px; } }
.kj-course__portrait {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--kj-surface-3) 0px, var(--kj-surface-3) 8px, var(--kj-surface-2) 8px, var(--kj-surface-2) 16px);
}
@media (min-width: 760px) { .kj-course__portrait { width: 64px; height: 64px; } }
.kj-course__portrait img { width: 100%; height: 100%; object-fit: cover; }
.kj-course__title { font: 700 17px/1.3 var(--kj-body) !important; color: var(--kj-text) !important; margin: 0 0 4px 0; }
.kj-course__teacher { font: 400 14px/1.4 var(--kj-body) !important; color: var(--kj-muted) !important; margin: 0; }
.kj-course__desc { font: 400 14px/1.6 var(--kj-body) !important; color: var(--kj-muted) !important; margin: 6px 0 0 0; }
.kj-course__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (min-width: 760px) { .kj-course__meta { grid-column: auto; justify-content: flex-end; gap: 16px; } }
.kj-course__when { font: 600 15px/1.3 var(--kj-body) !important; color: var(--kj-text) !important; margin: 0; text-align: left; }
@media (min-width: 760px) { .kj-course__when { text-align: right; } }
.kj-course__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Teacher cards ---------- */
.kj-teacher { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.kj-teacher__portrait {
  display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--kj-surface-3) 0px, var(--kj-surface-3) 10px, var(--kj-surface-2) 10px, var(--kj-surface-2) 20px);
}
.kj-teacher__portrait img { width: 100%; height: 100%; object-fit: cover; }
.kj-teacher__name { font-family: var(--kj-display); font-weight: 400; text-transform: uppercase; font-size: 20px; line-height: 1.1; color: var(--kj-text); }
.kj-teacher__styles { font: 400 13px/1.55 var(--kj-body); color: var(--kj-muted); }
@media (hover: hover) {
  a.kj-teacher:hover .kj-teacher__name { color: var(--kj-accent-text); }
}

/* ---------- Price table ---------- */
.kj-price {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center;
  border-top: 1px solid var(--kj-line); margin-top: 28px;
}
.kj-price > div { padding: 20px 0; border-bottom: 1px solid var(--kj-line); }
.kj-price__label { font: 600 17px/1.3 var(--kj-body) !important; color: var(--kj-text) !important; margin: 0; }
.kj-price__note { font: 400 13px/1.5 var(--kj-body) !important; color: var(--kj-muted) !important; margin: 4px 0 0 0; }
.kj-price__value { font-family: var(--kj-display) !important; font-weight: 400; font-size: 32px !important; line-height: 1 !important; color: var(--kj-accent-text) !important; margin: 0; text-align: right; white-space: nowrap; }

/* ---------- Highlight band ---------- */
.kj-band {
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  background: var(--kj-surface); border: 1px solid var(--kj-line);
  padding: 32px; margin-top: 48px;
}
@media (min-width: 900px) { .kj-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 36px 40px; } }
.kj-band__title { font-family: var(--kj-display) !important; font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 30px) !important; line-height: 1.1 !important; color: var(--kj-text) !important; margin: 0 0 6px 0; }
.kj-band__title em { font-style: normal; color: var(--kj-accent-text); }
.kj-band .kj-btns { margin-top: 0; }

/* ---------- Blog teasers ---------- */
.kj-post { display: grid; grid-template-columns: 1fr; gap: 6px; border-bottom: 1px solid var(--kj-line); padding: 24px 0; }
@media (min-width: 760px) { .kj-post { grid-template-columns: 190px 1fr; gap: 32px; } }
.kj-post__date { font: 700 12px/1.6 var(--kj-body) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kj-muted) !important; margin: 0; }
.kj-post__title { font-family: var(--kj-display) !important; font-weight: 400; text-transform: uppercase; font-size: 22px !important; line-height: 1.15 !important; color: var(--kj-text) !important; margin: 0 0 8px 0; }

/* ---------- Prototype form (replaced by the real WPForms embed) ---------- */
.kj-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.kj-form__row { display: flex; flex-direction: column; gap: 6px; }
.kj-form__row input, .kj-form__row textarea, .kj-form__row select {
  background: var(--kj-surface); border: 1px solid var(--kj-line); color: var(--kj-text);
  font: 400 15px/1.4 var(--kj-body); padding: 13px 14px; width: 100%;
}
.kj-form__row input:focus, .kj-form__row textarea:focus { outline: 2px solid var(--kj-accent-text); outline-offset: 1px; }

/* ---------- Build-time notices (all deliberately visible until resolved) ---------- */
/* .kj-embed — "a plugin block belongs here" */
.kj-embed { background: var(--kj-surface); border: 1px dashed var(--kj-line); padding: 20px 22px; }
.kj-embed__label { font: 700 11px/1 var(--kj-body) !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kj-accent-text) !important; margin: 0 0 8px 0; }
.kj-embed__what { font: 700 16px/1.3 var(--kj-body) !important; color: var(--kj-text) !important; margin: 0 0 6px 0; }
.kj-embed__how { font: 400 14px/1.6 var(--kj-body) !important; color: var(--kj-muted) !important; margin: 0; }

/* .kj-slot — "copy still missing here" */
.kj-slot { background: #2A1F00; border: 1px dashed #8A6D00; padding: 18px 20px; margin: 12px 0; }
.kj-slot__id { display: block; font: 700 11px/1.4 var(--kj-body); letter-spacing: 0.12em; text-transform: uppercase; color: #FFD34D; margin-bottom: 8px; }
.kj-slot__brief { font: 400 14px/1.6 var(--kj-body) !important; color: #E8C874 !important; margin: 0; }

/* ---------- Dark button (used on the accent CTA band) ---------- */
.kj-btn--dark { background: var(--kj-bg) !important; color: var(--kj-text) !important; }
.kj-btn--dark:hover { background: #000 !important; color: var(--kj-text) !important; }
.kj-teacher-cell { display: flex; }
.kj-teacher-cell > .kj-teacher { width: 100%; }

/* ==========================================================================
   BRIDGE: Studio Classes & Schedule blocks → KayJay's design system
   The stcls blocks are deliberately theme-neutral (any studio, any site).
   On THIS site they must be family: override their custom properties with
   the kj tokens. !important is required because the plugin injects its
   values as inline style attributes on the block root.
   Fonts come from this plugin's local woff2 files — keep the stcls
   "Load fonts from Google" setting OFF.
   ========================================================================== */
.stcls {
  --stcls-bg: var(--kj-bg) !important;
  --stcls-surface: var(--kj-surface) !important;
  --stcls-line: var(--kj-line) !important;
  --stcls-text: var(--kj-text) !important;
  --stcls-muted: var(--kj-muted) !important;
  --stcls-accent: var(--kj-accent) !important;
  --stcls-accent-ink: #FFFFFF !important;
  --stcls-accent-text: var(--kj-accent-text) !important;
  --stcls-full-bg: #452622 !important;
  --stcls-full-fg: #FFB4AB !important;
  --stcls-warn-bg: #403513 !important;
  --stcls-warn-fg: #F2CE73 !important;
  --stcls-font-body: var(--kj-body) !important;
  --stcls-font-display: var(--kj-display) !important;
  --stcls-fw-display: 400 !important;
  --stcls-tt-display: uppercase !important;
}
/* The page provides the gutters, so the block must not add its own on top.
   Scoped to .kj-page — 1.2.0 dropped the scope, 1.2.1 restores it. Bare, the
   rule sits at equal specificity with every block's own background rule (each
   block root is class="stcls stcls-<name>"), so load order decides whether a
   block paints its own ground. Studio Classes 1.11.7 makes course-about paint
   its own background precisely so it cannot inherit an unpredictable page
   colour; this line, un-scoped, undoes that. Invisible here, where the page
   ground and --stcls-bg match — a real defect on Kiakademie, which is cream.
   Plain selector, no !important: this file loads after the plugin's inline
   styles and wins on source order. */
.kj-page .stcls { padding-left: 0; padding-right: 0; background: transparent; }

/* Course overview card images: 16:9, cropped with object-fit: cover, centred
   (ruled 15.09.2026). Two other rules stand in the way. The stcls plugin's own
   stylesheet gives .stcls-card-media a fixed height (160px, 105px under 640px),
   and a definite height makes aspect-ratio inert, so `height: auto` here is
   what lets the ratio take over. And the plugin's `.stcls-card-media img
   { height: 100% }` and this file's `.kj-page img { height: auto }` (Base,
   above) tie at (0,1,1), so which one applies depends on stylesheet order —
   which WordPress decides at render time and this file cannot rely on. The img
   rule here is specific enough to win either way. Scoped to .kj-page like the
   rest of the bridge, and to .stcls-overview only: the teacher grid and the
   schedule keep their own media rules. */
.kj-page .stcls-overview .stcls-card-media { aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
.kj-page .stcls-overview .stcls-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }


/* ---------- Card with a flush media area (age cards on the course hubs) ---------- */
.kj-card--media { padding: 0; }
.kj-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 28px; flex: 1 1 auto; }
.kj-card__body > :first-child { margin-top: 0; }
.kj-card__body > :last-child { margin-bottom: 0; }

/* Accent-coloured run of text inside a heading (e.g. the age range "6-12"). */
.kj-accent { color: var(--kj-accent-text); }


/* ---------- Points row ("Was du lernst" on the course pages) ---------- */
.kj-points { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 8px; }
@media (min-width: 900px) { .kj-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.kj-point { border-left: 2px solid var(--kj-accent); padding-left: 18px; }
.kj-point__title { display: block; font-family: var(--kj-display); font-weight: 400; text-transform: uppercase; font-size: 18px; line-height: 1.15; color: var(--kj-text); margin-bottom: 8px; }
.kj-point p { margin: 0; }

/* ---------- Media fill fix ----------
   `.kj-page img { height: auto }` appears later than `.kj-ph img { height: 100% }`
   at equal specificity, so photos sat at natural height inside their slot. */
.kj-page .kj-ph img,
.kj-page .kj-teacher__portrait img { width: 100%; height: 100%; object-fit: cover; }
.kj-teacher__portrait img { object-position: 50% 18%; }

/* ---------- Slot zoom (wide stage photos in tall slots) ---------- */
.kj-page .kj-ph--zoom img { transform: scale(1.45); transform-origin: 50% 45%; }
.kj-page .kj-ph--zoom-sm img { transform: scale(1.2); transform-origin: 50% 45%; }

/* ---------- Forms on the dark theme ----------
   WPForms inherits a colour that resolves to transparent here: labels invisible
   and typed input unreadable (white field, transparent text). */
.kj-page .wpforms-field-label,
.kj-page .wpforms-field-sublabel,
.kj-page .wpforms-field-description { color: var(--kj-text) !important; }
.kj-page .wpforms-field-sublabel,
.kj-page .wpforms-field-description { color: var(--kj-muted) !important; }
.kj-page .wpforms-required-label { color: var(--kj-accent-text) !important; }
.kj-page .wpforms-field input[type="text"],
.kj-page .wpforms-field input[type="email"],
.kj-page .wpforms-field input[type="tel"],
.kj-page .wpforms-field input[type="number"],
.kj-page .wpforms-field input[type="date"],
.kj-page .wpforms-field input[type="url"],
.kj-page .wpforms-field select,
.kj-page .wpforms-field textarea {
	background: var(--kj-surface) !important; color: var(--kj-text) !important;
	border: 1px solid var(--kj-line) !important; border-radius: 0 !important;
	font: 400 16px/1.4 var(--kj-body) !important; padding: 12px 14px !important;
}
.kj-page .wpforms-field input:focus,
.kj-page .wpforms-field select:focus,
.kj-page .wpforms-field textarea:focus { border-color: var(--kj-accent) !important; outline: 2px solid var(--kj-accent); outline-offset: 1px; }
.kj-page .wpforms-field input::placeholder,
.kj-page .wpforms-field textarea::placeholder { color: var(--kj-dim) !important; }
.kj-page .wpforms-submit, .kj-page button[type="submit"] {
	background: var(--kj-accent) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 0 !important;
	font: 700 15px/1 var(--kj-body) !important; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 18px 28px !important; cursor: pointer;
}
.kj-page .wpforms-submit:hover { background: color-mix(in oklab, var(--kj-accent) 85%, white) !important; }
.kj-page .wpforms-error { color: #FFB4AB !important; }


/* ---------- Form layout ----------
   WPForms ships fixed pixel widths (field-small/medium/large) that leave
   126px inputs inside a 1312px column. Let fields use the column. */
.kj-page .wpforms-container { max-width: 100%; margin: 0; }
.kj-page .wpforms-form .wpforms-field { max-width: 100% !important; padding: 0 0 20px !important; }
.kj-page .wpforms-field-small,
.kj-page .wpforms-field-medium,
.kj-page .wpforms-field-large { max-width: 100% !important; width: 100% !important; }
.kj-page .wpforms-field-row,
.kj-page .wpforms-field-row-block { max-width: 100% !important; }
.kj-page .wpforms-field textarea { min-height: 160px; }
.kj-page .wpforms-submit-container { padding-top: 4px !important; }

/* Small round portraits in schedule rows: crop to the face, not the body. */
.kj-page .kj-course__portrait img {
	width: 100%; height: 100%; object-fit: cover;
	object-position: 50% 14%; transform: scale(1.35); transform-origin: 50% 20%;
}
.kj-page .kj-course__portrait { overflow: hidden; }

/* ---------- Newsletter plugin (The Newsletter Plugin, .tnp-*) ---------- */
.kj-page .tnp, .kj-page .tnp-widget { max-width: 520px; }
.kj-page .tnp-field { margin-bottom: 18px; }
.kj-page .tnp-field label { display: block; color: var(--kj-text) !important; font: 600 14px/1.4 var(--kj-body) !important; margin-bottom: 8px; }
.kj-page .tnp-field input[type="text"],
.kj-page .tnp-field input[type="email"],
.kj-page .tnp-widget input[type="text"],
.kj-page .tnp-widget input[type="email"] {
	width: 100% !important; background: var(--kj-surface) !important; color: var(--kj-text) !important;
	border: 1px solid var(--kj-line) !important; border-radius: 0 !important;
	font: 400 16px/1.4 var(--kj-body) !important; padding: 12px 14px !important; height: auto !important;
}
.kj-page .tnp-field input:focus { border-color: var(--kj-accent) !important; outline: 2px solid var(--kj-accent); outline-offset: 1px; }
.kj-page .tnp-field-checkbox label,
.kj-page .tnp-privacy-field label { display: inline; color: var(--kj-muted) !important; font-weight: 400 !important; font-size: 14px !important; }
.kj-page .tnp-field input[type="checkbox"] { accent-color: var(--kj-accent); width: 16px; height: 16px; margin-right: 8px; }
.kj-page .tnp-field input[type="submit"],
.kj-page .tnp-submit {
	background: var(--kj-accent) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 0 !important;
	font: 700 15px/1 var(--kj-body) !important; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 18px 28px !important; width: auto !important; cursor: pointer;
}
.kj-page .tnp-field input[type="submit"]:hover { background: color-mix(in oklab, var(--kj-accent) 85%, white) !important; }

/* ---------- Post grid (Aktuelles) ----------
   WordPress' own post-template layout is width-constrained by the theme. */
.kj-page .kj-postgrid {
	display: grid !important; grid-template-columns: 1fr; gap: 28px;
	max-width: none !important; width: 100% !important;
	list-style: none; margin: 0; padding: 0;
}
@media (min-width: 900px) { .kj-page .kj-postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-page .kj-postgrid > li { max-width: none !important; width: auto !important; margin: 0 !important; }
.kj-page .kj-postgrid .kj-card__title { color: var(--kj-text) !important; }
.kj-page .kj-postgrid .kj-post__date { color: var(--kj-muted) !important; font: 600 12px/1 var(--kj-body) !important; letter-spacing: 0.12em; }

/* WPForms sets an explicit width on its own container (210px), so max-width
   alone does nothing — the width itself has to be overridden. */
.kj-page .wpforms-container,
.kj-page .wpforms-container-full,
.kj-page div[class*="wpforms-container"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; }


/* ---------- Measure in full-width sections (1.2.3) ---------- */
/* Pages converted to blocks keep one picture (the page header), so sections
   that were .kj-split (text | picture) lost the picture and the class with it.
   Their running text then ran the full content width (~1300px at desktop),
   far past a readable measure. Cap it, left-aligned — no auto margins are set
   here, so nothing centres.

   Zero specificity on purpose (:where throughout). Anything that already
   states its own measure keeps it: .kj-lead 62ch (line 98), .kj-faq answers
   68ch (line 181), .kj-prose 72ch (line 340). This only fills the gap where
   nothing has decided.

   Two levels, no deeper: text sitting directly in the section, and text inside
   one inner wrapper (the block editor's group). The wrapper list names every
   component that must keep the full width. .stcls is the plugin's own block
   root, named by the bare class because that is its documented contract — a
   prefix match would also catch its inner elements. */
:where(.kj-section:not(.kj-split)) > :where(p, h2, h3, h4, h5, h6, ul, ol),
:where(.kj-section:not(.kj-split))
  > :where(:not(.kj-grid, .kj-grid--2, .kj-faq, .kj-facts, .kj-band, .kj-points, .kj-card, .kj-hero, .kj-btns, .kj-split, .stcls))
  > :where(p, h2, h3, h4, h5, h6, ul, ol) {
  max-width: 70ch;
}