@charset "UTF-8";
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/open-sans-v44-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/open-sans-v44-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/open-sans-v44-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-v37-latin-italic.woff2") format("woff2");
}

:root {
  /* "Funky Creativity" brand palette. */
  --paper: #f9f8f3; /* Warm Cream — neutral background */
  --ink: #21303a; /* cool dark neutral for body copy (was warm brown-black) */
  --petrol: #0083a8; /* Petrol Blue — trust: logo, headings, large accents */
  --petrol-text: #007b9e; /* darkened for AA on cream at body/nav sizes */
  --petrol-deep: #005770; /* dark section backgrounds (replaces old green) */
  --coral: #ff5a36; /* Bright Coral — energy: badges, live-dot, decorative */
  --coral-cta: #d04628; /* muted, less saturated coral for buttons/pills carrying white text */
  --coral-cta-hover: #b63d23;
  --yellow: #ffc83b; /* Sunshine Yellow — always paired with dark ink text */
  --violet: #8a3ffc; /* Vivid Violet — creative accents, safe on cream at any size */
  --mint: #25e298; /* Lime Mint — "Neu"/"Beliebt" badges, always with ink text */
  --line: #dde2dd;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 25px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Open Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 5px;
}
.wrap {
  width: min(1320px, calc(100% - 96px));
  margin: auto;
}
.announcement {
  padding: 12px 24px;
  background: var(--coral-cta);
  color: #fff;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.035em;
}
.announcement span {
  margin-left: 18px;
  color: inherit;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.6px;
}
.klax {
  display: flex;
  font-size: 43px;
  letter-spacing: -5px;
  padding-right: 5px;
  transform: rotate(-4deg);
}
.klax i {
  font-style: normal;
}
.klax i:nth-child(1) {
  color: #ef5835;
}
.klax i:nth-child(2) {
  color: #95b531;
}
.klax i:nth-child(3) {
  color: #e8b227;
}
.klax i:nth-child(4) {
  color: #169bbb;
}
.brand-dot {
  color: var(--coral);
}
nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
}
nav a {
  text-decoration: none;
}
nav a:hover,
.text-link:hover {
  color: var(--petrol-text);
}
.header .nav-link {
  position: relative;
  padding: 7px 0;
  font-weight: 400;
  transition: color 0.2s;
}
.header .nav-link::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--coral-cta);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}
.header .nav-link:hover,
.header .nav-link.is-active,
body:has(#preise:target) .header .nav-link[href$="#preise"] {
  color: var(--petrol-deep);
}
.header .nav-link:hover::after,
.header .nav-link.is-active::after,
body:has(#preise:target) .header .nav-link[href$="#preise"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: var(--coral-cta);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  background: var(--coral-cta-hover);
  color: white;
  transform: translateY(-2px);
}
.button.small {
  padding: 13px 17px;
  font-size: 12px;
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button.small:hover {
  background: var(--ink);
  color: white;
}
.hero {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 50px;
  padding-top: 64px;
  padding-bottom: 65px;
  align-items: center;
}
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 23px;
  line-height: 1.6;
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  margin-right: 8px;
}
h1 {
  font-size: clamp(42px, 4.3vw, 65px);
  line-height: 1.04;
  letter-spacing: -3px;
  margin: 0 0 24px;
  font-weight: 700;
}
.serif {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-style: italic;
}
.hero h1 .serif {
  color: var(--petrol);
  display: block;
  letter-spacing: -3px;
}
.lead {
  font-size: 16px;
  line-height: 1.75;
  max-width: 440px;
  color: #64665e;
}
.event-line {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 26px 0;
}
.date-icon {
  border: 1px solid #d5d7ca;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 49px;
  background: #efeee5;
  font-size: 9px;
  padding: 5px;
  letter-spacing: 1px;
}
.date-icon strong {
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -1px;
}
.event-line > div > strong {
  font-size: 17px;
}
.event-line p {
  font-size: 13px;
  color: #6a6c62;
  margin: 5px 0 0;
}
.actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.text-link {
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 5px;
}
.hero-note {
  font-size: 11px;
  color: #77796f;
  margin-top: 17px;
}
.hero-visual {
  position: relative;
  margin: 0 0 15px;
}
.hero-visual > img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 120px 8px 8px 8px;
  object-position: 49% center;
}
.sticker {
  position: absolute;
  right: -16px;
  top: 28px;
  border-radius: 50%;
  width: 156px;
  height: 156px;
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(11deg);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.13;
  box-shadow: 0 4px 0 #0000000b;
}
.sticker span {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
}
.sticker b {
  font-size: 10px;
  margin-top: 12px;
  letter-spacing: 1px;
}
.photo-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  margin-top: 14px;
  color: #686b5e;
}
.photo-caption span:last-child {
  font-size: 8px;
  letter-spacing: 1px;
}
.spark {
  position: absolute;
  left: -31px;
  bottom: 21px;
  font-size: 95px;
  line-height: 1;
  color: var(--violet);
}

