/* ==========================================================================
   WIDER'S Cuisine – Stylesheet
   Aufbau: 1 Schriften · 2 Tokens · 3 Basis · 4 Layout · 5 Typografie
           6 Komponenten · 7 Abschnitte Startseite · 8 Unterseiten
           9 Bewegung · 10 Sonderfälle (Druck, Kontrastmodus, kurze Fenster)
   ========================================================================== */

/* 1 Schriften ------------------------------------------------------------ */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Ersatzschriften mit angeglichenen Metriken: kein Springen beim Nachladen.
   Je ein Satz für Desktop/iOS (Times, Arial) und Android (Noto Serif, Roboto). */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 110.56%;
  ascent-override: 97.86%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Times Italic");
  size-adjust: 103.83%;
  ascent-override: 104.21%;
  descent-override: 24.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Fallback Android";
  src: local("Noto Serif");
  size-adjust: 93.88%;
  ascent-override: 115.25%;
  descent-override: 26.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Fallback Android";
  font-style: italic;
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  size-adjust: 90.84%;
  ascent-override: 119.11%;
  descent-override: 27.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Urbanist Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99.87%;
  ascent-override: 95.12%;
  descent-override: 25.03%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Urbanist Fallback Android";
  src: local("Roboto");
  size-adjust: 99.64%;
  ascent-override: 95.34%;
  descent-override: 25.09%;
  line-gap-override: 0%;
}

/* 2 Tokens --------------------------------------------------------------- */
:root {
  /* Marke */
  --forest: #314528;
  --forest-deep: #1c2917;
  --champagne: #ddcdab;
  --sand: #d2c39b;
  --bone: #f6f3ec;
  --white: #fff;
  --moss: #55634c;

  /* Rollen (helle Flächen) */
  --surface: var(--white);
  --ink: var(--forest);
  --text: var(--moss);
  --rule: rgb(49 69 40 / 0.16);
  --rule-strong: rgb(49 69 40 / 0.6);
  --focus: var(--forest);

  /* Schrift */
  --font-display: "Playfair Display", "Playfair Fallback", "Playfair Fallback Android", Georgia, "Times New Roman", serif;
  --font-text: "Urbanist", "Urbanist Fallback", "Urbanist Fallback Android", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-statement: clamp(2.125rem, 1rem + 5.2vw, 5rem);
  --fs-h1: clamp(2.5rem, 1.2rem + 6.2vw, 6rem);
  --fs-h2: clamp(2rem, 1.35rem + 3vw, 3.75rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1.15vw, 2.125rem);
  --fs-lede: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.875rem;

  /* Abstände (8er-Raster) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --gutter: clamp(1.25rem, 4.2vw, 3.5rem);
  --gap: clamp(1.5rem, 3vw, 3rem);
  --section: clamp(4.5rem, 2.6rem + 8vw, 10rem);
  --wrap: 82.5rem;
  --measure: 34rem;
  --header-h: 4.5rem;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;
  --t-reveal: 1100ms;

  /* Ebenen */
  --z-bar: 40;
  --z-menu: 49;
  --z-header: 50;
  --z-skip: 100;

  --radius: 2px;
}
/* Grosse Bildschirme: alles wächst gemeinsam mit, statt in der Mitte zu schrumpfen */
@media (min-width: 120em) {
  html {
    font-size: 112.5%;
  }
}
@media (min-width: 160em) {
  html {
    font-size: 125%;
  }
}

/* 3 Basis ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
::selection {
  background: var(--champagne);
  color: var(--forest-deep);
}
[hidden] {
  display: none !important;
}
/* Sprungziele bekommen den Fokus, aber keinen Rahmen um den ganzen Abschnitt */
[tabindex="-1"]:focus {
  outline: 0;
}
.nowrap {
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--forest);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible {
  transform: none;
  outline: 0;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--forest);
}

/* 4 Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), var(--wrap));
  margin-inline: auto;
}
.section {
  padding-block: var(--section);
}
.section--bone {
  --surface: var(--bone);
  background: var(--bone);
}
.section--forest {
  --surface: var(--forest);
  --ink: var(--white);
  --text: var(--champagne);
  --rule: rgb(221 205 171 / 0.26);
  --rule-strong: rgb(221 205 171 / 0.6);
  --focus: var(--champagne);
  background: var(--forest);
  color: var(--text);
}

/* 5 Typografie ----------------------------------------------------------- */
.h1,
.h2,
.h3,
.statement,
.voice {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
}
/* Kursiv ist die zweite Stimme: Zitat, Claim, Wortmarke */
.voice {
  font-style: italic;
  letter-spacing: 0;
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: var(--measure);
}
.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 1.25em;
}
.prose a:not(.btn) {
  color: var(--ink);
}

/* 6 Komponenten ---------------------------------------------------------- */

/* Buttons */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--forest-deep);
  --btn-fg-hover: var(--white);
  --btn-border: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.75rem;
  overflow: hidden;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg-hover);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:active {
  transform: translateY(1px);
}
@media (hover: hover) {
  .btn:hover {
    color: var(--btn-fg-hover);
  }
  .btn:hover::before {
    transform: scaleY(1);
  }
}
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bg-hover: var(--ink);
  --btn-fg-hover: var(--surface);
  --btn-border: var(--rule-strong);
}
.btn--light {
  --btn-bg: var(--champagne);
  --btn-fg: var(--forest-deep);
  --btn-bg-hover: var(--white);
  --btn-fg-hover: var(--forest-deep);
}
.btn svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

/* Textlink: Linie wird beim Überfahren kräftiger */
.link {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.5rem) / 100% 1px no-repeat;
}
@media (hover: hover) {
  .link:hover {
    background-size: 100% 2px;
  }
}

/* Bildmarke als Maske: eine Quelle, jede Farbe. Die Form ist eingebettet (kein
   zusätzlicher Abruf, funktioniert auch bei lokal geöffneter Datei). Quelle: assets/img/mark.svg */
