/* Meditation Ursula Scheid
   Type leads, photography accompanies. Her pictures are small documents of a
   practice, so they are set at their true size and labelled, never enlarged.
   The one device that carries meaning is the step inward. */

@font-face {
  font-family: 'Vollkorn';
  src: url('/assets/fonts/vollkorn-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vollkorn';
  src: url('/assets/fonts/vollkorn-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/assets/fonts/alegreya-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/assets/fonts/alegreya-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/assets/fonts/alegreya-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #edf1ee;
  --paper-warm: #f6f7f3;
  --ink: #1b2a25;
  --ink-soft: #3c4c45;
  --deep: #16332c;
  --teal: #4e8c86;
  --teal-dark: #35635e;
  --flame: #c9a227;
  --stone: #9aa69f;
  --rule: #d3dbd5;

  --display: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;

  --measure: 36rem;
  --wide: 74rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* The step inward: one notch, used everywhere it means something. */
  --step: clamp(1rem, 3vw, 2.75rem);

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.25rem;
  --s5: 3.5rem;
  --s6: 5.5rem;
  --s7: 8rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.06rem;
  line-height: 1.72;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* A still surface behind the whole page: the faintest rings, the way water
   settles after something has been set down in it. Fixed, so it does not move
   with the scroll, and far too light to compete with the text. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 118%,
      rgba(78, 140, 134, 0.055) 0 1px, rgba(78, 140, 134, 0) 1px 42px),
    radial-gradient(130% 70% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, var(--paper) 0%, #e6ece8 100%);
}
@media (max-width: 44rem) {
  body::before { background-size: auto, auto, auto; }
}

img { max-width: 100%; display: block; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--deep);
  color: var(--paper-warm);
  padding: var(--s2) var(--s3);
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s3);
  color: var(--ink);
  /* German compounds are wider than a phone; without this one word
     stretches the whole document. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.display {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: var(--s4);
  max-width: 21ch;
  text-wrap: balance;
  /* The cap above shapes multi-word titles. A single long compound like
     "Datenschutzerklärung" is allowed to run past it rather than be chopped in
     half — it still fits the page, and the box is not clipped. */
  overflow-wrap: normal;
}
@media (max-width: 44rem) {
  /* On a phone there is no room to run past anything. */
  .display { overflow-wrap: break-word; }
}

h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

p { margin: 0 0 var(--s3); max-width: var(--measure); }

.lead {
  font-size: clamp(1.16rem, 1.6vw, 1.42rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32rem;
}

/* The eyebrow names the section; the dot is the only ornament on the page. */
.eyebrow {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: 0.8em;
}
.eyebrow::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--flame);
  flex: none;
}

blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 28ch;
}
blockquote cite {
  display: block;
  margin-top: var(--s4);
  font-family: var(--body);
  font-size: 0.82rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  max-width: 34ch;
  line-height: 1.5;
}

/* ---------- Shell ---------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s6); }
.section--tight { padding-block: var(--s5); }
.section--deep {
  background: var(--deep);
  color: #dce6e0;
}
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep blockquote { color: var(--paper-warm); }
.section--deep .eyebrow { color: #8fbdb4; }
.section--deep a { color: #a8d3c9; }

/* Body copy steps in one notch from its heading — the same movement as the
   opening lines, applied to every section. */
.stepped { padding-left: var(--step); }

/* ---------- Header ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { width: 34px; height: auto; }
.brand__name {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
}
.brand__tag {
  display: block;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

.nav { margin-left: auto; }
.nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem 1.15rem;
  margin: 0;
  padding: 0;
}
.nav__list a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  display: block;
}
.nav__list a:hover { color: var(--ink); border-bottom-color: var(--flame); }
.nav__list a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--teal); }

.langs {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
}
.langs a { text-decoration: none; color: var(--stone); font-weight: 700; }
.langs a[aria-current='true'] { color: var(--ink); }
.langs span { color: var(--rule); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 62rem) {
  .nav-toggle { display: block; flex: none; }
  .nav {
    display: none;
    width: 100%;
    order: 3;
    margin-left: 0;
    padding-bottom: var(--s2);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; justify-content: flex-start; gap: 0; }
  .nav__list a { padding-block: 0.6rem; border-bottom: 1px solid var(--rule); }
  .masthead__inner { flex-wrap: wrap; }
}

/* On a phone the header becomes a grid: name, menu button and language switch
   each get a fixed place. Flex wrapping pushed the controls off screen. */