.programme {
  padding-top: 88px;
  padding-bottom: 75px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 32px;
}
.section-heading .eyebrow {
  margin-bottom: 14px;
}
h2 {
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1.1;
  letter-spacing: -1.8px;
  margin: 0;
}
.orange {
  color: var(--coral);
}
.section-heading > p {
  font-size: 13px;
  line-height: 1.8;
  color: #686b60;
  margin: 0 0 3px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.card {
  padding: 25px 23px 20px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
}
.art {
  background: #e9def4;
}
.digital {
  background: #d6e8e8;
}
.workshop {
  background: #dbf5e6;
}
.media {
  background: #fae2d9;
}
.card-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
}
.symbol {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art .symbol {
  color: #7c28fc;
}
.digital .symbol {
  color: #006f8e;
}
.workshop .symbol {
  color: #117c52;
}
.card h3 {
  font-size: 27px;
  line-height: 1.07;
  letter-spacing: -1px;
  margin: 0 0 17px;
}
.card > p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0 0 18px;
}
.card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  font-size: 11px;
  line-height: 1.7;
}
.card li {
  padding: 8px 0;
  border-bottom: 1px solid #25272120;
}
.card li:before {
  content: "•";
  margin-right: 8px;
}
.card > a {
  margin-top: auto;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  text-decoration: none;
  padding-top: 5px;
}
.card > a:hover {
  text-decoration: underline;
}
.programme-note {
  font-size: 11px;
  color: #737669;
  margin-top: 22px;
  line-height: 1.7;
}
.visit {
  background: var(--petrol-deep);
  color: #fff;
  padding: 65px 0;
}
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
}
.visit .eyebrow {
  color: #b9f3d9;
  margin-bottom: 20px;
}
.visit h2 {
  font-size: 48px;
}
.visit h2 .serif {
  color: var(--mint);
}
.visit-grid > div > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.8;
  color: #d8e7e5;
  max-width: 440px;
  margin: 24px 0;
}
.light {
  background: var(--mint);
  color: var(--ink);
}
.light:hover {
  background: #fff;
  color: var(--ink);
}
.visit-details > div {
  padding: 20px 0;
  border-bottom: 1px solid #ffffff30;
}
.visit-details > div:first-child {
  padding-top: 5px;
}
.visit-details > div:last-child {
  border: 0;
}
.visit-details span {
  display: block;
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #b9f3d9;
  margin-bottom: 12px;
}
.visit-details strong {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.visit-details p {
  font-size: 12px;
  color: #d8e7e5;
  line-height: 1.6;
  margin: 8px 0;
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
  padding-top: 85px;
  padding-bottom: 85px;
}
.contact h2 {
  font-size: 46px;
}
.contact h2 .serif {
  color: var(--petrol);
}
.contact > div > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.8;
  color: #676a60;
  max-width: 360px;
  margin-top: 24px;
}
.contact > div > p.contact-small {
  font-size: 11px;
  max-width: 330px;
}
form {
  position: relative;
  background: #f0f0e9;
  padding: 30px;
  border-radius: 8px;
}
form > label:not(.consent) {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
form > label > span {
  color: #74756c;
}
input:not([type="checkbox"]):not([type="hidden"]),
select {
  width: 100%;
  min-height: 47px;
  border: 1px solid #d7d9ce;
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 19px;
  font-size: 13px;
  color: var(--ink);
}
.consent {
  display: flex;
  gap: 10px;
  align-items: start;
  font-size: 10px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.consent input {
  margin: 3px 0 0;
  min-width: 16px;
  width: 16px;
  height: 16px;
  accent-color: var(--petrol);
}
.consent a {
  text-underline-offset: 3px;
}
form > .button {
  width: 100%;
}
.form-note {
  font-size: 9px;
  color: #727468;
  text-align: center;
  margin: 12px 0 0;
}
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.message {
  padding: 15px;
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid;
  border-radius: 4px;
}
.success {
  background: #e1efd8;
  border-color: #61834c;
}
.error {
  background: #ffe4db;
  border-color: #b24628;
}
.error ul {
  padding-left: 18px;
  margin-bottom: 0;
}
.footer {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(120px, .8fr)) minmax(200px, 1fr);
  align-items: start;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 64px;
  padding-bottom: 64px;
}
.footer-brand {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.footer-brand .footer-claim {
  text-align: left;
}
.footer-brand > a {
  color: inherit;
  text-decoration: none;
}
.footer-address {
  font-style: normal;
}
.footer p,
.footer-address {
  color: #77796f;
}
.footer-nav,
.footer-legal {
  display: grid;
  gap: 14px;
  align-content: start;
}
.footer-nav a,
.footer-legal a {
  color: inherit;
  text-decoration: none;
}
.skip {
  position: absolute;
  top: -100px;
  left: 20px;
  background: white;
  z-index: 5;
  padding: 15px;
}
.skip:focus {
  top: 15px;
}
@media (min-width: 1600px) {
  .hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hero-visual > img {
    height: 530px;
  }
}
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 56px);
  }
  nav {
    gap: 20px;
  }
  .hero {
    gap: 28px;
  }
  h1 {
    font-size: 48px;
  }
  .hero-visual > img {
    height: 450px;
  }
  .actions {
    gap: 14px;
    align-items: start;
    flex-direction: column;
  }
  
  
  
  .cards {
    gap: 12px;
  }
  .card {
    padding: 20px 16px;
  }
  .card h3 {
    font-size: 24px;
  }
  .card-top {
    align-items: start;
  }
  .card-top > span:first-child {
    font-size: 8px;
  }
  .symbol {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .visit-grid,
  .contact {
    gap: 60px;
  }
}
@media (max-width: 800px) {
  .header nav > a:not(.button) {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
    gap: 32px;
  }
  .hero-copy {
    max-width: 600px;
  }
  h1 {
    font-size: 60px;
  }
  .hero .lead {
    max-width: 520px;
  }
  .actions {
    flex-direction: row;
    align-items: center;
  }
  .hero-visual > img {
    height: 400px;
    border-radius: 70px 8px 8px 8px;
  }
  .hero-visual {
    margin-right: 10px;
  }
  .spark {
    left: -17px;
  }
  
  
  
  
  
  .section-heading {
    display: block;
  }
  .section-heading > p {
    margin-top: 18px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .card {
    padding: 25px;
  }
  .card-top > span:first-child {
    font-size: 9px;
  }
  .card h3 {
    font-size: 29px;
  }
  .visit-grid,
  .contact {
    gap: 35px;
    grid-template-columns: 1fr;
  }
  .contact > div > p:not(.eyebrow) {
    max-width: 500px;
  }
  .visit-details {
    margin-top: 10px;
  }
  .footer {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
}
@media (max-width: 480px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .announcement {
    font-size: 10px;
  }
  .announcement span {
    display: none;
  }
  .header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .brand {
    font-size: 13px;
    gap: 10px;
  }
  .klax {
    font-size: 33px;
  }
  .button.small {
    font-size: 10px;
    padding: 10px;
    max-width: 138px;
    line-height: 1.4;
  }
  .hero {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  h1 {
    font-size: 44px;
    letter-spacing: -2px;
  }
  .hero h1 .serif {
    letter-spacing: -2px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .lead {
    font-size: 14px;
  }
  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .text-link {
    align-self: flex-start;
  }
  .hero-visual > img {
    height: 310px;
  }
  .sticker {
    width: 126px;
    height: 126px;
    right: -10px;
    top: 18px;
    font-size: 19px;
  }
  .sticker span {
    font-size: 22px;
  }
  .sticker b {
    font-size: 8px;
  }
  
  
  .programme {
    padding-top: 50px;
    padding-bottom: 40px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 25px;
  }
  .card h3 br {
    display: none;
  }
  .card-top {
    margin-bottom: 16px;
  }
  .card p {
    font-size: 13px;
  }
  .card ul {
    font-size: 12px;
  }
  .card > a {
    font-size: 11px;
  }
  .visit {
    padding: 42px 0;
  }
  .visit h2,
  .contact h2 {
    font-size: 38px;
  }
  .visit-details strong {
    font-size: 20px;
  }
  .contact {
    padding-top: 48px;
    padding-bottom: 45px;
  }
  form {
    padding: 22px;
  }
  .footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .consent {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* Original Klax identity and workshop imagery. */
.brand-logo {
  display: block;
  width: 112px;
  height: auto;
  flex-shrink: 0;
}
.footer-brand .brand-logo {
  width: 76px;
}
.spaces {
  padding-top: 5px;
  padding-bottom: 80px;
}
.spaces-heading {
  text-align: center;
  margin-bottom: 38px;
}
.spaces-heading .eyebrow {
  margin-bottom: 15px;
}
.spaces-heading .serif {
  color: var(--petrol);
}
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  text-align: center;
}
.spaces-grid article {
  min-width: 0;
}
.spaces-grid img {
  display: block;
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 26px;
  border-radius: 50%;
}
.spaces-grid h3 {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin: 0 0 12px;
}
.spaces-grid p {
  font-size: 13px;
  line-height: 1.8;
  color: #686b60;
  max-width: 285px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .spaces-grid {
    gap: 22px;
  }
  .spaces-grid h3 {
    font-size: 17px;
  }
  .spaces-grid p {
    font-size: 12px;
  }
  .spaces {
    padding-bottom: 55px;
  }
}
@media (max-width: 480px) {
  .brand-logo {
    width: 77px;
  }
  .spaces-heading h2 {
    font-size: 29px;
  }
  .spaces-heading h2 br {
    display: none;
  }
  .spaces-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .spaces-grid img {
    width: 230px;
    margin-bottom: 20px;
  }
  .spaces-grid h3 {
    font-size: 21px;
  }
  .spaces-grid p {
    font-size: 13px;
  }
  .spaces {
    padding-top: 10px;
    padding-bottom: 48px;
  }
}

/* Give course names a prominent, poster-like rhythm. */
.card {
  min-width: 0;
}
.card ul {
  margin-top: 5px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.45px;
}
.card li {
  padding: 15px 0;
  border-bottom: 1px solid #25272130;
  overflow-wrap: break-word;
  hyphens: auto;
}
.card li:first-child {
  border-top: 1px solid #25272130;
}
.card li:before {
  content: none;
}
@media (min-width: 801px) and (max-width: 1100px) {
  .card ul {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .card ul {
    font-size: 21px;
  }
  .card li {
    padding: 17px 0;
  }
}

/* Programme introduction spans the full section below its heading. */
.programme .section-heading {
  display: block;
}
.programme .section-heading > p {
  width: 100%;
  max-width: none;
  margin: 20px 0 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.6;
}

/* Shared type scale: readable body copy, clear headings and consistent details. */
:root {
  --type-detail: 0.875rem;
  --type-label: 0.75rem;
  --type-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --type-intro: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --type-title: clamp(2rem, 1.35rem + 2vw, 3rem);
  --type-card: clamp(1.625rem, 1.35rem + 0.65vw, 2rem);
}
body {
  font-size: var(--type-body);
  line-height: 1.65;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.125rem, 4.2vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.hero h1 .serif {
  letter-spacing: -0.055em;
}
h2,
.visit h2,
.contact h2,
.spaces-heading h2 {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.eyebrow,
.visit-details span {
  font-size: var(--type-label);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.announcement,
nav,
.button.small {
  font-size: var(--type-detail);
}
.brand {
  font-weight: 800;
}
.header {
  gap: 28px;
}
nav {
  gap: 24px;
}
.button,
.text-link {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.button {
  justify-content: center;
}
.actions {
  flex-wrap: wrap;
  gap: 18px 24px;
}
.lead {
  font-size: var(--type-intro);
  line-height: 1.7;
  max-width: 32em;
}
.event-line > div > strong {
  font-size: 1.25rem;
  line-height: 1.4;
}
.event-line p {
  font-size: 1rem;
  line-height: 1.6;
}
.date-icon {
  flex-shrink: 0;
}
.hero-note,
.photo-caption,
.programme-note,
.contact > div > p.contact-small,
.footer p,
.footer-address,
.footer-nav a,
.footer-legal a {
  font-size: var(--type-detail);
  line-height: 1.7;
}
.photo-caption {
  flex-wrap: wrap;
}
.photo-caption span:last-child,
.sticker b {
  font-size: var(--type-label);
}

.programme .section-heading > p {
  font-size: var(--type-intro);
  line-height: 1.7;
  margin-top: 22px;
}
.section-heading {
  margin-bottom: 38px;
}
.card h3 {
  font-size: var(--type-card);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.card-top {
  align-items: flex-start;
  gap: 12px;
}
.card > p,
.spaces-grid p,
.visit-grid > div > p:not(.eyebrow),
.visit-details p,
.contact > div > p:not(.eyebrow) {
  font-size: var(--type-body);
  line-height: 1.75;
}
.card ul {
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.card > a {
  font-size: var(--type-detail);
  line-height: 1.6;
}
.spaces-grid h3,
.visit-details strong {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.spaces-grid p {
  max-width: 30em;
}
.contact > div > p:not(.eyebrow),
.visit-grid > div > p:not(.eyebrow) {
  max-width: 32em;
}
.contact > div > p.contact-small {
  max-width: 32em;
}
form > label:not(.consent) {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
input:not([type="checkbox"]):not([type="hidden"]),
select {
  font-size: 1rem;
  line-height: 1.5;
  min-height: 50px;
}
.consent,
.form-note {
  font-size: var(--type-detail);
  line-height: 1.7;
}
.message {
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 1100px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card {
    padding: 28px;
  }
  .card ul {
    font-size: 1.25rem;
  }
  .header nav > a:not(.button) {
    display: none;
  }
  .visit-grid,
  .contact {
    gap: 40px;
  }
}
@media (max-width: 800px) {
  h1 {
    font-size: clamp(2.125rem, 7.6vw, 3.75rem);
  }
  .spaces-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .spaces-grid img {
    width: min(65%, 260px);
  }
  .spaces-grid h3 {
    font-size: 1.5rem;
  }
  
}
@media (max-width: 480px) {
  .announcement {
    font-size: var(--type-label);
  }
  .header {
    gap: 14px;
  }
  .button.small {
    font-size: var(--type-label);
    max-width: 150px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 25px;
  }
  .card ul {
    font-size: 1.25rem;
  }
  
  .sticker b {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}

/* Compact base hierarchy for the hero, facts and course cards. */
.header {
  padding-top: 24px;
  padding-bottom: 24px;
}
.hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.hero-copy {
  min-width: 0;
}
.hero h1 {
  font-size: clamp(3rem, 4.9vw, 4.75rem);
  line-height: 1.05;
  margin-bottom: 22px;
}
.hero h1 .serif {
  letter-spacing: -0.045em;
}
.hero .eyebrow {
  margin-bottom: 18px;
}
.hero .event-line {
  margin: 0 0 22px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.hero .event-line strong {
  display: block;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.025em;
}
.event-line strong span {
  white-space: nowrap;
}
.hero .lead {
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 35em;
}
.hero .actions {
  flex-direction: row;
  align-items: center;
  gap: 18px 24px;
}
.hero-note {
  font-size: 0.8125rem;
  max-width: 38em;
  color: #606358;
}
.hero-visual {
  min-width: 0;
  margin: 0;
}
.hero-visual > img {
  height: 440px;
  border-radius: 64px 8px 8px 8px;
}
.photo-caption {
  font-size: 0.8125rem;
}

.programme {
  padding-top: 64px;
  padding-bottom: 64px;
}
.card-top {
  margin-bottom: 12px;
}
.card h3 {
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  min-height: 2.5em;
  line-height: 1.25;
  text-wrap: initial;
}
.card > p {
  font-size: 1rem;
  line-height: 1.65;
}
.card ul {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
}
.card li {
  padding: 13px 0;
}
.card > a {
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  align-items: center;
}
.spaces {
  padding-bottom: 64px;
}
.spaces-heading .serif {
  color: var(--ink);
}
.visit,
.contact {
  padding-top: 56px;
  padding-bottom: 56px;
}
.visit h2,
.contact h2 {
  font-size: clamp(2rem, 3vw, 2.625rem);
}
.visit-grid,
.contact {
  gap: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
form {
  border: 1px solid var(--line);
  background: #f3f3ed;
}
@media (max-width: 1100px) {
  .hero {
    gap: 30px;
  }
  .hero h1 {
    font-size: 3.5rem;
  }
  .hero-visual > img {
    height: 420px;
  }
  .card h3 {
    min-height: 0;
    font-size: 1.625rem;
  }
  .visit-grid,
  .contact {
    gap: 36px;
  }
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 32px;
    gap: 28px;
  }
  .hero-copy {
    max-width: none;
  }
  .hero h1 {
    font-size: clamp(3rem, 8vw, 4rem);
  }
  .hero-visual > img {
    height: 320px;
    object-position: center 55%;
  }
  
  
  
  
  
  
  
  .visit-grid,
  .contact {
    grid-template-columns: 1fr;
  }
  .spaces-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .spaces-grid img {
    width: 100%;
  }
  .spaces-grid h3 {
    font-size: 1.125rem;
  }
  .spaces-grid p {
    font-size: 0.9375rem;
  }
}
@media (max-width: 560px) {
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .hero .actions .text-link {
    align-self: center;
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .hero-visual > img {
    height: 240px;
    border-radius: 36px 6px 6px 6px;
  }
  
  
  
  
  
  .programme,
  .contact {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .card h3 {
    font-size: 1.5rem;
  }
  .card ul {
    font-size: 1.1875rem;
  }
  .spaces-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .spaces-grid article {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 20px;
    text-align: left;
    align-content: start;
  }
  .spaces-grid img {
    grid-row: 1 / 3;
    width: 88px;
    margin: 0;
  }
  .spaces-grid h3 {
    font-size: 1.125rem;
    margin-bottom: 8px;
  }
  .spaces-grid p {
    margin: 0;
  }
  .spaces-heading {
    text-align: left;
  }
  .spaces {
    padding-bottom: 44px;
  }
  .visit {
    padding: 44px 0;
  }
  .header .brand-logo {
    width: 77px;
  }
  .header .brand {
    font-size: 13px;
    gap: 10px;
  }
  .button.small {
    max-width: none;
    font-size: 0.8125rem;
    padding: 12px;
  }
}

/* Open access is visible before the optional information signup. */
.event-access {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--violet);
  margin: 0 0 22px;
}
.hero-note {
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (max-width: 480px) {
  
  
  
  .event-access {
    font-size: 0.9375rem;
  }
}

.announcement a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.announcement a:hover {
  text-decoration: underline;
}
.announcement span {
  font-weight: 400;
  margin-left: 0;
  color: inherit;
}
@media (max-width: 480px) {
  .announcement a {
    gap: 0;
  }
}

.programme-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 16px 22px;
  background: var(--coral-cta);
  color: #fff;
  border-radius: 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
.programme-alert .live-dot {
  flex-shrink: 0;
  background: #fff;
}
.programme-alert strong {
  font-weight: 800;
}
@media (max-width: 480px) {
  .programme-alert {
    font-size: 0.9375rem;
    padding: 14px 18px;
    margin-bottom: 24px;
  }
}

.programme-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  margin-top: 28px;
  padding: 32px;
  background: #dbf5e6;
  border-left: 4px solid var(--mint);
  border-radius: 6px;
}
.programme-preview .eyebrow {
  margin-bottom: 12px;
  color: #117c52;
}
.programme-preview h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.035em;
}
.programme-preview h3 .serif {
  color: var(--petrol);
}
.programme-preview p:not(.eyebrow) {
  margin: 0 0 14px;
  font-size: var(--type-body);
  line-height: 1.7;
}
.programme-preview p.preview-status {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #bcc5b1;
  font-size: 1rem;
  color: #505949;
}
@media (max-width: 800px) {
  .programme-preview {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px;
  }
}
@media (max-width: 480px) {
  .programme-preview {
    padding: 22px;
    margin-top: 22px;
  }
  .programme-preview h3 br {
    display: none;
  }
}

/* Keep the footer brand identical to the header at every breakpoint. */
@media (max-width: 560px) {
  .footer .brand-logo {
    width: 77px;
  }
  .footer .brand {
    font-size: 13px;
    gap: 10px;
  }
}

/* Programme-first page: offer, orientation, open day, signup. */
.hero .eyebrow {
  color: var(--petrol-text);
}
.hero .eyebrow .live-dot {
  vertical-align: 1px;
}
.hero h1 .serif {
  display: inline;
}

.programme .section-heading h2 .serif {
  color: var(--petrol);
}
.programme-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 28px;
  padding: 26px 30px;
  border-radius: 8px;
  background: var(--yellow);
}
.programme-cta p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}
.programme-cta .button {
  flex: 0 0 auto;
}
.programme-holiday-cta {
  margin-top: 18px;
  background: #dceeea;
}
.programme-holiday-cta .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--petrol-deep);
}

.spaces {
  padding-top: 72px;
}
.spaces-heading {
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
}
.spaces-heading > p:last-child {
  max-width: 700px;
  margin: 20px auto 0;
  color: #686b60;
  font-size: 1rem;
  line-height: 1.75;
}
.spaces-heading .serif {
  color: var(--petrol);
}
.visit {
  padding: 72px 0;
}
.visit-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: end;
}
.visit-heading .eyebrow {
  margin-bottom: 16px;
}
.visit-heading h2 {
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
}
.visit-heading h2 .serif {
  color: var(--mint);
}
.visit-heading > div:last-child > p:first-child {
  margin: 0;
  color: #d8e7e5;
  font-size: 1rem;
  line-height: 1.75;
}
.visit .event-access {
  margin: 18px 0 0;
  color: var(--mint);
}
.visit-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.7fr);
  gap: 18px;
  align-items: start;
  margin-top: 44px;
}
.visit-photo {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}
.visit-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.visit-photo picture {
  display: block;
}
.visit-photo-main {
  background: var(--yellow);
}
.visit-photo-main img {
  height: 430px;
  object-position: 50% 48%;
}
.visit-photo-main figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 102px;
  padding: 20px 24px;
  color: var(--ink);
}
.visit-photo-main figcaption span {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.visit-photo-main figcaption strong {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.35;
}
.visit-photo-main figcaption em {
  color: var(--petrol-text);
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
}
.visit-photo-detail {
  transform: translateY(32px);
  box-shadow: 12px 12px 0 #ffffff16;
}
.visit-photo-detail img {
  height: 500px;
  object-position: 50% 44%;
}
.visit-photo-detail figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 45px 20px 18px;
  background: linear-gradient(transparent, #173e49e8);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.55;
}

.visit .visit-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid #ffffff30;
}
.visit .visit-details > div,
.visit .visit-details > div:first-child,
.visit .visit-details > div:last-child {
  min-width: 0;
  padding: 24px 28px;
  border-right: 1px solid #ffffff30;
  border-bottom: 0;
}
.visit .visit-details > div:first-child {
  padding-left: 0;
}
.visit .visit-details > div:last-child {
  padding-right: 0;
  border-right: 0;
}

@media (max-width: 900px) {
  .programme-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .visit-heading {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  
  .visit-gallery {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.75fr);
  }
  .visit-photo-main img {
    height: 350px;
  }
  .visit-photo-detail img {
    height: 430px;
  }
}

@media (max-width: 700px) {
  .visit-gallery {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .visit-photo-main img {
    height: 290px;
  }
  .visit-photo-main figcaption {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .visit-photo-detail {
    z-index: 1;
    justify-self: end;
    width: min(88%, 430px);
    margin-top: -20px;
    transform: none;
  }
  .visit-photo-detail img {
    height: 410px;
  }
}

@media (max-width: 560px) {
  .hero h1 .serif {
    display: block;
  }
  
  
  
  
  .programme-cta {
    gap: 22px;
    padding: 22px;
  }
  .programme-cta .button {
    width: 100%;
  }
  .spaces,
.visit {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  
  .spaces-heading {
    text-align: left;
  }
  .spaces-heading > p:last-child {
    margin-left: 0;
  }
  
  
  .visit-gallery {
    margin-top: 34px;
  }
  .visit-photo-main img {
    height: 240px;
  }
  .visit-photo-main figcaption {
    min-height: 0;
    padding: 18px;
  }
  .visit-photo-detail {
    width: 94%;
  }
  .visit-photo-detail img {
    height: 340px;
  }
  .visit .visit-details {
    grid-template-columns: 1fr;
  }
  .visit .visit-details > div,
  .visit .visit-details > div:first-child,
  .visit .visit-details > div:last-child {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid #ffffff30;
  }
  .visit .visit-details > div:last-child {
    border-bottom: 0;
  }
}

/* Compact Klax trust anchor after the Hub offer has told its own story. */
.klax-proof {
  background: #efe8f6;
}
.klax-proof-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: center;
  padding-top: 42px;
  padding-bottom: 42px;
}
.klax-proof .eyebrow {
  margin-bottom: 10px;
  color: #6524c7;
}
.klax-proof h2 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
}
.klax-proof h2 .serif {
  color: var(--violet);
}
.klax-proof-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 14px 0 16px;
  font-size: 1rem;
  line-height: 1.7;
}
.klax-proof .text-link {
  display: inline-block;
}
.school-signpost {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  border: 1px solid #cfc2db;
  border-radius: 7px;
  background: #ffffff70;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.school-signpost:hover {
  background: #fff;
  transform: translateY(-2px);
}
.school-signpost span {
  color: #5d5664;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}
.school-signpost img {
  display: block;
  width: min(100%, 210px);
  height: auto;
}
.footer-claim {
  display: grid !important;
  gap: 2px;
  margin: 0;
  text-align: center;
}
.footer-claim strong {
  color: var(--ink);
  font-size: 0.875rem;
}
.footer-claim small {
  font-size: 0.6875rem;
}

@media (max-width: 900px) {
  .klax-proof-inner {
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .klax-proof-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 38px;
    padding-bottom: 38px;
  }
  .school-signpost {
    width: 100%;
  }
}

/* Lightweight, dependency-free hero slider. */
.hero-slides {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: 64px 8px 8px 8px;
  background: #e8e8df;
}
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s ease, visibility 0.65s linear;
}
.hero-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}
.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide:nth-child(1) img {
  object-position: 49% center;
}
.hero-slide:nth-child(2) img {
  object-position: center 48%;
}
.hero-slide:nth-child(3) img {
  object-position: center;
}
.hero-slide:nth-child(4) img {
  object-position: 48% center;
}
.hero-slider-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-top: 12px;
}
.hero-slider-footer .photo-caption {
  margin-top: 0;
}
.slider-dots {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
}
.slider-dot {
  display: inline-grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.slider-dot::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8aaa1;
  content: "";
  transition: width 0.2s, background 0.2s;
}
.slider-dot:hover::before {
  background: var(--petrol-text);
}
.slider-dot.is-active::before {
  width: 18px;
  border-radius: 8px;
  background: var(--petrol);
}

@media (min-width: 1600px) {
  .hero-slides {
    height: 480px;
  }
}

@media (max-width: 1100px) {
  .hero-slides {
    height: 420px;
  }
}

@media (max-width: 800px) {
  .hero-slides {
    height: 320px;
    border-radius: 70px 8px 8px 8px;
  }
}

@media (max-width: 560px) {
  .hero-slides {
    height: 240px;
    border-radius: 36px 6px 6px 6px;
  }
  .hero-slider-footer {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .slider-dots {
    justify-content: flex-start;
    margin-left: -11px;
  }
}

/* Image-led course worlds. */
.card {
  padding: 0;
  overflow: hidden;
}
.course-media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #d8d8d0;
}
.course-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.card:hover .course-media img {
  transform: scale(1.025);
}
.art .course-media img {
  object-position: center 54%;
}
.digital .course-media img {
  object-position: center 43%;
}
.workshop .course-media img {
  object-position: center;
}
.course-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 23px 20px;
}
.course-card-body > p {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.65;
}
.course-card-body ul {
  margin-top: auto;
  margin-bottom: 0;
}

.visit-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
.visit-copy {
  min-width: 0;
}
.visit-copy .eyebrow {
  margin-bottom: 16px;
}
.visit-copy h2 {
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
}
.visit-copy h2 .serif {
  color: var(--mint);
}
.visit-copy > p:not(.eyebrow):not(.event-access) {
  margin: 26px 0 0;
  color: #d8e7e5;
  font-size: 1rem;
  line-height: 1.75;
}
.visit-copy .event-access {
  margin: 20px 0 0;
}

/* Public course catalogue and individual course pages. */
.catalogue-hero {
  padding: 86px 0 78px;
  background: var(--petrol-deep);
  color: #fff;
}
.catalogue-hero > div {
  max-width: 860px;
}
.catalogue-hero .eyebrow,
.course-detail-copy .course-category {
  color: var(--mint);
}
.catalogue-hero h1 {
  max-width: 760px;
  margin: 10px 0 18px;
  color: #fff;
  font-size: clamp(2.35rem, 5vw, 4.55rem);
  line-height: 1.03;
}
.catalogue-hero p:last-child {
  max-width: 700px;
  margin: 0;
  color: #d8e7e5;
  font-size: 1.1rem;
  line-height: 1.65;
}
.catalogue-content {
  padding: 72px 0 88px;
}
.catalogue-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}
.catalogue-toolbar h2,
.course-description h2 {
  margin: 5px 0;
  color: var(--petrol-deep);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.12;
}
.catalogue-toolbar p:last-child {
  margin: 0;
}
.category-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.category-filter a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--petrol-text);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.category-filter a:hover,
.category-filter a[aria-current="page"] {
  border-color: var(--petrol);
  background: var(--petrol);
  color: #fff;
}
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.catalogue-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 25px #18343e0a;
}
.catalogue-card-image {
  display: block;
  height: 205px;
  background: var(--petrol-deep);
}
.catalogue-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalogue-card-body {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 24px;
}
.course-category {
  margin: 0 0 7px;
  color: var(--petrol-text);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.catalogue-card h3 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: 1.35rem;
  line-height: 1.2;
}
.catalogue-card h3 a {
  text-decoration: none;
}
.catalogue-card h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.catalogue-card-body > p:not(.course-category) {
  margin: 12px 0 0;
  line-height: 1.55;
}
.course-facts {
  display: grid;
  gap: 7px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
}
.course-facts li::before {
  margin-right: 8px;
  color: var(--coral-cta);
  content: "•";
}
.course-card-footer {
  display: flex;
  min-height: 32px;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}
.availability {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e1f7ed;
  color: #155d42;
  font-size: .76rem;
  font-weight: 800;
}
.availability-waitlist {
  background: #fff1c9;
  color: #805e00;
}
.availability-full {
  background: #fde6df;
  color: #95361d;
}
.availability-not_scheduled {
  background: #e9edf0;
  color: #3e5664;
}
.course-card-footer .text-link {
  font-size: .85rem;
}
.catalogue-no-results,
.catalogue-empty {
  padding-top: 70px;
  padding-bottom: 90px;
}
.catalogue-empty h1 {
  color: var(--petrol-deep);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 26px;
  color: #53656c;
  font-size: .85rem;
}
.breadcrumbs a {
  color: var(--petrol-text);
}
.legal-heading {
  padding-top: 46px;
  padding-bottom: 36px;
}
.legal-heading .eyebrow {
  margin: 0 0 10px;
}
.legal-heading h1 {
  max-width: 850px;
  margin: 0;
  color: var(--petrol-deep);
  font-size: clamp(2.35rem, 5vw, 4.55rem);
  line-height: 1.05;
}
.legal-document {
  max-width: 960px;
  margin-bottom: 90px;
  padding: 46px clamp(22px, 5vw, 66px) 62px;
  border: 1px solid var(--line);
  border-radius: 30px 6px 30px 6px;
  background: #fff;
  box-shadow: 0 8px 25px #18343e0a;
}
.legal-section + .legal-section {
  margin-top: 42px;
}
.legal-section h2 {
  margin: 0 0 14px;
  color: var(--petrol-deep);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.25;
}
.legal-section h2 span {
  color: var(--coral-cta);
}
.legal-section p,
.legal-section li,
.legal-table {
  font-size: 1rem;
  line-height: 1.68;
}
.legal-section p {
  margin: 0 0 9px;
}
.legal-section ul {
  margin: 8px 0 10px;
  padding-left: 23px;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
}
.legal-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  text-align: left;
}
.legal-table caption {
  padding: 0 0 9px;
  color: var(--petrol-deep);
  font-size: .9rem;
  font-weight: 700;
  text-align: left;
}
.legal-table th,
.legal-table td {
  padding: 13px 15px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.legal-table th {
  background: #eaf3f6;
  color: var(--petrol-deep);
  font-weight: 800;
}
.legal-table th:first-child,
.legal-table td:first-child {
  width: 20%;
}
@media (max-width: 700px) {
  .legal-heading {
    padding-top: 34px;
    padding-bottom: 26px;
  }
  .legal-document {
    margin-bottom: 54px;
    padding-top: 32px;
    padding-bottom: 42px;
    border-radius: 22px 5px 22px 5px;
  }
  .legal-section + .legal-section {
    margin-top: 34px;
  }
}
.course-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 54px;
  align-items: start;
  padding-top: 44px;
  padding-bottom: 58px;
}
.course-detail-copy h1 {
  margin: 5px 0 16px;
  color: var(--petrol-deep);
  font-size: clamp(2.45rem, 5vw, 4.75rem);
  line-height: 1.03;
}
.course-detail-hero > img {
  width: 100%;
  min-height: 310px;
  border-radius: 46px 8px 46px 8px;
  object-fit: cover;
}
.course-detail-copy .course-description {
  margin-top: 26px;
}
.course-description p {
  max-width: 720px;
  font-size: 1.08rem;
  line-height: 1.75;
}
.booking-note {
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.5;
}
.course-booking {
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--line);
}
.course-booking-intro {
  max-width: 680px;
  margin-bottom: 25px;
}
.course-booking-intro h2 {
  margin: 5px 0 10px;
  color: var(--petrol-deep);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.12;
}
.course-booking-intro p:last-child {
  margin: 0;
  line-height: 1.6;
}
.kutego-booking-widget {
  display: block;
  width: 100%;
  height: 720px; /* fallback until kutego-booking.js resizes it to the widget's real content height */
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.holiday-subnav {
  display: flex;
  gap: 10px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.holiday-subnav a {
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--petrol);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}
.holiday-programme {
  padding-top: 38px;
  padding-bottom: 80px;
  border-top: 1px solid var(--line);
}
.holiday-programme-intro {
  max-width: 760px;
  margin-bottom: 38px;
}
.holiday-programme-intro h2 {
  margin: 5px 0 12px;
  color: var(--petrol-deep);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
}
.holiday-programme-intro p:last-child {
  margin: 0;
  line-height: 1.6;
}
.holiday-course-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.holiday-course {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}
.holiday-course-image {
  display: block;
  background: #e8eeee;
}
.holiday-course-image img {
  display: block;
  width: 100%;
  height: clamp(190px, 16vw, 260px);
  object-fit: cover;
}
.holiday-course-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px 26px 26px;
}
.holiday-course h3 {
  margin: 0 0 12px;
  color: var(--petrol-deep);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.15;
}
.holiday-course-copy > p:not(.course-category) {
  margin: 0;
  color: #53656c;
  font-size: .98rem;
  line-height: 1.65;
}
.holiday-course-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.holiday-course dt {
  margin-bottom: 3px;
  color: #6a7b81;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.holiday-course dd {
  margin: 0;
  color: var(--petrol-deep);
  font-weight: 700;
}
.holiday-course-fact-group {
  display: grid;
  align-content: start;
  gap: 14px;
}
.holiday-course-fact-group > div + div {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.holiday-course-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}
.holiday-course-actions .button {
  flex: 0 0 auto;
  padding: 11px 15px;
  font-size: .9rem;
}
.holiday-booking-widget {
  height: 720px;
}
.course-return {
  padding-bottom: 80px;
}
.course-return p {
  margin-bottom: 7px;
}