.mark {
  --mark-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1092 1092%27%3E%3Cpath d=%27M529 4q11 20 16 42l1 3h2l1-4q3-18 11-33l3-7 2-2c64 2 122 34 167 78l7 8 3 3q19 23 33 50l3 4h14a236 236 0 0 1 154 49l14 10v2l4 2q19 17 34 36l3 4 6 9c-2 10-12 19-18 27h-2l-2 4-5 5h-2v3l7-1c29-6 29-6 39-6 25 25 27 79 27 112q0 78-42 143 2 7 7 13a177 177 0 0 1 17 37c15 36 18 72 18 110v5c-1 27-8 59-21 83l-2 5-3 4h-9l-5-1-12-2-5-1-18-4q6 10 14 17l16 21q-2 11-11 19l-4 5-15 16-3 4-23 19-6 4q-13 10-28 17l-3 2c-35 25-88 30-129 28-6 1-6 1-10 5l-2 5-2 4-3 4q-12 21-28 39l-1 2h-2l-2 4-14 14-5 4q-27 24-59 39l-5 2c-26 13-58 23-87 21q-5-5-7-14l-2-6c-7-16-7-16-7-24l-3 1-3 8q-5 18-14 35-24 1-48-7l-4-1q-26-7-50-20l-4-2a281 281 0 0 1-55-40l-11-13-5-5-21-28-3-5-9-15q-3-6-6-6h-13q-34 1-69-9l-8-2q-49-14-87-47l-5-4q-21-17-37-39l-3-4v-2h-2c-3-5-3-5-2-10q9-14 21-26l2-3h2l1-3h2l-2-3-5 1q-20 7-40 6c-11-13-15-33-19-49l-2-7-3-18-1-5q-4-44 4-86l1-5c6-26 16-64 35-83q-1-9-7-17l-3-6-3-5q-20-37-26-81l-1-5q-5-52 8-102l1-4q5-21 16-39c16-2 34 5 49 8q-3-7-10-12l-12-15-7-7-2-4q3-8 8-14l10-12 7-8 5-5 14-13 4-3q11-10 24-18l4-3q43-26 94-35l7-1q21-2 43-2h10l4-9q23-40 57-71h2l1-3q25-21 55-36l7-3 20-8 6-2c18-6 43-14 62-10M383 83l-3 3-5 4-4 5-5 5c-31 36-31 36-31 48l20 4 22 6h4l5-7c8-13 22-34 37-41v-2l4-2 7-5c38-25 38-25 51-25q4 12 4 25v5q3 54-24 101l-2 5q-21 36-55 59l-5 4-20 11-10 5c0 14 7 30 13 43 20-3 39-18 55-29v-2l4-2 11-9 6-5v-2l3-1v-2l3-1v-2l3-1 9-11 3-4c7-9 7-9 7-11h2l16-26 2-4c29-53 33-116 18-174-7-22-7-22-10-27-48 0-102 29-135 62m192-62q-9 17-13 37l-1 4c-11 43-6 86 7 128l1 4q8 25 22 46l3 1c13-13 13-13 16-19h2l5-5 4-4 4-4-5-15q-7-16-12-33l-1-4-1-5-1-4c-4-21-6-52 2-72q39 11 68 39l3 3q30 27 46 64l2 5q18 42 12 89l1 6q8 4 16 5l13 3 13 1c8-8 5-24 5-36q0-18-3-34l-2-10q0-6-3-13l-2-8q-10-34-30-64l-3-4q-8-13-20-25l-6-6q-12-14-28-25l-4-3-24-15-4-2c-24-13-54-25-82-25m-131 93-6 5c-15 11-35 27-41 46q6 5 11 7 18 7 34 19l8 5c9-5 12-19 15-28l2-4q10-31 7-63l-1-2c-10 0-21 9-29 15m175-14v21q0 36 16 68l2 4 2 3c7 0 13-6 18-10l30-16 7-3c1-4 1-4-1-8l-19-22-3-4q-20-21-48-34zm-429 88-7 3q-25 14-46 33l-4 4c-17 14-17 14-19 21l-3 1-5 7c3 13 21 28 31 36l4 3q11 11 24 18l5 4 22 11 4 2q52 24 109 22l1-5-2-2-2-7-1-4-6-21-1-5q-6-4-13-3l-29-5-5-1q-29-8-53-23l-4-3-12-8-5-3-3-3c3-10 17-17 26-22l3-2c26-17 58-24 88-27l9-1 13 1 14 1 13 3 10 2q33 9 60 28c4 2 4 2 9 1q15-12 26-29v-5l-3-1v-2q-44-30-95-40l-5-1-17-2-14-2c-39-1-83 6-117 26m595-25 5 14 3 12c5 18 5 18 7 20l10 1c40 3 84 19 113 48l1 3-4 2-8 6c-40 30-91 43-141 38l-19-4-4-1q-25-6-49-20l-4-2-9-6-5-4c-5 1-5 1-10 6l-5 5-17 20c1 5 1 5 6 9l7 4 4 3q33 21 71 30l2 1h4l9 3 9 1 11 2h29q23 1 45-5l4-1c44-9 84-33 116-64l5-5c13-13 13-13 13-17h2l1-3-7-10h-2l-2-4q-13-16-30-29l-3-3-24-16-7-4c-28-16-95-46-127-30m-240 15-3 6q-5 22-16 41l-3 7-13 22c0 8 3 10 7 16q12 20 20 42l3 6 3 11 1 3 4 1 2-5q10-33 29-64l3-5q-1-7-6-12l-11-22-4-8q-7-15-11-32l-2-6zm146 8-11 5q-18 10-34 23l-6 4-4 4v2l-4 2-15 15-5 6q-30 35-45 78l-3 9-2 8-2 7q-5 28-5 55v7c0 17 0 17 2 24q9 2 18-1l8-2 17-4q3-7 1-15-2-38 11-73l1-4q11-30 30-54l3-6h2c6-6 6-6 6-9l4-2 4-4q14-13 29-22l5-3 9-5 5-2 5-2 3-3q-1-23-14-44-7 2-13 6m-494 71q1 5 4 6l4 2 5 3 4 2 6 3c21 10 46 19 69 17l2-2-1-11q-1-21 1-43v-8c-23-11-77 16-94 31m113-32c-13 20-3 62 1 84a158 158 0 0 0 11 37l10 22 3 7q14 24 33 45l4 4q22 25 49 40l5 3q14 9 29 14 5-5 7-12l2-4 3-11 1-1 3-14-11-7q-38-17-64-51h-2l-2-4-5-7-2-4-6-8c-22-34-30-77-25-117q1-4-2-7l-18-5-2-1-12-2zm492 0-1 1 1 11v27l-1 20v6c13 7 38-2 51-7 15-5 33-12 45-24q-25-20-56-28l-5-2q-17-3-34-4m-432 17-1 8v23q16-3 28-14l1-3-9-5-4-3c-10-6-10-6-15-6m324 14c1 5 1 5 5 8l5 3 5 3c9 4 9 4 14 3v-19l-1-12c-9 0-21 9-28 14m-197 18-8 9-9 9v2l-3 1v2l-4 2-6 7q1 7 5 12c18 37 23 82 16 122l-2 5-1 4q-4 22-14 41l-3 6 6 7 3 3 4 4 12 13c4 5 4 5 8 6l8-12 2-4 2-4 3-6q11-24 16-50l1-4 3-16 1-5v-30q0-31-8-59l-1-4q-9-33-28-61zM77 309c-21 35-24 85-18 124l1 7q6 41 26 77l3 5 4 7q9-2 13-11l18-17 3-4-6-15-2-5-5-11q-10-31-9-64v-5c0-23 0-23 3-33 35 5 70 36 91 63l6 8 4 5 4 7 2 4 8 14 2 5 10 32 2 9q3 13 2 26v29l1 4 8 3 4 1c21 5 21 5 32 5 9-17 3-49 1-67l-2-6-1-6-4-17-1-5q-17-54-56-97h-2l-2-4-21-19-4-3q-10-8-22-15l-6-3q-11-7-23-12l-4-2c-18-8-41-16-60-14m860 23-7 3c-16 9-43 23-51 40l-3 1v2l-3 1v2l-3 1v2l-3 1c-33 38-33 38-33 50l5 1 13 4 11 2 9 3h8l8-11 12-15v-2l3-1 3-3c20-23 49-41 78-50q4 20 3 39v5q-1 69-46 123l-2 4-3 1v2l-3 1-4 5-2 1v2l-4 2-5 4q-15 13-33 22l-5 2-4 2-3 2c0 14 6 31 13 43 24 0 53-28 70-43l7-6q22-21 37-47l2-4q22-35 29-77l1-3c6-44 1-83-12-125l-1-5-3-4c-26-3-57 12-79 23m-495-9q-21 15-46 26c1 9 5 12 10 19l4 5q10 12 23 23h2l1 3q17 13 35 21l3-1c4-18 1-41-4-59l-1-5c-9-27-9-27-16-37q-6 1-11 5m197-4q-5 6-7 13l-2 4q-13 32-12 66v17q3 2 7-1 43-22 70-62l1-5-25-13q-16-8-29-19zm74 40q-5 6-8 13h-2c-5 6-5 6-5 9h-2l-3 6h-2c-7 7-7 7-8 11l-4 2-4 3v2l-4 2-5 4-9 6v2l-5 2-5 3q-42 27-90 28c-5 1-5 1-8 4l-2 10-7 21-3 12q6 3 13 1l10-1 14-1 11-2h5l9-3 4-1q33-7 63-25l4-2q53-32 85-87l3-5v-4l-14-4-22-5zm-488 1q4 8 11 13l6 7 3 4 4 6h2l2 5 4 5q10 13 16 27c4 6 4 6 8 7h30q21 0 40 5c8 2 8 2 12 1v-2l-5-5q-27-28-43-63-4-2-10-1-39-1-76-9zm631 3q-26 7-54 7h-13l-11 1-10 16q-9 16-21 31v2l-3 1-7 9-4 5-4 4 1 2 4-1 14-2 4-1 33-3c21 1 21 1 30-1 8-7 10-15 14-24l5-8 3-4 10-13 8-9 9-10-1-3zm-734 24c-9 18 0 52 6 70 8 23 8 23 15 28l6-5q21-14 41-23 5-1 6-6c-14-26-40-46-65-61l-5-3zm798 34-6 5c-17 19-17 19-17 28l15 8 20 11 5 3 8 6c3 2 3 2 8 1q5-10 9-21l2-5 5-19 1-6q3-14 2-29v-7l-1-9c-18 0-39 22-51 34m-632 29-2 3 3 10 7 25c1 5 1 5 4 8l14 1q55 6 100 38l5 3 5 5 4 3a180 180 0 0 1 30 34l4 7 1 1c8 0 8 0 12-2l9-2 6-2 13-2 5-1 1-2q-15-31-40-55l-3-3-19-17-4-3-9-7-6-4q-48-30-103-37l-4-1h-33m403 23-7 3c-33 18-33 18-36 26l3 5h2l2 5 9 10 4 5 7 7c7 0 8-2 13-6l16-9 4-2c30-16 76-28 109-19h6l23 5 5 1q16 4 31 13l5 3 17 10 5 2v2c11-2 19-14 26-23l4-5 2-3c-2-9-15-15-23-20q-17-11-36-17l-7-3c-59-22-128-17-184 10m-516 9q-18 12-34 26l-5 5q-50 47-70 111l-2 5c-12 46-9 95 6 139l1 4 5 11q12 1 23-2l4-1q13-2 25-8l6-2 22-10 5-2 19-12 3-2 21-16v-2l4-2 18-18 5-6q10-12 18-25l3-4c6-10 6-10 6-14l-21-5-18-5-5-1c-4 3-4 3-7 8l-16 21v2h-2l-3 3q-30 32-72 48h-6q-4-18-3-38v-5q-1-33 12-64l2-6q18-44 54-74l3-3q19-14 39-23l4-3c1-14-6-30-13-42-10-2-23 8-31 12m432 27-12 2-2 1-10 1c0 20 31 48 44 61l16 15 3 3c44 36 101 52 157 51l3-2-5-16-3-13-2-3-1-5q-1-6-3-7l-13-1q-19-2-37-7l-5-1-14-6-5-2q-17-6-32-17h-2v-2l-5-3-17-14-4-3q-16-17-29-37-11 0-22 5m-305 4v51l-1 10v4l8 1q35 0 65-16l4-2c15-8 15-8 21-13-1-5-1-5-5-8-28-16-59-28-92-27m391 32q0 4 5 7l23 12q33 17 69 15v-10q-2-25 1-51v-4l-8-1c-31 0-66 12-90 32m116-32c-11 16-4 52-1 71l2 8 1 8 4 12 1 4q8 33 28 61l2 3 16 22h2l2 4 10 10 5 6 7 4 1 3 22 16 8 6c25 18 65 33 96 33l7-16 2-6 4-15 2-7c8-34 8-73-2-107l-2-6q-8-35-28-64-7 4-12 11l-6 7-3 3-8 7-3 3q0 9 5 16 16 38 16 80v4c0 26 0 26-4 35q-33-11-60-33l-3-3q-15-11-26-27h-2l-2-4-5-7-11-18-3-5-4-11-2-4c-11-22-12-48-12-73v-15q1-4-2-7l-18-5-2-1-13-2-5-1zm-286 8-8 18-3 4-1 5 7 10 7 13 4 6h17l5 1 12-1 9-15 8-13q-1-9-7-17l-8-15c-4-4-18-2-23-3q-12 0-19 7m-327 23-1 4c22 14 22 14 27 14q2-7 1-16v-8l-1-8c-9 0-19 9-26 14m674-14q-2 8-2 16v5l2 11q10-1 16-7l6-3q5-3 5-6-5-6-13-10l-4-2c-7-4-7-4-10-4m-696 32-7 8-4 5c-7 7-7 7-7 10h-2l-3 5c3 11 23 19 32 25a213 213 0 0 0 40 16l13 4 14 4 12 1 3 1q21 3 41 2h4a245 245 0 0 0 116-37l4-3 4-3 10-7q-1-6-6-11l-7-9h-2l-2-4-7-8h-3l-1-3q-8 2-13 8l-20 10-5 3q-21 9-43 14l-7 1q-15 3-31 2h-7q-25 0-47-7l-4-1q-31-10-57-30c-3 0-3 0-8 4m417 1q-14 19-21 42l-2 5-6 21-4 14v5l-3 13v32a141 141 0 0 0 6 50q7 35 26 66l5 8q8-2 12-10v-2h2v-2l3-1 7-8 5-4 4-5c-1-6-1-6-4-11q-27-60-17-125l2-5 1-4q0-4 2-7l2-7q4-12 9-22c3-7 3-7 2-12l-5-6h-2l-1-3h-2l-1-3h-2l-1-3h-2l-1-3h-2l-2-4-7-9zm-135 48-5 2c-39 15-75 45-99 79l-4 6c-14 19-14 19-14 25q13 4 25 6l8 3 13 2 7-10q8-13 18-23v-2l3-1v-2l3-1v-2l3-1v-2l4-2 5-4q20-16 42-26l8-4c18-10 43-14 63-14l6-1q4-9 5-18l8-24v-3c-30-7-72 5-99 17m-315-3c-13 18-17 42-20 63l-1 4v23l1 7c7 0 8-1 14-5l6-4q34-20 55-54v-3l-8-4-5-3-4-2-20-11-4-2-8-6q-3-4-6-3m808 0-9 6q-17 14-38 21l-6 5c11 27 40 48 64 62l5 3h6c2-2 1-11 1-13q1-39-15-74l-2-5q-1-3-6-5m-313 4q-6 11-10 24l-2 4-2 14 10 7q28 13 50 35l5 5c13 14 27 31 34 49l2 3q17 37 16 78v5l-1 9 1 12q21 9 44 9 5-16 3-33v-4l-2-28-1-7-7-30-1-5-6-13-2-5q-9-25-25-46l-3-5q-10-14-24-27l-2-3h-2l-1-3-11-9-4-3-3-3-4-3-7-3v-2l-14-8-7-4c-18-10-18-10-24-10m-283 41-27 4-4 1-37 1-9 1-6 11q-16 31-42 56v2h-2v2l18-4q31-5 63-5c6 0 6 0 10-4l4-7 10-17 4-6q9-14 21-26l7-10c-4-1-4-1-10 1m377-2q2 7 8 12c30 36 30 36 37 56q3 5 7 5h29q24 1 46 7l10 2q-1-6-7-10-26-26-43-60-2-3-5-4h-12q-32 0-64-7zm-213 8h-4q-12 2-23 7v24q0 48-22 91l-2 5q-9 16-22 31v2l-3 1v2l-3 1-3 3q-24 27-58 40l-3 2c-1 15 7 30 13 43q21-4 39-18l4-3 23-17v-2l4-2 7-7 4-3c19-18 37-43 47-67l2-4q22-48 20-100v-7c0-16 0-16-2-24q-9 0-18 2m-64 23q-18 12-34 28l-5 5-15 19-3 4 1 4 10 5q22 11 43 26l5-1 7-15 3-7q12-37 9-76c-8-2-14 4-21 8m166-9c-3 3-1 18-1 23q0 41 20 77l5 1 11-8 24-14 7-4 11-5c0-13-17-27-26-36q-12-12-25-21l-6-4c-15-9-15-9-20-9m-411 82-5 2q-37 15-66 41l-8 7v2l-3 1v2l-3 1v2l-3 1c-9 10-9 10-10 14h-2c-2 3-2 3-1 9l9 10 3 4q24 27 55 45l5 3q19 11 40 18l5 2a171 171 0 0 0 52 11h29l1-1c0-6 0-6-2-9l-4-14-2-4-3-13-1-4-15-3q-30-2-58-15l-4-2q-27-10-48-30c2-9 17-16 25-21q72-42 154-23 18 6 34 14l10 5 13 8c6 4 6 4 11 4l1-3 3-1v-2l4-2 19-23q-5-9-14-13l-5-4q-23-14-50-23l-4-1-5-2-5-2q-17-4-34-6l-5-1c-37-4-79 0-113 16m580-15q-1 9 3 16l6 24 3 6 9 1a229 229 0 0 1 58 13q31 12 55 34c-4 13-32 24-43 30l-16 7-5 2c-22 7-51 15-74 10h-7q-50-3-92-34l-4-2c-11 4-19 15-25 25l-5 5v5l15 12q23 15 49 22l3 2 8 2 6 2 23 5 7 1q46 7 92-5l5-1 22-8 8-3q21-9 40-22l4-3 21-16v-2l4-2 10-10 5-5 12-14c-1-8-2-9-7-14l-4-4-16-16-5-5q-13-11-27-20l-4-3q-62-37-134-35m-242 19q-5 8-7 18l-4 9-3 6-3 7-2 5q-5 11-12 22c-4 6-4 6-5 11l6 10a237 237 0 0 1 30 68h2l1-4q7-24 18-46l2-4 10-18c3-5 3-5 2-11l-6-9-10-19-3-6q-8-19-14-39zm96 36v2l-4 2-7 7-4 3-13 15-5 5q-33 43-47 95l-2 7c-11 46-4 93 12 137l2 3c20 2 42-6 60-14l5-2 21-10 6-3q26-15 47-36l3-3c16-15 35-36 42-57q-11-4-22-6l-16-5h-9l-7 11q-28 37-69 59l-4 3q-12 6-25 8c-12-43 1-94 21-132l12-18 4-6 8-9v-2h2l3-3c10-12 10-12 16-15v-2l4-2 15-10q11-7 21-11c4-2 4-2 8-7l-4-15-1-4c-5-16-5-16-8-21-22 0-48 22-65 36m-446 37q3 8 11 11l14 7 4 2q31 14 65 15l1-1v-60l-1-5c-34-1-66 13-94 31m114-30c-6 6-4 19-4 27v8q0 18 3 34l1 5q4 24 13 45l2 6q8 18 18 35l3 4q13 19 28 35l3 3a272 272 0 0 0 41 33c25 17 69 39 100 34l5-12 1-5c19-62 17-128-14-186l-9-16c-9 2-13 10-18 16l-10 9-6 8 6 15 12 36 2 7q2 18 1 35v8q1 14-2 27v4q-11-3-23-9l-7-3q-20-11-37-26l-4-4q-43-39-57-94l-2-6q-4-32-3-64-21-8-43-9m493 1-2 2 1 11v22l-1 22v6l1 1q43-1 80-23l5-3 8-5q0-4-6-7-39-25-86-26m-433 14q-2 8-1 18v16l2 1q14-6 27-16c-2-7-7-8-13-12zm350 2c-23 12-23 12-25 17q6 5 13 9l6 3c5 3 5 3 9 2v-30zm-281 85q-18 12-38 21l-4 2q6 16 20 28l3 3q21 22 48 35h5c9-17-2-51-7-68q-5-15-12-28-9 1-15 7m200-7-6 12-3 7q-14 36-11 76l1 1q7 0 13-5l6-4c21-13 47-32 56-56l-10-6q-20-9-39-23-3-2-7-2%27/%3E%3C/svg%3E");
  display: block;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--mark-shape) center / contain no-repeat;
  mask: var(--mark-shape) center / contain no-repeat;
}