@media (max-width: 44rem) {
  .masthead__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.4rem;
  }
  .brand { min-width: 0; gap: 0.6rem; }
  .brand > span { min-width: 0; }
  .brand img { width: 28px; }
  .brand__name { font-size: 0.95rem; display: block; }
  .brand__tag { display: none; }
  .nav-toggle { margin-left: 0; padding: 0.4rem 0.85rem; font-size: 0.8rem; }
  .langs { font-size: 0.78rem; gap: 0.25rem; }
  .nav { grid-column: 1 / -1; order: 0; }
}

/* ---------- The lake: the header of her old site, edge to edge ---------- */

/* Every page opens with a band, so the header stands on it throughout the site,
   the way it did on her old home page. No measuring is involved: the header is
   taken out of the flow, and the words sit at the bottom of the band, so the
   space the header needs at the top costs nothing. */
.has-lake .masthead {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
}
.has-lake .brand,
.has-lake .brand__name { color: #f6f7f3; }
.has-lake .brand__tag { color: #bcd8cf; }
.has-lake .nav__list a { color: #dbe8e2; }
.has-lake .nav__list a:hover { color: #fff; }
.has-lake .nav__list a[aria-current='page'] { color: #fff; border-bottom-color: var(--flame); }
.has-lake .langs a { color: #a8c2b9; }
.has-lake .langs a[aria-current='true'] { color: #fff; }
.has-lake .langs span { color: rgba(255, 255, 255, 0.35); }
.has-lake .nav-toggle { color: #f6f7f3; border-color: rgba(255, 255, 255, 0.45); }
.has-lake .masthead__inner { text-shadow: 0 1px 12px rgba(8, 24, 20, 0.6); }

/* Open on a phone, the menu needs its own ground to stand on. */
.has-lake .nav.is-open {
  background: rgba(11, 30, 26, 0.94);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}
.has-lake .nav__list a { border-bottom-color: rgba(255, 255, 255, 0.16); }

.has-lake .lakehero { padding-top: 7rem; }

/* The photograph is positioned, not laid out, so the band's height is the one
   set here and not whatever the file's proportions happen to be. Every page
   uses this band; the home page's is simply taller. */
.lakehero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(17rem, 40vh, 24rem);
  overflow: hidden;
  background: var(--deep);
}
/* Tall enough that the mark can stand at full height with water around it. */
.lakehero--tall { min-height: clamp(26rem, 72vh, 44rem); }

/* A band inside a page, opening a section. Shorter than a page's own band, so
   it reads as a subdivision and not as a second beginning. */
.lakehero--section { min-height: clamp(12rem, 26vh, 17rem); margin-top: var(--s5); }
.lakehero--section .display--light {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 24ch;
}
.lakehero--section + .section--tight { padding-top: var(--s4); }

.lakehero__img,
.lakehero__veil { position: absolute; inset: 0; }

.lakehero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Type standing on the band. */
.display--light { color: var(--paper-warm); text-shadow: 0 1px 2px rgba(8, 24, 20, 0.45), 0 2px 26px rgba(8, 24, 20, 0.5); }
.lead--light { color: #d5e3dc; text-shadow: 0 1px 14px rgba(8, 24, 20, 0.6); }
.lakehero .display { margin-bottom: var(--s3); }
.lakehero .lead { margin-bottom: 0; }

/* The veil is what lets type sit on a bright photograph and still be read.
   It is green rather than black, so the water keeps its colour, and it is
   heaviest at the bottom left, exactly where the words are. */
.lakehero__veil {
  background:
    /* a strip at the very top, so the menu standing on the sky can be read */
    linear-gradient(to bottom,
      rgba(11, 30, 26, 0.62) 0%, rgba(11, 30, 26, 0.34) 9%,
      rgba(11, 30, 26, 0.08) 18%, rgba(11, 30, 26, 0) 28%),
    linear-gradient(to top,
      rgba(11, 30, 26, 0.88) 0%, rgba(11, 30, 26, 0.64) 34%,
      rgba(11, 30, 26, 0.16) 68%, rgba(11, 30, 26, 0) 100%),
    linear-gradient(to right,
      rgba(11, 30, 26, 0.62) 0%, rgba(11, 30, 26, 0.12) 68%, rgba(11, 30, 26, 0) 100%),
    /* an even wash underneath it all, so a busy photograph never wins */
    linear-gradient(rgba(11, 30, 26, 0.2), rgba(11, 30, 26, 0.2));
}

.lakehero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* Her mark stands in the open water, centred on the height of the band.
   The file was rebuilt to 420 x 668 with Real-ESRGAN, so at this size it is
   now close to its real resolution instead of three times past it. */
.lakehero__mark {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 7vw, 6rem);
  transform: translateY(-50%);
  height: clamp(9.6rem, 25.6vw, 27.2rem);
  width: auto;
  /* No recolouring: the gaps between the labyrinth lines are white, not
     transparent, so forcing the mark to one colour turns it into a blob. */
  filter: drop-shadow(0 4px 28px rgba(8, 24, 20, 0.5));
  pointer-events: none;
}
@media (max-width: 54rem) {
  .lakehero__mark { display: none; }
}

.eyebrow--light { color: #bcd8cf; }
.eyebrow--light::before { background: var(--flame); }

.hero__lines--light {
  color: #fbfbf7;
  margin-bottom: 0;
  text-shadow: 0 1px 2px rgba(8, 24, 20, 0.5), 0 2px 30px rgba(8, 24, 20, 0.55);
}

/* ---------- Hero: her words, stepping inward ---------- */

.hero { padding-block: clamp(3.5rem, 10vw, var(--s7)) var(--s6); }

.hero__lines {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero__lines li { padding-left: 0; }
.hero__lines li:nth-child(2) { padding-left: calc(var(--step) * 1); }
.hero__lines li:nth-child(3) { padding-left: calc(var(--step) * 2); }
.hero__lines li:nth-child(4) { padding-left: calc(var(--step) * 3); }
.hero__lines li:nth-child(n + 5) { padding-left: calc(var(--step) * 4); }

.hero__lead {
  border-top: 1px solid var(--ink);
  padding-top: var(--s3);
  max-width: 30rem;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero__lines li {
    opacity: 0;
    transform: translateX(-0.4em);
    animation: stepIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .js .hero__lines li:nth-child(2) { animation-delay: 0.12s; }
  .js .hero__lines li:nth-child(3) { animation-delay: 0.24s; }
  .js .hero__lines li:nth-child(4) { animation-delay: 0.36s; }
  @keyframes stepIn { to { opacity: 1; transform: none; } }
}

/* ---------- Plates: a photograph at its own size, with its label ---------- */

/* The page's Content-Security-Policy forbids inline styles, so a plate can carry
   no per-image width attribute. It does not need one: the image is drawn at its
   own intrinsic size and the figure shrinks to fit, which enforces "never
   enlarged" by construction instead of by arithmetic. */
.plate { margin: 0; width: fit-content; max-width: 100%; }
.plate img { width: auto; max-width: 100%; height: auto; }

/* A band is the exception: a file large enough to fill the content column,
   scaled down to it, never up. */
/* Wide, but not so wide it pushes the actual content of the page below the
   fold — and a smaller box also means a bigger downscale, so a sharper image. */
.plate--band { width: 100%; max-width: 58rem; }
.plate--band img { width: 100%; }

/* The one way to show a small file bigger than it is: fill the column. Chosen
   in the admin as "breit", never automatic, because it costs sharpness. */
.plate--wide { width: 100%; }
.plate--wide img { width: 100%; }
.plate figcaption {
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--stone);
}
.section--deep .plate figcaption { color: #8fa79d; border-top-color: rgba(255, 255, 255, 0.18); }

/* Bands are never cropped: these are documents of a practice, the mandalas are
   shot from above, and the edges of the frame are part of the subject. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 54rem) {
  .split { grid-template-columns: 1fr; gap: var(--s4); }
  .split--reverse > *:first-child { order: 0; }
  .split .plate { max-width: 26rem; }
}

/* ---------- Offerings: a set list, not picture tiles ---------- */

.offers { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.offer { border-bottom: 1px solid var(--rule); }
/* The square picture on the left, the way the old site set them out, except
   that there it sat underneath. */
.offer a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s3) clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  padding: var(--s3) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.25s ease;
}
.offer a:hover { padding-left: var(--step); }
/* Both sides stated outright: an aspect-ratio alone left the picture free to
   take the height of the grid row, which stretched it into a strip. */
.offer__thumb {
  width: clamp(4.5rem, 8vw, 6.5rem);
  height: clamp(4.5rem, 8vw, 6.5rem);
  object-fit: cover;
  align-self: start;
}
.offer__thumb--empty { background: var(--rule); display: block; }
.offer h3 { margin: 0 0 0.35rem; }
.offer a:hover h3 { color: var(--teal-dark); }
.offer p {
  margin: 0;
  font-size: 0.99rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.offer__go {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
}
.offer a:hover .offer__go { color: var(--teal-dark); }
@media (max-width: 40rem) {
  .offer a { grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1rem; }
  .offer a:hover { padding-left: 0; }
  .offer__go { grid-column: 2; }
}

/* A quote with a picture beside it. */
.quote-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 54rem) {
  .quote-split { grid-template-columns: 1fr; gap: var(--s4); }
  .quote-split .plate { max-width: 16rem; }
}

/* ---------- Gallery: an even sheet of plates ----------
   Here, and only here, the pictures are cropped to one height. A grid of
   ragged shapes reads as an accident; the uncropped photograph is still on
   the page it belongs to. */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  align-items: start;
}
.gallery .plate { width: 100%; }
.gallery .plate img {
  width: 100%;
  height: clamp(10.5rem, 17vw, 14rem);
  object-fit: cover;
  object-position: center;
}
.gallery .plate figcaption {
  /* two lines of caption everywhere, so the rows keep their rhythm */
  min-height: 2.9em;
}

/* ---------- Details table ---------- */

.info { border-top: 1px solid var(--ink); max-width: var(--measure); margin-top: var(--s4); }

/* The photograph on the left, the facts on the right. */
.info-split {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: var(--s4);
}
.info-split .info { margin-top: 0; max-width: none; }
@media (max-width: 54rem) {
  .info-split { grid-template-columns: 1fr; gap: var(--s4); }
  .info-split .plate { max-width: 22rem; }
}
.info__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--s2);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.info__key {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-dark);
  padding-top: 0.3rem;
}
.info__val { margin: 0; }
@media (max-width: 40rem) {
  .info__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- Dates ---------- */

/* ---------- Dates ----------
   Three columns, not five: when, what, and where. The topic is what people
   scan for, so it is the one thing set in the reading face. */

.termine {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s4);
  table-layout: fixed;
}
.termine thead th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-dark);
  font-weight: 700;
  padding: 0 var(--s3) 0.7rem 0;
  border-bottom: 1px solid var(--ink);
}
.termine thead th:nth-child(1) { width: 22%; }
.termine thead th:nth-child(2) { width: 46%; }
.termine thead th:nth-child(3) { width: 32%; }

/* The year only appears when it changes. */
.termine__year th {
  text-align: left;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0;
  text-transform: none;
  padding: var(--s4) 0 0.5rem;
  border-bottom: 0;
}
.termine tbody tr:first-child .termine__year th,
.termine__year:first-child th { padding-top: var(--s3); }

.termine td {
  padding: 0.95rem var(--s3) 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.termine tr:hover td { background: rgba(78, 140, 134, 0.045); }

.termine__when { white-space: nowrap; }
.termine__date {
  display: block;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.termine__day {
  display: block;
  font-size: 0.84rem;
  color: var(--stone);
  margin-top: 0.1rem;
}

.termine__what {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink);
}

.termine__where { font-size: 0.92rem; color: var(--ink-soft); }
.termine__place { display: block; }
.termine__time {
  display: block;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

.termine--past .termine__what { color: var(--ink-soft); }
.termine--past .termine__date { font-weight: 400; color: var(--ink-soft); }

@media (max-width: 46rem) {
  .termine, .termine tbody, .termine tr, .termine td { display: block; width: 100%; }
  .termine thead { display: none; }
  .termine tr { border-bottom: 1px solid var(--rule); padding-block: var(--s3); }
  .termine tr:hover td { background: none; }
  .termine td { border: 0; padding: 0; }
  .termine__when { display: flex; gap: 0.6rem; align-items: baseline; }
  .termine__date, .termine__day { display: inline; }
  .termine__what { display: block; margin-top: 0.35rem; }
  .termine__where { margin-top: 0.4rem; }
  .termine__place, .termine__time { display: inline; }
  .termine__time::before { content: ' · '; color: var(--rule); }
  .termine__year { padding-block: 0; }
  .termine__year th { display: block; padding: var(--s4) 0 0.25rem; }
}

.termine__past-title { margin-top: var(--s6); }
.termine--past { color: var(--ink-soft); }
.termine--past td:first-child { font-weight: 400; }

.empty {
  border-left: 2px solid var(--flame);
  padding: var(--s2) 0 var(--s2) var(--s3);
  max-width: var(--measure);
  color: var(--ink-soft);
  margin-top: var(--s4);
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--deep);
  color: var(--paper-warm);
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.download:hover { background: var(--teal-dark); color: #fff; }
.download::after { content: '\2193'; font-size: 1.05em; }

.downloads { margin-top: var(--s4); max-width: none; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: 0.4rem; }

.prose { max-width: var(--measure); }
.prose > *:last-child { margin-bottom: 0; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.15rem; margin: 0 0 var(--s3); }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--flame); }

/* ---------- Footer ---------- */

.footer {
  background: var(--deep);
  color: #b9cbc3;
  padding-block: var(--s5);
  font-size: 0.95rem;
}
.footer a { color: #cfe0d8; }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s4);
}
.footer h2 {
  font-family: var(--body);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7ea79c;
  margin-bottom: var(--s2);
  font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.3rem; }
.footer__base {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  color: #7ea79c;
  font-size: 0.86rem;
}

/* ---------- Scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}