@media (max-width: 900px) {
  .visit-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  
  .catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .course-card-body {
    padding: 20px;
  }
  
  
  
  .catalogue-hero {
    padding: 58px 0;
  }
  .catalogue-toolbar,
  .course-detail-hero {
    grid-template-columns: 1fr;
  }
  .catalogue-toolbar {
    display: grid;
    align-items: start;
  }
  .category-filter {
    justify-content: flex-start;
  }
  .catalogue-grid {
    grid-template-columns: 1fr;
  }
  .course-detail-hero {
    gap: 26px;
    padding-top: 28px;
  }
  .course-detail-hero > img {
    min-height: 230px;
  }
  .holiday-course {
    border-radius: 18px;
  }
  .kutego-booking-widget {
    height: 900px;
  }
}
@media (max-width: 800px) {
  .holiday-course-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 460px) {
  .holiday-course-copy {
    padding: 22px;
  }
  .holiday-course-facts {
    grid-template-columns: 1fr;
  }
  .holiday-course-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .holiday-course-actions .button {
    text-align: center;
  }
}

/* Mobile navigation menu, linked course worlds and the course detail facts. */
.header {
  position: relative;
}
.nav-menu {
  display: none;
}
.nav-menu summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  font-size: 0.8125rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.nav-menu summary::-webkit-details-marker {
  display: none;
}
.nav-menu summary::before {
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow:
    0 6px currentColor,
    0 -6px currentColor;
  content: "";
}
.nav-menu[open] summary::before {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-size: 1.5rem;
  line-height: 1;
  content: "×";
}
.nav-menu summary:hover {
  background: var(--ink);
  color: #fff;
}