/* Kopfzeile */
.site-header {
  --hd-fg: var(--forest);
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--hd-fg);
  background: rgb(255 255 255 / 0.92);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.is-bone .site-header {
  background: rgb(246 243 236 / 0.92);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin-right: auto;
  text-decoration: none;
}
.brand .mark {
  width: 2.375rem;
  color: var(--forest);
  transition: color var(--t-base) var(--ease-out);
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1;
  white-space: nowrap;
}
.brand__name em {
  font-style: italic;
}
.site-nav {
  display: none;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease-out);
}
.site-nav a[aria-current]::after {
  transform: scaleX(1);
}
@media (hover: hover) {
  .site-nav a:hover::after {
    transform: scaleX(1);
  }
}
.site-header__cta {
  display: none;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  font-size: var(--fs-small);
}
/* Menüknopf: nur mit JavaScript sichtbar (ohne steht das Menü offen im Seitenfluss) */
.menu-toggle {
  display: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: -0.625rem;
}
.js .menu-toggle {
  display: inline-grid;
}
.menu-toggle__bars {
  position: relative;
  width: 1.625rem;
  height: 0.875rem;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.75px);
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease-out);
}
.menu-toggle__bars::before {
  transform: translateY(-0.375rem);
}
.menu-toggle__bars::after {
  transform: translateY(0.375rem);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  transform: rotate(-45deg);
}
/* Über dem Hero-Foto: transparent, helle Schrift (nur mit JavaScript) */
.js .site-header.is-top:not(.is-open) {
  --hd-fg: var(--white);
  --focus: var(--white);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.js .site-header.is-top:not(.is-open) .brand .mark {
  color: var(--sand);
}
.js .site-header.is-top:not(.is-open) .site-header__cta {
  --btn-bg: var(--champagne);
  --btn-fg: var(--forest-deep);
  --btn-bg-hover: var(--white);
  --btn-fg-hover: var(--forest-deep);
}
.site-header.is-hidden {
  transform: translateY(-101%);
}
.site-header.is-open {
  background: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 64em) {
  .site-nav {
    display: block;
  }
  .site-header__cta {
    display: inline-flex;
  }
  .js .menu-toggle {
    display: none;
  }
  .site-header__inner {
    gap: clamp(1.5rem, 2.6vw, 2.5rem);
  }
}

/* Mobiles Menü. Ohne JavaScript: einfache Linkliste unter der Kopfzeile.
   Mit JavaScript: Vollbild-Ebene, die der Menüknopf öffnet. */
.menu {
  padding: calc(var(--header-h) + 1rem) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 1.5rem
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
  background: var(--white);
  color: var(--forest);
}
.js .menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.js .menu.is-open {
  display: flex;
}
.menu__list a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2rem);
  line-height: 1.15;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.menu__list a[aria-current] {
  font-style: italic;
}
.menu__list a:active {
  opacity: 0.6;
}
.menu__foot {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: var(--s-4);
}
.menu__foot .btn {
  width: 100%;
}
@media (min-width: 64em) {
  .menu {
    display: none !important;
  }
}