.card {
  position: relative;
}
.card-link {
  text-decoration: none;
}
.card-link::after {
  position: absolute;
  inset: 0;
  content: "";
}
.card-link:focus-visible {
  outline: none;
}
.card:has(.card-link:focus-visible) {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}
.card-more {
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 700;
}
.card:hover .card-more {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.course-detail-copy {
  min-width: 0;
}
.course-key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px 24px;
  max-width: 560px;
  margin: 26px 0 0;
}
.course-key-facts > div {
  padding-left: 14px;
  border-left: 3px solid var(--yellow);
}
.course-key-facts dt {
  margin-bottom: 2px;
  color: #53656c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.course-key-facts dd {
  margin: 0;
  color: var(--petrol-deep);
  font-weight: 700;
  line-height: 1.4;
}
.course-cta {
  margin-top: 30px;
}
.booking-note + .button {
  margin-top: 18px;
}
.footer-klax {
  grid-column: 4;
  min-width: 0;
  max-width: 260px;
}

@media (max-width: 800px) {
  /* Workshop selection is already the first action on the holiday page; keep the header to the menu. */
  header nav > .button.small {
    display: none;
  }
  .footer-klax {
    grid-column: 2;
  }
  nav {
    gap: 12px;
  }
  .nav-menu {
    display: block;
  }
  .nav-menu-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    margin-top: -1px;
    border: 1px solid var(--line);
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: 0 18px 30px #18343e1f;
  }
  /* .header raises these above `.header .nav-link`, which would drop the padding and weight of the main links. */
  .header .nav-menu-panel a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 700;
  }
  .header .nav-menu-panel a:last-child {
    border-bottom: 0;
  }
  .header .nav-menu-panel .nav-link::after {
    display: none;
  }
  .header .nav-menu-panel .nav-link.is-active,
  body:has(#preise:target) .header .nav-menu-panel .nav-link[href$="#preise"] {
    background: #e7f4f7;
    box-shadow: inset 4px 0 0 var(--coral);
  }
}

@media (max-width: 480px) {
  .footer-klax {
    grid-column: 1;
  }
  .button.small {
    white-space: nowrap;
  }
  .nav-menu summary {
    width: 44px;
    padding: 0;
  }
  .nav-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .course-cta {
    width: 100%;
  }
}

@media (max-width: 359px) {
  header nav > .button.small {
    display: none;
  }
}

/* Age and category filters on the course index. */
.catalogue-toolbar {
  margin-bottom: 22px;
}
.catalogue-filters {
  display: grid;
  gap: 12px;
  margin-bottom: 34px;
}
.catalogue-filters .category-filter {
  align-items: center;
  justify-content: flex-start;
}
.filter-label {
  min-width: 64px;
  color: #53656c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-count {
  margin-left: 2px;
  font-weight: 700;
}
.category-filter a.is-empty {
  border-style: dashed;
  color: #5f6f75;
}
.catalogue-note {
  margin: 28px 0 0;
  color: #53656c;
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .filter-label {
    flex-basis: 100%;
  }
}

/* Age entry points on the landing page. */
.age-finder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
  margin-top: 40px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--line);
}
.age-finder .eyebrow {
  margin-bottom: 10px;
}
.age-finder h3 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1.2;
}
.age-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.age-links a {
  display: grid;
  gap: 4px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.age-links a:hover {
  border-color: var(--petrol);
  transform: translateY(-2px);
}
.age-link-label {
  color: var(--petrol-deep);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.age-link-count {
  color: #53656c;
  font-size: 0.875rem;
  font-weight: 700;
}

@media (max-width: 800px) {
  .age-finder {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .age-links {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .age-links a {
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
  }
}

/* Pricing, FAQ and ticket cards. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pricing,
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 1px solid var(--line);
}
.pricing h2,
.faq h2 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  line-height: 1.1;
}
.pricing-intro > p:last-child {
  margin: 20px 0 0;
  line-height: 1.7;
}
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
.price-table th,
.price-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.price-table tbody tr:last-child > * {
  border-bottom: 0;
}
.price-table thead th {
  color: #53656c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price-table tbody th {
  font-weight: 700;
}
.price-table td {
  color: var(--petrol-deep);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.price-table td small {
  color: #53656c;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}
.price-note {
  margin: 14px 0 0;
  color: #53656c;
  font-size: 0.875rem;
}
.price-holiday {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fff1c9;
  line-height: 1.6;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  color: var(--petrol-text);
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-50%);
  content: "+";
}
.faq-list details[open] summary::after {
  content: "–";
}
.faq-list details > p {
  margin: 0 0 22px;
  max-width: 62ch;
  line-height: 1.7;
}

.course-tickets {
  padding-top: 56px;
  padding-bottom: 20px;
  border-top: 1px solid var(--line);
}
.course-tickets h2 {
  margin: 5px 0 0;
  color: var(--petrol-deep);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.12;
}
.ticket-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 18px;
  margin-top: 26px;
}
.ticket-list article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.ticket-list h3 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: 1.1rem;
}
.ticket-price {
  margin: 10px 0 8px;
  color: var(--petrol-deep);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ticket-price span {
  color: #53656c;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
}
.ticket-list article > p:last-child {
  margin: 0;
  line-height: 1.5;
}
.ticket-note {
  margin: 14px 0 0;
  color: #53656c;
  font-size: 0.875rem;
}

@media (max-width: 800px) {
  .pricing,
  .faq {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

@media (max-width: 480px) {
  .price-table th,
  .price-table td {
    padding: 14px 8px;
  }
  .price-table thead th {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .price-table tbody th {
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .price-table td {
    font-size: 1.05rem;
  }
  .price-table td small {
    display: block;
  }
}

/* Benefits strip, ticket flow, open-day photo and stations, holiday details. */
.benefits {
  padding-top: 8px;
  padding-bottom: 48px;
}
.benefits ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefits li {
  padding-left: 16px;
  border-left: 3px solid var(--yellow);
}
.benefits strong {
  display: block;
  color: var(--petrol-deep);
  font-size: 1.05rem;
  line-height: 1.3;
}
.benefits span {
  display: block;
  margin-top: 6px;
  color: #3d4f57;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.benefits .benefit-stack strong + strong {
  margin-top: 16px;
}
.programme > .benefits {
  padding-top: 36px;
  padding-bottom: 0;
}

.steps {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding-left: 48px;
  counter-increment: step;
}
.steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--petrol-deep);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  content: counter(step);
}
.steps strong {
  display: block;
  color: var(--petrol-deep);
}
.steps span {
  display: block;
  margin-top: 2px;
  line-height: 1.55;
}
.price-terms {
  margin: 14px 0 0;
  line-height: 1.6;
}
.faq-contact {
  margin: 26px 0 0;
  line-height: 1.7;
}
.ticket-note + .ticket-note {
  margin-top: 6px;
}

.visit-media {
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 64px 8px 8px 8px;
  background: #244b55;
}
.visit-media picture,
.visit-media img {
  display: block;
  width: 100%;
  height: 100%;
}
.visit-media img {
  object-fit: cover;
  object-position: center 48%;
}
.visit-stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.visit-stations li {
  padding-top: 16px;
  border-top: 2px solid var(--mint);
}
.visit-stations strong {
  display: block;
  color: #fff;
  font-size: 1rem;
}
.visit-stations span {
  display: block;
  margin-top: 4px;
  color: #d8e7e5;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.holiday-highlights {
  margin: 0;
  padding: 0 0 0 1.1em;
  line-height: 1.7;
}
.holiday-day-plan h3 {
  margin: 0 0 10px;
  color: var(--petrol-deep);
  font-size: 1.1rem;
}
.holiday-day-plan dl {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}
.holiday-day-plan dl > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.holiday-day-plan dt {
  color: var(--petrol-deep);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.holiday-day-plan dd {
  margin: 0;
}

@media (max-width: 800px) {
  .visit-stations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
}

@media (max-width: 560px) {
  .visit-media {
    border-radius: 36px 6px 6px 6px;
  }
  
}

/* Holiday programme landing page. */
.holiday-lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: stretch;
  padding-top: 56px;
  padding-bottom: 44px;
}
.holiday-lp-hero .holiday-lp-photo {
  aspect-ratio: auto;
  min-height: 310px;
}
.holiday-lp-copy h1 {
  font-size: clamp(1.875rem, 3.4vw, 3.25rem);
}
.holiday-lp-copy .lead {
  max-width: 34rem;
}
.holiday-mobile-booking {
  display: none;
}
.holiday-answer {
  max-width: 38rem;
  margin: 0 0 16px;
  color: var(--petrol-deep);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
}
.holiday-lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
  margin-top: 28px;
}
.holiday-lp-photo {
  min-width: 0;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 64px 8px 8px 8px;
  background: #e8e6dc;
}
.holiday-lp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.holiday-weeks {
  padding-top: 56px;
  padding-bottom: 60px;
  border-top: 1px solid var(--line);
}
.holiday-weeks h2,
.holiday-concept h2 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  line-height: 1.1;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  margin-top: 28px;
}
.week-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.week-card-live {
  border-color: var(--petrol);
  box-shadow: 0 8px 25px #18343e12;
}
.week-card h3 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: 1.15rem;
}
.week-dates {
  margin: 0;
  font-weight: 700;
}
.week-price {
  margin: 10px 0 0;
  color: var(--petrol-deep);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.week-price span {
  color: #53656c;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
}
.week-note {
  margin: 0;
  color: #53656c;
  font-size: 0.9rem;
}
.week-card .availability {
  align-self: flex-start;
  margin-top: 10px;
}
.week-card .text-link {
  margin-top: 6px;
}
.holiday-weeks-upcoming .week-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}
.week-card-upcoming {
  gap: 5px;
  padding: 18px;
  border-color: #dfe4df;
  border-radius: 10px;
  background: #fbfcfa;
}
.week-card-upcoming h3 {
  color: #2f5966;
  font-size: 1rem;
}
.week-card-upcoming .week-dates {
  color: #50646b;
  font-weight: 600;
}
.week-card-upcoming .week-price {
  margin-top: 4px;
  color: #2f5966;
  font-size: 1.5rem;
}
.week-card-upcoming .week-price span {
  font-size: 0.8125rem;
}
.week-card-upcoming .availability {
  margin-top: 6px;
}
.holiday-weeks-upcoming .text-link,
.holiday-weeks-upcoming .text-link:hover {
  text-decoration: none;
}
.holiday-weeks-upcoming .text-link:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.week-footnote {
  max-width: 70ch;
  margin: 22px 0 0;
  color: #53656c;
  font-size: 0.9rem;
  line-height: 1.6;
}
.holiday-concept {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid var(--line);
}
.holiday-concept .eyebrow {
  margin-bottom: 14px;
}
.holiday-concept p:not(.eyebrow) {
  max-width: 58ch;
  margin: 20px 0 0;
  line-height: 1.7;
}
.holiday-close {
  padding-bottom: 72px;
}

@media (max-width: 800px) {
  .holiday-lp-hero,
  .holiday-concept {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .holiday-lp-hero {
    padding-top: 36px;
    align-items: center;
  }
  .holiday-lp-photo {
    border-radius: 48px 6px 6px 6px;
  }
  .holiday-lp-hero .holiday-lp-photo {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  /* On the conversion page, the booking decision outranks supporting copy and imagery. */
  .holiday-period-breadcrumbs,
  .holiday-lp-copy > .holiday-answer,
  .holiday-lp-copy > .lead,
  .holiday-lp-copy > .holiday-discount,
  .holiday-lp-copy > .holiday-lp-actions,
  .holiday-lp-hero .holiday-lp-photo {
    display: none;
  }
  .holiday-lp-hero {
    display: block;
    padding-top: 28px;
    padding-bottom: 34px;
  }
  .holiday-lp-copy > .eyebrow {
    margin: 0 0 8px;
  }
  .holiday-lp-copy h1 {
    margin: 0;
    font-size: clamp(1.9rem, 8vw, 2.45rem);
    line-height: 1.08;
  }
  .holiday-mobile-booking {
    display: block;
    margin-top: 18px;
  }
  .holiday-mobile-booking-list {
    display: grid;
    gap: 10px;
  }
  .holiday-mobile-booking-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--petrol);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px #18343e0d;
  }
  .holiday-mobile-course-age {
    margin: 0 0 3px;
    color: var(--petrol-text);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.25;
  }
  .holiday-mobile-booking-card h3 {
    margin: 0;
    color: var(--petrol-deep);
    font-size: .95rem;
    line-height: 1.25;
    text-wrap: initial;
  }
  .holiday-mobile-booking-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 9px 0 0;
  }
  .holiday-mobile-booking-facts dt {
    margin: 0 0 1px;
    color: #6a7b81;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .holiday-mobile-booking-facts dd {
    margin: 0;
    color: var(--petrol-deep);
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .holiday-mobile-booking-facts > div:last-child dd {
    font-size: .95rem;
  }
  .holiday-mobile-booking-card .button {
    min-height: 48px;
    padding: 10px 12px;
    font-size: .8rem;
    line-height: 1.2;
  }

}
@media (max-width: 370px) {
  .holiday-mobile-booking-card {
    gap: 8px;
    padding: 10px;
  }
  .holiday-mobile-booking-facts {
    gap: 7px;
  }
  .holiday-mobile-booking-card .button {
    padding: 9px 10px;
  }
}