/* Abschnittskopf: Titel links, Einordnung rechts */
.section-head {
  display: grid;
  gap: var(--s-3) var(--gap);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.section-head__text {
  max-width: 30rem;
}
@media (min-width: 56.25em) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* Bildrahmen: nie grösser als die Bildauflösung, immer im eigenen Format */
.frame {
  position: relative;
  width: 100%;
  max-width: var(--max, none);
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: var(--ph, var(--champagne));
}
.frame picture,
.frame img {
  width: 100%;
  height: 100%;
}
.frame img {
  object-fit: cover;
  /* gemeinsame Tonalität für Handy- und Profifotos */
  filter: saturate(0.86) contrast(1.03);
}

/* Linie */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* Aufzählung mit Linien */
.facts li {
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.35;
}
.facts li:last-child {
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 37.5em) {
  .facts--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .facts--two li:nth-last-child(2) {
    border-bottom: 1px solid var(--rule);
  }
}

/* Platzhalter für fehlendes Material */
.missing {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-2);
  padding: var(--s-4);
  aspect-ratio: var(--ar, 4 / 5);
  max-width: var(--max, none);
  border: 1px dashed var(--rule-strong);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
}
.missing .mark {
  width: 4.5rem;
  color: var(--sand);
}
mark.todo {
  padding: 0.1em 0.35em;
  background: var(--champagne);
  color: var(--forest-deep);
  font-weight: 500;
}