.holiday-subnav {
  flex-wrap: wrap;
}
.holiday-subnav a {
  white-space: nowrap;
}

/* Sticky call-to-action (small screens only; shown by assets/sticky-cta.js). */
.sticky-cta {
  display: none;
}
@media (max-width: 800px) {
  .sticky-cta {
    position: fixed;
    z-index: 30;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    display: flex;
    box-shadow: 0 10px 30px #18343e40;
    transform: translateY(160%);
    visibility: hidden;
    transition:
      transform 0.25s ease,
      visibility 0.25s;
  }
  .sticky-cta.is-visible {
    transform: none;
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* Weekday timetable and the list/timetable switch. */
.view-switch {
  display: inline-flex;
  align-self: flex-end;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.view-switch a {
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--petrol-text);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.view-switch a[aria-current="page"] {
  background: var(--petrol);
  color: #fff;
}
.timetable-wrap {
  overflow-x: auto;
}
.timetable {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
.timetable th,
.timetable td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.timetable tbody tr:last-child > * {
  border-bottom: 0;
}
.timetable td + td,
.timetable th + th,
.timetable th + td {
  border-left: 1px solid var(--line);
}
.timetable thead th {
  background: #f1efe6;
  color: var(--petrol-deep);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.timetable tbody th {
  width: 130px;
  color: var(--petrol-deep);
  font-weight: 800;
  white-space: nowrap;
}
.timetable tbody th span {
  display: block;
  color: #53656c;
  font-size: 0.8rem;
  font-weight: 600;
}
.timetable ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timetable li a {
  color: var(--petrol-deep);
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}
.timetable li a:hover {
  text-decoration: underline;
}
.tt-meta,
.tt-teacher {
  display: block;
  margin-top: 2px;
  color: #3d4f57;
  font-size: 0.85rem;
  line-height: 1.4;
}
.tt-teacher {
  color: #53656c;
}
.timetable li .availability {
  margin-top: 6px;
}
.timetable td.is-empty {
  color: #9aa7ac;
}

@media (max-width: 800px) {
  .timetable-wrap {
    overflow: visible;
  }
  .timetable,
  .timetable tbody,
  .timetable tr,
  .timetable th,
  .timetable td {
    display: block;
  }
  .timetable {
    min-width: 0;
    border: 0;
    background: none;
  }
  .timetable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .timetable tr {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  .timetable tbody th {
    width: auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: #f1efe6;
  }
  .timetable th + td,
  .timetable td + td {
    border-left: 0;
  }
  .timetable td {
    padding: 12px 16px;
  }
  .timetable td.is-empty {
    display: none;
  }
  .timetable td::before {
    display: block;
    margin-bottom: 6px;
    color: #53656c;
    content: attr(data-day);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* Featured holiday week on the overview page. */
.holiday-featured {
  padding-top: 48px;
  padding-bottom: 56px;
}
.holiday-featured-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--petrol);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 25px #18343e12;
}
.holiday-featured-card--coming-soon {
  grid-template-columns: 1fr;
  border-color: #ffb5a4;
  background: #fff4f0;
}
.holiday-featured-photo {
  min-height: 100%;
  margin: 0;
  background: #d9c9a8;
}
.holiday-featured-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.holiday-featured-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 36px;
}
.holiday-featured-copy h2 {
  margin: 0;
  color: var(--petrol-deep);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.15;
}
.holiday-featured-copy p {
  margin: 0;
  line-height: 1.6;
}
.holiday-featured-card:has(.card-link:focus-visible) {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}
.holiday-featured-card:hover .card-more {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 800px) {
  .holiday-featured-card {
    grid-template-columns: 1fr;
  }
  .holiday-featured-photo {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .holiday-featured-copy {
    padding: 22px;
  }
}

/* Contextual links make the course catalogue a useful path into current holiday offers. */
.catalogue-holiday-teaser,
.course-location,
.course-holiday,
.holiday-workshop-content,
.holiday-workshop-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  margin-bottom: 40px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f4eee0;
}
.catalogue-holiday-teaser h2,
.course-location h2,
.course-holiday h2,
.holiday-workshop-content h2,
.holiday-workshop-booking h2,
.holiday-practical h2 {
  margin: 5px 0 10px;
  color: var(--petrol-deep);
  font-size: clamp(1.65rem, 1.2rem + 1.4vw, 2.45rem);
  line-height: 1.12;
}
.catalogue-holiday-teaser p:not(.eyebrow),
.course-location p,
.course-holiday p,
.holiday-workshop-content p,
.holiday-workshop-booking p {
  max-width: 64ch;
  margin: 0;
  line-height: 1.65;
}
.course-location {
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--line);
  border-right: 0;
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.course-location-actions {
  display: grid;
  gap: 12px;
  align-content: start;
}
.course-location address {
  color: var(--petrol-deep);
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
}
.course-related {
  padding-top: 58px;
  padding-bottom: 58px;
  border-top: 1px solid var(--line);
}
.course-related-intro {
  max-width: 650px;
  margin-bottom: 28px;
}
.course-related-intro h2 {
  margin: 5px 0 0;
  color: var(--petrol-deep);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  line-height: 1.12;
}
.course-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.course-related-grid article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.course-related-grid img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.course-related-grid article > div {
  padding: 18px;
}
.course-related-grid h3 {
  margin: 4px 0 10px;
  color: var(--petrol-deep);
  font-size: 1.3rem;
  line-height: 1.2;
}
.course-related-grid h3 a,
.holiday-course h3 a {
  color: inherit;
  text-decoration: none;
}
.course-related-grid h3 a:hover,
.holiday-course h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.course-related-grid article > div > p:not(.course-category) {
  margin: 0 0 14px;
  color: #53656c;
  font-size: .9rem;
  line-height: 1.55;
}
.course-holiday {
  margin-top: 0;
  background: #dceeea;
}
.holiday-workshop-actions .button {
  white-space: normal;
}
.holiday-practical {
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid var(--line);
}
.holiday-practical > div:first-child {
  max-width: 600px;
  margin-bottom: 28px;
}
.holiday-practical-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.holiday-practical-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.holiday-practical-grid h3 {
  margin: 0 0 10px;
  color: var(--petrol-deep);
  font-size: 1.08rem;
  line-height: 1.3;
}
.holiday-practical-grid p {
  margin: 0 0 14px;
  color: #3d4f57;
  font-size: .94rem;
  line-height: 1.6;
}
.holiday-workshop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: stretch;
  padding-top: 44px;
  padding-bottom: 44px;
}
.holiday-workshop-hero .holiday-lp-photo {
  aspect-ratio: auto;
  min-height: 310px;
}
.holiday-workshop-copy h1 {
  margin: 5px 0 18px;
  color: var(--petrol-deep);
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
  line-height: 1.05;
}
.holiday-workshop-copy .lead {
  max-width: 36rem;
}
.holiday-workshop-content {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
  margin: 0 auto;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.holiday-workshop-content .holiday-highlights {
  margin: 12px 0 0;
}
.holiday-workshop-content .holiday-day-plan {
  margin-top: 28px;
}
.holiday-workshop-booking {
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 72px;
  background: #eaf3f6;
}
.holiday-workshop-booking .kutego-booking-widget {
  height: 720px;
}
.holiday-workshop-return {
  margin-top: -36px;
  margin-bottom: 72px;
  text-align: center;
}

@media (max-width: 900px) {
  .course-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .holiday-practical-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .catalogue-holiday-teaser,
  .course-location,
  .course-holiday,
  .holiday-workshop-content,
  .holiday-workshop-booking,
  .holiday-workshop-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .catalogue-holiday-teaser,
  .course-holiday,
  .holiday-workshop-booking {
    padding: 24px;
  }
  .course-location,
  .holiday-workshop-content {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .holiday-workshop-content {
    gap: 44px;
  }
  .course-related {
    padding-top: 46px;
    padding-bottom: 46px;
  }
  .holiday-practical {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .holiday-workshop-hero {
    padding-top: 32px;
    align-items: center;
  }
  .holiday-workshop-hero .holiday-lp-photo {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .course-related-grid,
  .holiday-practical-grid {
    grid-template-columns: 1fr;
  }
  .course-related-grid img {
    height: 200px;
  }
  .holiday-workshop-booking .kutego-booking-widget {
    height: 900px;
  }
}

/* Homepage hero while the next holiday week is bookable: pick a workshop by age, countdown sticker. */
.hero-campaign h1 {
  font-size: clamp(2.75rem, 4.4vw, 4.25rem);
}
.hero-campaign h1 .serif {
  color: var(--coral-cta);
}
.hero-campaign .live-dot {
  position: relative;
}
.hero-campaign .live-dot::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--coral);
  content: "";
  animation: campaign-pulse 1.8s ease-out infinite;
}
@keyframes campaign-pulse {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}
.hero-campaign .lead {
  margin-bottom: 20px;
}
.campaign-pick-label {
  margin: 0 0 10px;
  color: #606358;
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.campaign-picks {
  display: grid;
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.campaign-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "age name status arrow";
  gap: 6px 14px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--yellow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.campaign-pick:hover,
.campaign-pick:focus-visible {
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--yellow);
  transform: translate(-3px, -3px);
}
.campaign-pick-age {
  grid-area: age;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--petrol-deep);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 800;
  white-space: nowrap;
}
.campaign-pick-name {
  grid-area: name;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
}
.campaign-status {
  grid-area: status;
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e1f7ed;
  color: #155d42;
  font-size: 0.8125rem;
  font-weight: 800;
  white-space: nowrap;
}
.campaign-status-bookable::before,
.campaign-status-few::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  vertical-align: 1px;
}
.campaign-status-few {
  background: #fde6df;
  color: #95361d;
}
.campaign-status-waitlist {
  background: #fff1c9;
  color: #805e00;
}
.campaign-status-full {
  background: #e9edf0;
  color: #3e5664;
}
.campaign-pick-arrow {
  grid-area: arrow;
  font-size: 1.375rem;
  font-weight: 800;
  transition: transform 0.15s;
}
.campaign-pick:hover .campaign-pick-arrow,
.hero-campaign .button:hover span {
  transform: translateX(4px);
}
.hero-campaign .button span {
  transition: transform 0.2s;
}
.campaign-price {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #606358;
  font-size: var(--type-detail);
  line-height: 1.45;
}
.campaign-price strong {
  color: var(--ink);
  font-size: 1.0625rem;
}
.campaign-visual {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.campaign-visual:hover {
  color: var(--ink);
}
.campaign-sticker {
  right: -16px;
  top: -18px;
  text-align: center;
  transition: transform 0.25s;
}
.campaign-visual:hover .campaign-sticker {
  transform: rotate(4deg) scale(1.06);
}
.campaign-sticker > span {
  font-size: 24px;
  line-height: 1;
}
.campaign-sticker strong {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.campaign-sticker b {
  margin-top: 8px;
  text-transform: uppercase;
}
.campaign-theme {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: var(--type-detail);
  font-weight: 800;
}
@media (max-width: 800px) {
  .hero-campaign .hero-visual {
    margin-top: 8px;
  }
  .campaign-sticker {
    right: 10px;
    top: -14px;
    width: 116px;
    height: 116px;
  }
  .campaign-sticker > span {
    font-size: 19px;
  }
  .campaign-sticker strong {
    font-size: 30px;
  }
  .campaign-sticker b {
    margin-top: 5px;
    font-size: 0.625rem;
  }
}
@media (max-width: 560px) {
  .hero-campaign h1 {
    font-size: 2.5rem;
    letter-spacing: -0.04em;
  }
  .campaign-pick {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "age status arrow"
      "name name arrow";
    padding: 12px 14px;
  }
  .campaign-price {
    align-items: center;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-campaign .live-dot::after {
    display: none;
  }
}

/* Discount code of a holiday programme: home hero, overview card, period and workshop pages. */
.holiday-discount {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 34em;
  margin: 0 0 24px;
  padding: 14px 18px 14px 14px;
  border: 2px dashed var(--coral-cta);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: var(--type-detail);
  line-height: 1.5;
}
.holiday-discount-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  transform: rotate(-7deg);
}
.holiday-discount strong {
  color: var(--coral-cta);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.holiday-discount small {
  display: block;
  color: #606358;
  font-size: var(--type-detail);
}
.holiday-workshop-booking .holiday-discount {
  margin: 0 0 16px;
}
@media (max-width: 480px) {
  .holiday-discount {
    gap: 12px;
    padding: 12px;
  }
  .holiday-discount-badge {
    width: 80px;
    height: 80px;
    font-size: 1.375rem;
  }
}

/* Hero of a dated event (config/events.php, partials/event_hero.html.twig), on the homepage and on the event
   page. The copy sits on a coloured stage as wide as the page; .hero-theme-* below sets colours and decor.
   Layers, back to front: backdrop (snow, only on the stage colour), copy and photo, front (paper strips, cut
   off at the stage edges), sticker (may hang below the stage), trees (standing on the stage's bottom edge). */
.hero-event {
  --event-ink: var(--petrol-deep);
  --event-accent: var(--petrol-text);
  --event-stage: #e4f0f3;
  --event-sticker: #c7e3ec;
  --event-pad-bottom: clamp(48px, 4.8vw, 64px);
  /* Type size of the sticker; the sticker and the trees beside it scale with it. */
  --event-sticker-size: 1.375rem;
  /* Width of the trees (8.4 sticker sizes tall, 360:547), so the sticker beside them can make room. */
  --event-trees-width: calc(var(--event-sticker-size) * 8.4 * 360 / 547);
  /* Hard offset shadow under the sticker and the trees, as of paper cut-outs lying on the stage. */
  --event-shadow-offset: calc(var(--event-sticker-size) * 0.3);
  --event-shadow: rgb(0 87 112 / 0.2);
  position: relative;
  isolation: isolate;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: clamp(40px, 3.6vw, 48px) clamp(24px, 4.5vw, 64px) var(--event-pad-bottom);
  border-radius: 8px;
  background: var(--event-stage);
}
/* The stage's own edge replaces the divider below the header. */
body:has(.hero-event) .header {
  border-bottom-color: transparent;
}
/* The hero grid (copy | photo) inside the stage; on the event page more content follows it on the stage. */
.hero-event-main {
  align-items: end;
  padding: 0;
}
.hero-event-backdrop,
.hero-event-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.hero-event-backdrop {
  z-index: 0;
}
.hero-event-front {
  z-index: 3;
}
.hero-event .hero-copy {
  position: relative;
  z-index: 4;
}
.hero-event h1 {
  margin: 0 0 22px;
  color: var(--event-ink);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  hyphens: auto;
}
.hero-event-subtitle,
.hero-event-line {
  display: block;
  color: var(--event-accent);
  /* At least 24px: large text, readable in petrol on the light stage. */
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  hyphens: manual;
}
.hero-event-subtitle {
  margin-top: 14px;
}
.hero-event-line {
  margin: 0 0 12px;
}
.hero-event-date {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 800;
  line-height: 1.45;
}
.hero-event-note {
  margin: 0 0 32px;
  color: var(--event-ink);
  font-size: 1.125rem;
  font-weight: 700;
}
.hero-event .button {
  padding: 16px 32px;
  background: var(--event-accent);
  font-size: 1.25rem;
}
.hero-event .button:hover {
  background: var(--event-ink);
}
.hero-event-visual > img {
  position: relative;
  z-index: 2;
}
/* At the photo's bottom-right corner, left of the trees, which stand 6px inside the photo's right edge and
   overlap the sticker's edge by 22px. */
.hero-event-sticker {
  top: auto;
  right: calc(var(--event-trees-width) - 16px);
  bottom: calc(-1 * var(--event-pad-bottom) - 40px);
  left: auto;
  z-index: 4;
  /* Sized in em: 9.1em of text width fits "eine Ferienwoche" but not "Mitmachen und eine", so the text always
     breaks into the same three lines. */
  width: 10.6em;
  height: 8.8em;
  padding: 0.75em;
  border-radius: 52% 48% 46% 54% / 56% 50% 50% 44%;
  background: var(--event-sticker);
  color: var(--event-ink);
  font-size: var(--event-sticker-size);
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--event-shadow-offset) var(--event-shadow-offset) 0 var(--event-shadow);
  transform: none;
  rotate: -8deg;
  transition: scale 0.25s;
  animation: event-sticker 4.5s ease-in-out infinite alternate;
}
.hero-event-sticker span {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}
.hero-event-sticker:hover,
.hero-event-sticker:focus-visible {
  color: var(--event-ink);
  scale: 1.05;
}
@keyframes event-sticker {
  from {
    rotate: -9deg;
  }
  to {
    rotate: -5deg;
  }
}

/* Winter: torn blue paper rising to the right in the top-left corner (on the event page also in the bottom-right
   corner), slowly falling snow, two fir trees at the photo. Both strips are papier-dunkel: its torn, light fringe
   faces the stage. Sizes and shifts are fractions of the stage width, so the strips keep their shape at every width. */
.hero-theme-winter .hero-event-backdrop::before,
.hero-theme-winter .hero-event-backdrop::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("themes/winter/schneeflocken.webp") 0 0 repeat;
  content: "";
  will-change: transform;
}
/* Each layer moves by exactly one tile, so the loop has no seam; the nearer layer is larger and faster. */
.hero-theme-winter .hero-event-backdrop::before {
  top: -662px;
  background-size: 1000px 662px;
  opacity: 0.75;
  animation: winter-snow-far 44s linear infinite;
}
.hero-theme-winter .hero-event-backdrop::after {
  top: -927px;
  background-position: 420px 0;
  background-size: 1400px 927px;
  opacity: 0.9;
  animation: winter-snow-near 34s linear infinite;
}
@keyframes winter-snow-far {
  to {
    transform: translateY(662px);
  }
}
@keyframes winter-snow-near {
  to {
    transform: translateY(927px);
  }
}
.hero-theme-winter .hero-event-front::before,
.hero-theme-winter.hero-event-page .hero-event-front::after {
  position: absolute;
  aspect-ratio: 900 / 405;
  background: url("themes/winter/papier-dunkel.webp") center / 100% 100% no-repeat;
  content: "";
}
/* Fringe from about 9 % of the stage width deep at the left edge up to the top edge at about 48 %. */
.hero-theme-winter .hero-event-front::before {
  top: 0;
  left: -8%;
  width: 62%;
  transform: translateY(-69%) rotate(-11deg);
}
/* Event page only. Turned over, fringe up: rises from about 4 % above the bottom edge to 12 % at the right edge. */
.hero-theme-winter.hero-event-page .hero-event-front::after {
  right: -6%;
  bottom: 0;
  width: 56%;
  transform: translateY(54%) rotate(170deg);
}
.hero-theme-winter .hero-event-visual::after,
.hero-theme-winter.hero-event-page::after {
  position: absolute;
  z-index: 5;
  /* Nearly as tall as the sticker (8.8em). */
  height: calc(var(--event-sticker-size) * 8.4);
  aspect-ratio: 360 / 547;
  background: url("themes/winter/tannen.webp") center bottom / contain no-repeat;
  content: "";
  /* Shadow to the side only, so the trees still stand on the stage's bottom edge. */
  filter: drop-shadow(var(--event-shadow-offset) 0 var(--event-shadow));
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: winter-trees 5.5s ease-in-out infinite alternate;
}
/* Homepage: on the stage's bottom edge at the photo's right edge, overlapping the sticker's edge. */
.hero-theme-winter .hero-event-visual::after {
  right: 6px;
  bottom: calc(-1 * var(--event-pad-bottom));
}
@keyframes winter-trees {
  from {
    rotate: -1deg;
  }
  to {
    rotate: 1deg;
  }
}
@media (max-width: 1100px) {
  .hero-event {
    --event-sticker-size: 1.125rem;
  }
}
/* Narrow two-column stage: smaller, so sticker and trees fit on the narrower photo. */
@media (min-width: 801px) and (max-width: 960px) {
  .hero-event {
    --event-sticker-size: 0.9375rem;
  }
}
@media (max-width: 800px) {
  .hero-event {
    --event-pad-bottom: 56px;
    --event-sticker-size: 1rem;
    width: 100%;
    border-radius: 0;
    padding: 76px 28px var(--event-pad-bottom);
  }
  .hero-event-visual {
    margin-top: 8px;
  }
  /* Half as large again, so the strips stay visible on a narrow stage. */
  .hero-theme-winter .hero-event-front::before {
    left: -12%;
    width: 93%;
  }
  .hero-theme-winter.hero-event-page .hero-event-front::after {
    right: -8%;
    width: 73%;
  }
  /* Left of the trees, which overlap its edge by 24px. */
  .hero-event-sticker {
    right: calc(var(--event-trees-width) - 34px);
    bottom: calc(-1 * var(--event-pad-bottom) - 28px);
  }
  /* In the stage's bottom-right corner, 10px past the photo's edge. */
  .hero-theme-winter .hero-event-visual::after {
    right: -10px;
  }
}
@media (max-width: 480px) {
  .hero-event {
    padding: 72px 18px var(--event-pad-bottom);
  }
  .hero-event h1 {
    font-size: clamp(1.625rem, 8.6vw, 2.5rem);
  }
  .hero-event-note {
    margin-bottom: 24px;
  }
  .hero-event .actions .button {
    width: 100%;
  }
}
/* Event page: the stage also carries facts and stations. Calmer snow, the sticker at the photo's top corner, and
   the trees in the stage's bottom-left corner, clear of the paper strip on the right. */
.hero-event-page {
  --event-pad-bottom: clamp(88px, 12vw, 170px);
}
.hero-event-page > .event-facts,
.hero-event-page > .event-stations,
.hero-event-page > .event-yard {
  position: relative;
  z-index: 4;
}
.hero-event-page .hero-event-backdrop::before {
  opacity: 0.55;
  animation-duration: 96s;
}
.hero-event-page .hero-event-backdrop::after {
  opacity: 0.7;
  animation-duration: 76s;
}
.hero-event-page .hero-event-visual::after {
  display: none;
}
.hero-theme-winter.hero-event-page::after {
  bottom: 0;
  left: 4%;
  animation-duration: 8s;
}
.hero-event-page .hero-event-sticker {
  top: -30px;
  right: -24px;
  bottom: auto;
  left: auto;
}
@media (max-width: 800px) {
  /* Room for the trees below the centred last line. */
  .hero-event-page {
    --event-pad-bottom: calc(var(--event-sticker-size) * 8.4 + 16px);
  }
  .hero-event-page .hero-event-sticker {
    top: -36px;
    right: -6px;
  }
  .hero-theme-winter.hero-event-page::after {
    left: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-event-sticker,
  .hero-theme-winter .hero-event-backdrop::before,
  .hero-theme-winter .hero-event-backdrop::after,
  .hero-theme-winter .hero-event-visual::after,
  .hero-theme-winter.hero-event-page::after {
    animation: none;
  }
}


/* Event page: facts and stations on the stage, then the Voranmeldung, then more. */
.event-over {
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #fff1c9;
  color: var(--ink);
  font-weight: 700;
}
.event-facts dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  margin: clamp(48px, 5vw, 72px) 0 0;
}
/* Icon in a white disc left of label and value. */
.event-facts dl > div {
  position: relative;
  min-height: 72px;
  padding: 18px 0 0 72px;
  border-top: 2px solid var(--event-ink, var(--ink));
}
.event-fact-icon {
  position: absolute;
  top: 18px;
  left: 0;
  box-sizing: content-box;
  width: 26px;
  height: 26px;
  padding: 14px;
  border-radius: 50%;
  background: #fff;
  fill: none;
  stroke: var(--event-ink, var(--ink));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.event-facts dt {
  color: var(--petrol-text);
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-facts dd {
  margin: 4px 0 0;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.4;
}
.event-facts dd span {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
/* Event page: the sticker's winter blue instead of yellow for the ticket price, the places left and the Infostand
   sign; it reads on white, on the petrol Voranmeldung and on the page background. */
.event-page {
  --event-highlight: #c7e3ec;
}
/* Aktionskarte as a ticket: white body, perforation with two notches in the stage colour, blue stub with the price. */
.event-ticket {
  --notch: 15px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 0.32fr);
  margin-top: 40px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 6px 6px 0 #9fd0de;
}
.event-ticket-main {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
}
.event-ticket-label {
  margin: 0 0 6px;
  color: var(--petrol-text);
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-ticket-title {
  margin: 0 0 10px;
  color: var(--event-ink, var(--ink));
  font-size: var(--type-card);
  line-height: 1.2;
}
.event-ticket-stations {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.event-ticket-text {
  margin: 0;
}
.event-ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  border-left: 3px dashed rgba(0, 87, 112, 0.4);
  border-radius: 0 14px 14px 0;
  background: var(--event-highlight);
  color: var(--ink);
  text-align: center;
}
.event-ticket-stub strong {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.event-ticket-stub span {
  margin-top: 6px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.event-ticket-stub::before,
.event-ticket-stub::after {
  position: absolute;
  left: calc(-1 * var(--notch) - 1.5px);
  width: calc(2 * var(--notch));
  height: calc(2 * var(--notch));
  border-radius: 50%;
  background: var(--event-stage, var(--paper));
  content: "";
}
.event-ticket-stub::before {
  top: calc(-1 * var(--notch));
}
.event-ticket-stub::after {
  bottom: calc(-1 * var(--notch));
}
.event-stations {
  padding-top: clamp(56px, 6vw, 88px);
}
/* Headline and copy one below the other, across the full width. */
.event-stations .section-heading {
  display: block;
}
.event-stations .section-heading > p {
  max-width: none;
  margin: 16px 0 0;
  font-size: var(--type-intro);
  line-height: 1.6;
}
.event-station-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-station {
  overflow: hidden;
  padding: 0 26px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 6px 6px 0 #9fd0de;
}
.event-station-image {
  display: block;
  width: calc(100% + 52px);
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0 -26px 22px;
  object-fit: cover;
}
.event-station-place {
  margin: 0 0 6px;
  color: var(--petrol-text);
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-station h3 {
  margin: 0 0 10px;
  font-size: var(--type-card);
  line-height: 1.2;
}
.event-station p:last-child {
  margin: 0;
}
.event-take-home {
  margin: 36px 0 0;
  color: var(--event-ink, var(--ink));
  font-size: var(--type-intro);
  font-weight: 700;
  text-align: center;
}
/* Last point on the stage: what happens in the courtyard. */
.event-yard {
  max-width: 44em;
  margin: clamp(48px, 5vw, 72px) auto 0;
  text-align: center;
}
.event-yard h2 {
  margin: 0 0 10px;
  color: var(--event-ink, var(--ink));
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.event-yard p {
  margin: 0;
  font-size: var(--type-intro);
  line-height: 1.6;
}
/* Voranmeldung: the Gewinnspiel as the reason to register now, the form beside it. */
.event-signup {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 48px;
  margin-bottom: 16px;
  border-radius: 64px 10px 10px 10px;
  background: var(--petrol-deep);
  color: #fff;
}
.event-signup-copy {
  padding: clamp(32px, 5vw, 64px);
}
.event-signup-copy .eyebrow {
  color: #c7e3ec;
}
.event-signup-copy h2 {
  max-width: 14em;
  margin: 0 0 18px;
  color: #fff;
}
.event-signup-copy p {
  max-width: 34em;
  margin: 0 0 16px;
  font-size: 1.125rem;
}
.event-signup-copy .event-signup-places {
  display: inline-block;
  margin: 8px 0 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--event-highlight);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
}
.event-signup-copy .event-signup-places.is-full {
  background: #fff;
}
.event-signup-copy .event-signup-onsite {
  color: #d6e9ef;
  font-size: 1rem;
}
.event-signup-form {
  margin: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px);
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.event-signup-form > label:not(.consent) {
  font-size: 0.875rem;
}
.event-signup-form input:not([type="checkbox"]):not([type="hidden"]) {
  font-size: 1rem;
}
.event-signup-form .consent {
  font-size: 0.8125rem;
  line-height: 1.55;
}
.event-signup-form .button {
  background: var(--petrol-text);
  font-size: 1.125rem;
}
.event-signup-form .button:hover {
  background: var(--petrol-deep);
}
.event-signup-form .form-note {
  font-size: 0.8125rem;
}
.event-signup-form .message {
  font-size: 0.9375rem;
}
.event-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  padding-top: 64px;
  padding-bottom: 80px;
}
.event-next-media {
  margin: 0;
}
.event-next-media img {
  display: block;
  width: 100%;
  height: clamp(280px, 30vw, 420px);
  object-fit: cover;
  border-radius: 64px 8px 8px 8px;
}
.event-next-heading {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 26px;
}
/* Tear-off calendar sheet: weekday on a petrol band, the day large, month and year below. */
.event-next-date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 92px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 4px 0 #9fd0de;
  color: var(--ink);
  text-align: center;
  rotate: -4deg;
}
.event-next-date span:first-child {
  align-self: stretch;
  padding: 5px 0;
  background: var(--petrol-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.event-next-date strong {
  padding-top: 4px;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.event-next-date span:last-child {
  padding-bottom: 9px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.event-next h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
}
.event-next-offers {
  margin: 0 0 28px;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}
.event-next-offers li {
  border-bottom: 1px solid var(--line);
}
.event-next-offers a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 800;
  text-decoration: none;
}
.event-next-offers a span {
  color: var(--coral-cta);
  transition: transform 0.15s;
}
.event-next-offers a:hover,
.event-next-offers a:focus-visible {
  color: var(--petrol-text);
}
.event-next-offers a:hover span,
.event-next-offers a:focus-visible span {
  transform: translateX(5px);
}
.event-next-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
  font-size: 1.125rem;
}
/* The sign at the Infostand, as on the Aufsteller. */
.event-next-sign {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--event-highlight);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.event-next-sign b {
  font-weight: 800;
  letter-spacing: 0.08em;
}
@media (max-width: 1100px) {
  .event-facts dl > div {
    padding-left: 0;
    padding-top: 84px;
  }
}
@media (max-width: 900px) {
  .event-signup {
    grid-template-columns: 1fr;
  }
  .event-signup-copy {
    padding-bottom: 0;
  }
}
@media (max-width: 800px) {
  .event-station-list,
  .event-next {
    grid-template-columns: 1fr;
  }
  .event-next {
    padding-top: 48px;
    padding-bottom: 64px;
  }
  .event-next-media img {
    height: 240px;
  }
  .event-next-heading {
    gap: 16px;
  }
  .event-next-date {
    width: 80px;
  }
  .event-next-date strong {
    font-size: 2.125rem;
  }
  .event-signup {
    width: 100%;
    border-radius: 0;
  }
}
/* One column; the ticket's stub moves below its body, the perforation runs across. */
@media (max-width: 640px) {
  .event-facts dl {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .event-facts dl > div {
    padding: 16px 0 0 72px;
  }
  .event-ticket {
    grid-template-columns: 1fr;
  }
  .event-ticket-stub {
    flex-direction: row;
    gap: 12px;
    align-items: baseline;
    border-top: 3px dashed rgba(0, 87, 112, 0.4);
    border-left: 0;
    border-radius: 0 0 14px 14px;
  }
  .event-ticket-stub span {
    margin-top: 0;
  }
  .event-ticket-stub::before,
  .event-ticket-stub::after {
    top: calc(-1 * var(--notch) - 1.5px);
    bottom: auto;
  }
  .event-ticket-stub::before {
    left: calc(-1 * var(--notch));
  }
  .event-ticket-stub::after {
    right: calc(-1 * var(--notch));
    left: auto;
  }
}
@media (max-width: 560px) {
  .event-signup-form {
    margin: 16px 0 0;
    border-radius: 0;
  }
}