/* Kontaktwerkzeuge (Startseite und Unterseiten) */
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-5);
}
.contact__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: var(--s-3);
  font-size: var(--fs-small);
}
.contact__direct a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 600;
}
.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.copy svg {
  width: 1rem;
  height: 1rem;
}
@media (hover: hover) {
  .copy:hover {
    background: var(--forest);
    color: var(--white);
  }
}
.contact__mark {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(-9rem, -14vw);
  width: clamp(18rem, 44vw, 38rem);
  margin-top: calc(clamp(18rem, 44vw, 38rem) / -2);
  color: var(--sand);
  opacity: 0.36;
  pointer-events: none;
}
.sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-top: var(--s-5);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.sign em {
  font-style: italic;
}
@media (max-width: 37.49em) {
  .contact__actions .btn {
    width: 100%;
  }
  /* schmal: Rosette an den Rand, damit sie keinen Text unterlegt */
  .contact__mark {
    top: 0;
    right: -34vw;
    width: 68vw;
    margin-top: -18vw;
    opacity: 0.26;
  }
}

/* Fusszeile */
.site-footer {
  --focus: var(--champagne);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
  background: var(--forest-deep);
  color: var(--champagne);
  font-size: 1rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--gap);
}
.site-footer__brand,
.site-footer__contact {
  grid-column: 1 / -1;
}
.site-footer .brand {
  margin-right: 0;
}
.site-footer .brand .mark {
  width: 3rem;
  color: var(--sand);
}
.site-footer .brand__name {
  font-size: 1.375rem;
}
.site-footer__claim {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--white);
}
.site-footer__title {
  margin-bottom: 0.5rem;
  color: var(--white);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-footer li a {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: 0.625rem;
  line-height: 1.5;
}
.site-footer a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
  .site-footer a:hover {
    color: var(--white);
    text-decoration: underline;
  }
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-3);
  border-top: 1px solid rgb(221 205 171 / 0.22);
  font-size: var(--fs-small);
}
.site-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
}
.site-footer__bottom p {
  padding-block: 0.625rem;
  line-height: 1.5;
}
@media (min-width: 56.25em) {
  .site-footer__top {
    grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  }
  .site-footer__brand,
  .site-footer__contact {
    grid-column: auto;
  }
}

/* Aktionsleiste am unteren Rand (nur schmale Bildschirme) */
.action-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-bar);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.5rem calc(var(--gutter) + env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom))
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
  background: rgb(255 255 255 / 0.94);
  border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.action-bar.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.action-bar .btn {
  min-height: 3rem;
  padding: 0.375rem 1rem;
  font-size: var(--fs-small);
  line-height: 1.15;
}
@media (min-width: 48em) {
  .action-bar {
    display: none;
  }
}
@media (max-width: 47.99em) {
  html {
    scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* 7 Abschnitte Startseite ------------------------------------------------ */

/* Hero – Grundzustand: Foto randlos, Statement folgt darunter.
   Die fixierte Szene (.hero--pinned) schaltet erst das Skript zu, wenn sie passt. */
.hero {
  position: relative;
  background: var(--white);
}
.hero__first {
  --focus: var(--white);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 2200px;
  margin-inline: auto;
  overflow: hidden;
  color: var(--white);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  container-type: size;
  background: var(--forest-deep);
}
.hero__media picture {
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  width: 100%;
  height: 100%;
}
.hero__media img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.9);
}
/* Bild in voller Fläche (3:2) über den Rahmen legen statt per object-fit beschneiden:
   so bleibt beim Zurückziehen in den Rahmen der ganze Bildausschnitt verfügbar. */
@supports (width: 1cqw) {
  .hero__media img {
    width: max(100cqw, 150cqh);
    height: max(100cqh, 66.667cqw);
    max-width: none;
  }
}
/* Schleier: richtet sich nach der Höhe des Textblocks (--intro-h setzt das Skript),
   nicht nach der Bildschirmhöhe. So bleibt der Text überall lesbar und das Gesicht frei. */
.hero__scrim {
  --ih: var(--intro-h, 58vh);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(28 41 23 / 0.95) 0, rgb(28 41 23 / 0.84) calc(var(--ih) * 0.5), rgb(28 41 23 / 0.66) calc(var(--ih) * 0.9), rgb(28 41 23 / 0) calc(var(--ih) * 1.32)),
    linear-gradient(to bottom, rgb(28 41 23 / 0.8) 0, rgb(28 41 23 / 0.52) 5rem, rgb(28 41 23 / 0) 12rem);
}
.hero__intro {
  padding-block: calc(var(--header-h) + 2rem) clamp(1.25rem, 3.5vh, 2.5rem);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, min(0.6rem + 7.6vw, 11vh), 6rem);
  font-size: clamp(1.875rem, min(0.6rem + 7.6vw, 11svh), 6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.hero__title > span,
.hero__title > span > span {
  display: block;
}
.hero__title-claim {
  margin-top: 0.14em;
  color: var(--champagne);
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero__lede {
  max-width: 40rem;
  margin-top: clamp(0.875rem, 2.2vh, 1.75rem);
  color: rgb(255 255 255 / 0.94);
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(1.125rem, 2.8vh, 2.25rem);
}
.hero__actions .link {
  color: var(--white);
}
.hero__proof {
  display: grid;
  margin-top: clamp(1.25rem, 4vh, 3.25rem);
  border-top: 1px solid rgb(255 255 255 / 0.3);
  font-size: 1rem;
  line-height: 1.35;
}
.hero__proof li {
  padding-block: 0.625rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}
.hero__proof li:last-child {
  border-bottom: 0;
}
/* kurze Handy-Bildschirme: Belege folgen weiter unten, das Gesicht bleibt frei */
@media (max-width: 47.99em) and (max-height: 50em) {
  .hero__proof {
    display: none;
  }
}
@media (min-width: 48em) {
  .hero__proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .hero__proof li {
    padding-block: 0.875rem 0;
    border-bottom: 0;
  }
}
@media (min-width: 56.25em) {
  .hero__scrim {
    background: linear-gradient(to top, rgb(28 41 23 / 0.92) 0, rgb(28 41 23 / 0.62) calc(var(--ih) * 0.5), rgb(28 41 23 / 0.3) calc(var(--ih) * 0.9), rgb(28 41 23 / 0) calc(var(--ih) * 1.25)),
      linear-gradient(to right, rgb(28 41 23 / 0.55) 0, rgb(28 41 23 / 0.3) 34%, rgb(28 41 23 / 0) 62%),
      linear-gradient(to bottom, rgb(28 41 23 / 0.8) 0, rgb(28 41 23 / 0.5) 5rem, rgb(28 41 23 / 0) 12rem);
  }
}
.hero__statement {
  padding-block: var(--section) 0;
}
.hero__slot {
  display: none;
}
.statement {
  font-size: var(--fs-statement);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.statement__line {
  display: block;
}
.statement__line--voice {
  color: var(--moss);
  font-style: italic;
  letter-spacing: -0.005em;
}

/* Hero als fixierte Szene: Foto zieht sich in den Rahmen zurück */
.hero--pinned {
  height: calc(100vh + var(--hero-run, 100vh));
  height: calc(100svh + var(--hero-run, 100svh));
}
.hero--pinned .hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--white);
}
.hero--pinned .hero__first {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  will-change: clip-path;
}
.hero--pinned .hero__media img {
  transform-origin: 0 0;
  will-change: transform;
}
.hero--pinned .hero__intro {
  will-change: opacity, transform;
}
.hero--pinned .hero__statement {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 0.5rem) 1rem;
}
.hero--pinned .hero__statement-grid {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(1.25rem, 3.5vh, 2.5rem) var(--gap);
}
.hero--pinned .statement {
  grid-row: 2;
}
.hero--pinned .hero__slot {
  display: block;
  grid-row: 1;
  width: 100%;
  height: clamp(14rem, 48vh, 32rem);
  height: clamp(14rem, 48svh, 32rem);
}
.hero--pinned .statement .w {
  opacity: 0.3;
}
@media (max-width: 47.99em) {
  .hero--pinned {
    --hero-run: 88vh;
  }
}
@media (min-width: 56.25em) {
  .hero--pinned .hero__statement-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-rows: auto;
    align-items: center;
  }
  .hero--pinned .statement {
    grid-row: 1;
    grid-column: 1;
  }
  .hero--pinned .hero__slot {
    grid-column: 2;
    height: auto;
    aspect-ratio: 1 / 1.08;
    max-height: 72vh;
    max-height: 72svh;
    justify-self: end;
  }
}

/* Positionierung */
.about {
  padding-block: clamp(3.5rem, 7vw, 7rem) var(--section);
}
.about__grid {
  display: grid;
  gap: var(--s-5) var(--gap);
}
.about__text .h3 {
  margin-bottom: var(--s-4);
}
.line {
  display: block;
}
@media (min-width: 56.25em) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
    align-items: center;
  }
  .about__text {
    grid-column: 3;
  }
}

/* Angebot */
.offer__item {
  display: grid;
  gap: var(--s-4) var(--gap);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.offer__text .h3 {
  margin-bottom: var(--s-2);
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.15;
}
.offer__text p {
  max-width: 30rem;
}
.offer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.offer__foot p {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  text-wrap: balance;
}
@media (min-width: 56.25em) {
  .offer__item {
    grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
    align-items: center;
  }
  .offer__item .frame {
    grid-column: 3;
    justify-self: end;
  }
  .offer__item:nth-child(even) .offer__text {
    grid-column: 3;
    grid-row: 1;
  }
  .offer__item:nth-child(even) .frame {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
}

/* Yannick Wider */
.chef__grid {
  display: grid;
  gap: var(--s-5) var(--gap);
}
.chef__role {
  margin-top: var(--s-2);
  color: var(--ink);
  font-size: var(--fs-lede);
  font-weight: 500;
}
.chef__quote {
  max-width: 26ch;
  margin-top: var(--s-4);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.3;
}
.chef__bio {
  margin-top: var(--s-4);
}
.chef__media {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.chef__media .frame:first-child {
  width: 76%;
}
.chef__media .frame:last-child {
  width: 56%;
  justify-self: end;
}
@media (min-width: 56.25em) {
  .chef__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
    align-items: center;
  }
  .chef__media {
    grid-column: 1;
    grid-row: 1;
  }
  .chef__text {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Meilensteine: drei Belege als Zeilen. Kein Zeitstrahl, die Belege sind keine Abfolge. */
.proof__grid {
  display: grid;
  gap: var(--s-5) var(--gap);
}
.proof__item {
  display: grid;
  gap: 0.375rem var(--gap);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.proof__item:last-child {
  padding-bottom: 0;
}
.proof__label {
  color: var(--champagne);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.proof__fact {
  font-size: clamp(1.625rem, 1.2rem + 2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
}
.proof__body p {
  max-width: 32rem;
  margin-top: 0.625rem;
}
@media (min-width: 37.5em) {
  .proof__item {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
  .proof__label {
    padding-top: 0.5em;
  }
}
@media (min-width: 56.25em) {
  .proof__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .proof__head {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
  }
}

/* Mitmachen: eine ruhige Zeile, klar von der Kundenanfrage getrennt */
.join {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.join__grid {
  display: grid;
  gap: var(--s-3) var(--gap);
  align-items: start;
}
.join__text .btn {
  margin-top: var(--s-3);
}
@media (min-width: 56.25em) {
  .join__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Kreationen: zwei Flächen von Rand zu Rand, keine Karten */
.creations {
  padding-top: var(--section);
  border-top: 1px solid var(--rule);
}
.creations__grid {
  --edge: var(--gutter);
  display: grid;
  border-top: 1px solid var(--rule);
}
.creation {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 6vw, 6rem) var(--gutter);
  background: var(--surface);
}
.creation--bone {
  --surface: var(--bone);
}
.creation .h3 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.creation .h3 a {
  text-decoration: none;
}
/* ganze Fläche klickbar, ein einziger Link im Tab-Ablauf */
.creation .h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.creation .h3 a:focus-visible {
  outline: 0;
}
.creation:focus-within {
  outline: 2px solid var(--forest);
  outline-offset: -0.5rem;
}
.creation__voice {
  max-width: 22ch;
  margin-top: var(--s-2);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.3;
}
.creation__text {
  max-width: 30rem;
  margin-top: var(--s-4);
}
.creation__more {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: var(--s-5);
  color: var(--ink);
  font-weight: 600;
}
.creation__more svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .creation:hover .creation__more svg {
    transform: translateX(0.375rem);
  }
}
@media (min-width: 56.25em) {
  .creations__grid {
    /* Aussenkanten der Texte fluchten mit dem Seitenraster */
    --edge: max(var(--gutter), calc((200% - var(--wrap)) / 2));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .creation {
    padding-inline: clamp(2.5rem, 5vw, 5rem);
  }
  .creation:first-child {
    padding-left: var(--edge);
    border-right: 1px solid var(--rule);
  }
  .creation:last-child {
    padding-right: var(--edge);
  }
}

/* Kontakt */
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--rule);
}
.contact__inner {
  max-width: 46rem;
}
.contact__inner .lede {
  margin-top: var(--s-3);
}
.contact__hint {
  max-width: 32rem;
  margin-top: var(--s-3);
  font-size: var(--fs-small);
}

/* 8 Unterseiten ---------------------------------------------------------- */
.page {
  padding-top: var(--header-h);
}
.page--bone {
  --surface: var(--bone);
  background: var(--bone);
}
.crumbs {
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
  font-size: var(--fs-label);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
}
.crumbs li + li::before {
  content: "/";
  content: "/" / "";
  color: var(--rule-strong);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.crumbs [aria-current] {
  color: var(--ink);
  font-weight: 600;
}
.page-hero {
  padding-block: clamp(2rem, 5vw, 5rem) var(--section);
}
.page-hero__grid {
  display: grid;
  gap: var(--s-5) var(--gap);
  align-items: end;
}
.page-hero__tag {
  max-width: 22ch;
  margin-top: var(--s-3);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.3;
  text-wrap: balance;
}
.page-hero .missing {
  --max: 26rem;
}
@media (min-width: 56.25em) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
  }
  .page-hero .missing {
    grid-column: 3;
    justify-self: end;
    width: 100%;
  }
}

/* Kurzzeilen, die beim Scrollen nacheinander aufleuchten */
.lit {
  display: grid;
  gap: 0.2em;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lit__line {
  display: block;
  text-wrap: balance;
}
.lit--tight {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.26;
}

/* Kapitel: Titel links, Text rechts */
.chapter {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.chapter__grid {
  display: grid;
  gap: var(--s-4) var(--gap);
}
.chapter__body > * + * {
  margin-top: 1.25em;
}
.chapter__body > .lit,
.chapter__body > .facts {
  margin-top: var(--s-5);
}
.chapter__body > .lit:first-child {
  margin-top: 0;
}
.chapter__body > p:not([class]) {
  max-width: var(--measure);
}
.chapter__lead {
  max-width: 28ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
}
@media (min-width: 72em) {
  .chapter__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .chapter__head {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
  }
  .chapter__body {
    grid-column: 2;
  }
}

/* Dunkles Band: demnächst */
.teaser {
  padding-block: var(--section);
}
.teaser__badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  margin-top: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: 10rem;
  color: var(--champagne);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.teaser__grid {
  display: grid;
  gap: var(--s-5) var(--gap);
}
.teaser__body > * + * {
  margin-top: 1.25em;
}
.teaser__body > p:not([class]) {
  max-width: var(--measure);
}
.teaser__body .lit {
  margin-block: var(--s-5);
  color: var(--white);
}
@media (min-width: 72em) {
  .teaser__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* Abschluss mit Anfrage */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.closing__inner {
  max-width: 46rem;
}
.closing__inner > p:not([class]) {
  max-width: var(--measure);
  margin-top: 1.25em;
}
.closing__inner > .lit {
  margin-top: var(--s-4);
}
.next {
  border-top: 1px solid var(--rule);
}
.next a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  padding-block: clamp(2rem, 5vw, 4rem);
  color: var(--ink);
  text-decoration: none;
}
.next__label {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
}
.next__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.next svg {
  width: clamp(2rem, 4vw, 3rem);
  height: clamp(2rem, 4vw, 3rem);
  transition: transform var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .next a:hover svg {
    transform: translateX(0.5rem);
  }
}

/* Rechtstexte */
.legal {
  padding-block: clamp(2rem, 5vw, 4rem) var(--section);
}
.legal .h1 {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h2);
}
.legal .h2 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.legal .prose {
  max-width: 42rem;
}
.legal .prose a:not(.btn) {
  display: inline-block;
  padding-block: 0.75rem;
}
.legal address {
  font-style: normal;
}

/* 9 Bewegung -------------------------------------------------------------
   Alle Ausgangszustände hängen an .motion. Die Klasse wird nur gesetzt, wenn
   JavaScript läuft und keine reduzierte Bewegung gewünscht ist. Ohne sie ist
   jede Seite vollständig lesbar. Per Scroll gesteuert werden transform und
   opacity, beim Hero zusätzlich clip-path auf einer einzigen Ebene. */

/* Einstieg beim Laden (ein orchestrierter Moment) */
@keyframes wc-rise {
  from {
    transform: translate3d(0, 108%, 0);
  }
  to {
    transform: none;
  }
}
@keyframes wc-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wc-settle {
  from {
    transform: scale(1.07);
  }
  to {
    transform: none;
  }
}
.motion .hero__media picture {
  animation: wc-settle 2.2s var(--ease-out) both;
}
.motion .hero__title > span,
.motion .h1__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.motion .hero__title > span > span,
.motion .h1__mask > span {
  display: block;
  animation: wc-rise 1.1s var(--ease-out) 0.1s both;
}
.motion .hero__title-claim > span {
  animation-delay: 0.22s;
}
.motion .hero__lede,
.motion .hero__actions,
.motion .hero__proof,
.motion .page-hero__tag,
.motion .page-hero .missing {
  animation: wc-fade-up 0.8s var(--ease-out) 0.45s both;
}
.motion .hero__actions {
  animation-delay: 0.55s;
}
.motion .hero__proof,
.motion .page-hero .missing {
  animation-delay: 0.65s;
}

/* Titel: Wörter steigen hinter einer Maske hoch */
.motion [data-reveal="words"] .w {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.05em 0.16em;
  margin: 0 -0.05em -0.16em;
  vertical-align: bottom;
}
.motion [data-reveal="words"] .w > span {
  display: inline-block;
  transform: translate3d(0, 112%, 0);
  transition: transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.motion [data-reveal="words"].is-in .w > span {
  transform: none;
}

/* Einzelne Blöcke: kurzes Aufsteigen, gestaffelt über --i */
.motion [data-reveal="rise"] {
  opacity: 0;
  transform: translate3d(0, 0.875rem, 0);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal="rise"].is-in {
  opacity: 1;
  transform: none;
}

/* Bilder: Vorhang öffnet sich, Bild setzt sich.
   Der Vorhang liegt auf <picture>, nicht auf dem beobachteten Rahmen: ein ganz
   weggeschnittenes Element meldet dem IntersectionObserver keine Sichtbarkeit. */
.motion .frame[data-reveal="curtain"] {
  background: none;
}
.motion .frame[data-reveal="curtain"] picture {
  background: var(--ph, var(--champagne));
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-in-out);
}
.motion .frame[data-reveal="curtain"] img {
  transform: scale(1.12);
  transition: transform 1.5s var(--ease-out);
}
.motion .frame[data-reveal="curtain"].is-in picture {
  clip-path: inset(0);
}
.motion .frame[data-reveal="curtain"].is-in img {
  transform: none;
}

/* Linien zeichnen sich von links */
.motion [data-reveal="rule"] {
  position: relative;
  border-top-color: transparent;
}
.motion [data-reveal="rule"]::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-in-out);
}
.motion [data-reveal="rule"].is-in::after {
  transform: scaleX(1);
}

/* Kurzzeilen: Deckkraft folgt der Scrollposition (Startwert, Skript übernimmt) */
.motion .lit__line {
  opacity: 0.4;
}

/* Menü */
@keyframes wc-menu-in {
  from {
    opacity: 0;
    transform: translate3d(0, -0.75rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.motion .menu.is-open {
  animation: wc-menu-in var(--t-base) var(--ease-out) both;
}
.motion .menu.is-open .menu__list li,
.motion .menu.is-open .menu__foot {
  animation: wc-fade-up 0.5s var(--ease-out) both;
  animation-delay: calc(60ms + var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* 10 Sonderfälle --------------------------------------------------------- */

/* Sehr niedrige Fenster (Handy quer, starker Zoom): keine fixierte Leiste, die den Inhalt verdeckt */
@media (max-height: 30em) {
  html {
    scroll-padding-top: 1rem;
    scroll-padding-bottom: 1rem;
  }
  .site-header {
    position: absolute;
  }
  .site-header.is-hidden {
    transform: none;
  }
  .action-bar {
    display: none;
  }
}

/* Kontrastmodus von Windows: Flächen mit currentColor bleiben sichtbar */
@media (forced-colors: active) {
  .mark,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .btn,
  .copy {
    border-color: ButtonText;
  }
}

@media print {
  .site-header,
  .menu,
  .action-bar,
  .skip-link,
  .contact__mark,
  .hero__media,
  .hero__scrim,
  .hero__slot {
    display: none !important;
  }
  .page {
    padding-top: 0;
  }
  .hero,
  .hero__stage,
  .hero__first,
  .hero__statement {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    clip-path: none !important;
  }
  [data-reveal],
  [data-reveal] *,
  .lit__line,
  .statement .w,
  .hero__intro {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .hero__first *,
  .section--forest,
  .section--forest *,
  .site-footer,
  .site-footer * {
    background: none !important;
    color: #000 !important;
  }
  .btn {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
  .btn::before {
    display: none !important;
  }
  a[href^="mailto"]:not([href*="?"])::after,
  a[href^="tel"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}