/* =============================================================================
   Itze Grow e.V.
   Grammar: chaptered editorial. Ground: warm paper, one inverted chapter.
   Palette is the association's own logo, sampled from the artwork:
     #F59936 orange, #3F5F2D leaf green, #FFF95B sheen, #000 outline
   Nothing here restyles a .sc-* mechanism class. Theme by token only.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts --
   Self-hosted. Google's CDN is not used: LG München I, 3 O 17493/20 treats
   embedding it as transmitting visitor IPs to a third country without consent,
   which is a problem for a site that links its own Datenschutzerklärung.      */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- theme --
   Warm bone rather than white. taste.md rotates away from the cream-and-brass
   artisan default; this is its "deep forest with bone and amber" instead.

   Measured on the render:
     #3F5F2D on #F3F0E8 .......... 6.4:1   accent text, passes AA
     #14180F on #F3F0E8 ......... 16.2:1   primary text
     #5A6152 on #F3F0E8 .......... 5.7:1   secondary text
     #14180F on #F59936 .......... 8.3:1   button label on the orange fill
     #8FCC55 on #0C0F0A .......... 9.8:1   accent inside the soil chapter
     #F2F5EE on #0C0F0A ......... 16.4:1   text inside the soil chapter       */

:root {
  --sc-canvas:     #F3F0E8;
  --sc-surface:    #EBE7DC;
  --sc-ink:        #14180F;
  --sc-ink-soft:   #5A6152;
  --sc-accent:     #3F5F2D;
  --sc-accent-ink: #F3F0E8;

  /* the logo's own colours, unmodified */
  --brand-orange:  #F59936;
  --brand-green:   #3F5F2D;
  --brand-sheen:   #FFF95B;
  --brand-soil:    #0C0F0A;
  --brand-green-lift: #8FCC55;

  --sc-font-display: "Bricolage Grotesque", Georgia, system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Two families is the ceiling. Labels are the text face tracked out, not a
     third face wearing a technical costume. */
  --sc-font-mono:    "Instrument Sans", system-ui, sans-serif;

  --sc-shadow-color: 96 22% 8%;
  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 30%, transparent);

  --sc-maxw: 74rem;
  --sc-r-sm: 3px; --sc-r-md: 4px; --sc-r-lg: 6px; --sc-r-pill: 999px;
  /* Nine chapters at the engine default would run the page past the 8-14
     viewport-height budget. Longer is not more immersive, it is slower. */
  --sc-section: clamp(3.25rem, 5.6vw, 6.5rem);

  --rail: clamp(0px, 7vw, 104px);   /* the margin the root rail lives in */
  --bar: 62px;                      /* the sticky top bar */
}
@media (max-width: 900px) { :root { --bar: 56px; } }

html { background: var(--sc-canvas); }

body {
  font-optical-sizing: auto;
  hyphens: auto;               /* Anbauvereinigung, Selbstkostenpreis */
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

::selection { background: var(--brand-sheen); color: var(--sc-ink); }

:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 3px; }

/* anchors must clear the sticky bar */
[id] { scroll-margin-top: calc(var(--bar) + 1.25rem); }

/* ------------------------------------------------------- inverted ground --
   Redefining a token on a subtree does not re-ink text whose colour already
   resolved on <body>. `color` must be restated on the same subtree or the
   chapter renders paper-ink on soil at 1.2:1.                                */

.soil {
  --sc-canvas:   #0C0F0A;
  --sc-surface:  #141A11;
  --sc-ink:      #F2F5EE;
  --sc-ink-soft: #A7B29C;
  --sc-accent:   var(--brand-green-lift);
  --sc-accent-ink: #0C0F0A;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  color: var(--sc-ink);
  background: var(--sc-canvas);
}
/* light on dark needs compensation: more leading, more tracking, more weight */
.soil .sc-body,
.soil p { line-height: 1.72; letter-spacing: 0.004em; }
.soil .sc-display { font-weight: 520; }

/* ============================================================ ATMOSPHÄRE ==
   Slow drifting light over the paper, so the ground is never a flat white
   field. Deliberately NOT smoke: § 6 KCanG forbids advertising for cannabis,
   and the Merkblatt extends that to anything a non-trivial share of readers
   would read as promoting consumption. Smoke plumes are exactly that image.
   Three soft fields, transform only, no filters (blur on a full-screen layer
   costs more than it shows).                                                 */

.atmos {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.atmos__field {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.atmos__field--a {
  width: 78vmax; height: 78vmax;
  top: -14vmax; left: -18vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--brand-green) 16%, transparent) 0%,
    color-mix(in oklab, var(--brand-green) 7%, transparent) 38%,
    transparent 68%);
  animation: drift-a 68s ease-in-out infinite alternate;
}
.atmos__field--b {
  width: 62vmax; height: 62vmax;
  top: 22vmax; right: -16vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--brand-orange) 13%, transparent) 0%,
    color-mix(in oklab, var(--brand-orange) 5%, transparent) 40%,
    transparent 70%);
  animation: drift-b 84s ease-in-out infinite alternate;
}
.atmos__field--c {
  width: 90vmax; height: 90vmax;
  bottom: -30vmax; left: 18vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, #7E8B5E 15%, transparent) 0%,
    color-mix(in oklab, #7E8B5E 6%, transparent) 42%,
    transparent 72%);
  animation: drift-c 96s ease-in-out infinite alternate;
}
@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 9vmax, 0) scale(1.04); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  50%  { transform: translate3d(-8vmax, 6vmax, 0) scale(1); }
  100% { transform: translate3d(3vmax, -5vmax, 0) scale(1.14); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(7vmax, -7vmax, 0) scale(1.1); }
  100% { transform: translate3d(-6vmax, -3vmax, 0) scale(1.02); }
}

/* the grain sits on top and stops the soft fields banding on real displays */
.sc-grain { opacity: 0.05; }

/* ================================================================= RAUCH ==
   Einmalig beim Laden. Auf hellem Grund muss Rauch etwas DUNKLER als der
   Grund sein, sonst sieht man ihn nicht: darum ein entsättigtes Warmgrau,
   nicht Weiß. Transform und Opacity, sonst nichts. site.js räumt die Ebene
   nach dem Lauf aus dem DOM, damit nichts dauerhaft komponiert wird.        */

.smoke {
  position: fixed;
  inset: 0;
  z-index: 4;                 /* über Inhalt und Korn, unter Leiste und Menü */
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.smoke__p, .smoke__w {
  position: absolute;
  display: block;
  bottom: -26vh;
  opacity: 0;
  will-change: transform, opacity;
  border-radius: 50%;
}

/* Ein Rauchfaden rechts, der über dem Logo aufsteigt. Die Quelle liegt
   BEWUSST unterhalb des sichtbaren Bereichs: man sieht nie, wo er anfängt,
   der Rauch zieht einfach von unten ins Bild. Zwei eng benachbarte Ströme
   statt einem, damit die Säule Dichteunterschiede hat und nicht wie ein
   gleichmässiger Schlauch wirkt. Die Partikel folgen einer echten Kurve
   (offset-path), nicht einer Geraden mit seitlichem Versatz. */
/* Der Ursprung sitzt direkt unter dem Logo. Die Werte kommen aus site.js,
   das die Logo-Position misst: fest eingetragene vh-Werte stimmen sonst nur
   auf einer Bildschirmgrösse, weil das Logo am Telefon links oben steht und
   am Desktop rechts. Die Fallbacks greifen nur, falls die Messung ausfällt. */
.smoke__s {
  position: absolute;
  left: var(--sx, 78%);
  top: var(--sy, 72%);
  bottom: auto;
  width: 0; height: 0;
}
.smoke__s--1 { margin-left: -13px; }
.smoke__s--2 { margin-left: 15px; opacity: 0.7; }

.smoke__s > span {
  position: absolute;
  display: block;
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;      /* auf dem Bahnpunkt zentrieren */
  border-radius: 50%;
  opacity: 0;
  /* Heller Kern mit ganz schwachem Saum: reines Weiss verschwindet auf Bone,
     zu viel Grau sieht aus wie Schmutz. Der Blur ist bewusst gross genug,
     dass benachbarte Teilchen zu einem Faden verschmelzen statt als Kette
     einzelner Punkte zu lesen. */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 253, 1) 0%,
      rgba(255, 254, 250, 0.72) 30%,
      rgba(254, 253, 248, 0.28) 54%,
      rgba(254, 253, 248, 0) 74%),
    radial-gradient(circle at 50% 50%,
      rgba(122, 128, 110, 0) 28%,
      rgba(122, 128, 110, 0.075) 54%,
      rgba(122, 128, 110, 0) 78%);
  filter: blur(15px);
  will-change: transform, opacity, offset-distance;
  /* Nur leicht beschleunigend: unten dichter, oben auseinanderziehend. Eine
     stärkere Kurve hat den Rauch vorher spürbar zu spät ins Bild kommen
     lassen, weil der langsame Teil am Anfang die halbe Laufzeit frass. */
  animation: rise var(--dur, 6s) cubic-bezier(0.4, 0.12, 0.72, 1) var(--delay, 0s) forwards;
  offset-rotate: 0deg;
}

/* Die Bahnen: vom Fuss des Logos gerade darüber hinweg und aus dem Bild.
   Eng mäandernd wie Rauch in ruhiger Luft, oben etwas weiter ausschwingend. */
.smoke__s--1 > span {
  offset-path: path("M0,0 C 9,-80 -15,-150 -3,-230 C 8,-310 -22,-380 -6,-460 C 11,-540 -26,-610 -12,-720");
}
.smoke__s--2 > span {
  offset-path: path("M0,0 C -11,-75 14,-145 1,-225 C -12,-305 21,-375 4,-455 C -14,-535 19,-605 2,-710");
}

/* Dichter Versatz, damit ein zusammenhängender Faden entsteht statt einer
   Perlenkette. Leicht unterschiedliche Laufzeiten halten ihn unregelmässig. */
.smoke__s > span:nth-child(1)  { --delay: 0.00s; --dur: 5.8s; }
.smoke__s > span:nth-child(2)  { --delay: 0.14s; --dur: 6.2s; }
.smoke__s > span:nth-child(3)  { --delay: 0.28s; --dur: 5.6s; }
.smoke__s > span:nth-child(4)  { --delay: 0.42s; --dur: 6.4s; }
.smoke__s > span:nth-child(5)  { --delay: 0.56s; --dur: 5.9s; }
.smoke__s > span:nth-child(6)  { --delay: 0.70s; --dur: 6.1s; }
.smoke__s > span:nth-child(7)  { --delay: 0.84s; --dur: 5.7s; }
.smoke__s > span:nth-child(8)  { --delay: 0.98s; --dur: 6.3s; }
.smoke__s > span:nth-child(9)  { --delay: 1.12s; --dur: 5.8s; }
.smoke__s > span:nth-child(10) { --delay: 1.26s; --dur: 6.0s; }
.smoke__s > span:nth-child(11) { --delay: 1.40s; --dur: 5.6s; }
.smoke__s > span:nth-child(12) { --delay: 1.54s; --dur: 6.4s; }
.smoke__s > span:nth-child(13) { --delay: 1.68s; --dur: 5.9s; }
.smoke__s > span:nth-child(14) { --delay: 1.82s; --dur: 6.1s; }
.smoke__s > span:nth-child(15) { --delay: 1.96s; --dur: 5.7s; }
.smoke__s > span:nth-child(16) { --delay: 2.10s; --dur: 6.3s; }
.smoke__s > span:nth-child(17) { --delay: 2.24s; --dur: 5.8s; }
.smoke__s > span:nth-child(18) { --delay: 2.38s; --dur: 6.0s; }

.smoke__s--2 > span { animation-delay: calc(var(--delay) + 0.20s); }

/* Unten ein enger Faden, oben löst er sich auf: darum wächst der Massstab
   erst spät richtig, nicht linear über die ganze Bahn. */
@keyframes rise {
  0%   { offset-distance: 0%;   opacity: 0;    transform: scale(0.2); }
  6%   {                        opacity: 1;    }
  32%  {                        opacity: 1;    transform: scale(0.6); }
  64%  {                        opacity: 0.82; transform: scale(1.3); }
  86%  {                        opacity: 0.4;  }
  100% { offset-distance: 100%; opacity: 0;    transform: scale(2.8); }
}

/* Ohne offset-path steigen die Partikel wenigstens gerade auf. */
@supports not (offset-path: path("M0,0 L0,-10")) {
  .smoke__s > span { animation-name: rise-straight; }
  @keyframes rise-straight {
    0%   { opacity: 0;    transform: translateY(0) scale(0.18); }
    6%   { opacity: 0.95; }
    58%  { opacity: 0.66; transform: translateY(-70vh) scale(1.15); }
    100% { opacity: 0;    transform: translateY(-124vh) scale(2.9); }
  }
}

/* Die Position kommt aus der Messung, die muss hier nicht mehr korrigiert
   werden. Auf dem Telefon nur kleinere, weniger geblurrte Teilchen: der Blur
   ist der teuerste Teil des Effekts und Telefone tragen ihn am schlechtesten. */
@media (max-width: 860px) {
  .smoke__s > span { filter: blur(11px); width: 54px; height: 54px; margin: -27px 0 0 -27px; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke { display: none; }
}

/* the page rides above the atmosphere */
.page { position: relative; z-index: 1; margin-left: var(--rail); }

/* gentle first paint */
body.is-loading .page,
body.is-loading .topbar { opacity: 0; }
.page, .topbar { transition: opacity 520ms var(--sc-ease-out); }

/* ================================================================= TOPBAR ==*/

.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 70;
  height: var(--bar);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform 320ms var(--sc-ease-out),
              border-color 320ms var(--sc-ease-out),
              background 320ms var(--sc-ease-out);
}
.topbar.is-stuck { border-bottom-color: var(--sc-hairline); }

/* The bar stays reachable over the inverted chapter, so it inverts with the
   ground. Restating `color` matters here for the same reason it does on
   .soil: an inherited colour has already resolved on <body>. */
body.is-underground .topbar {
  background: color-mix(in oklab, var(--brand-soil) 84%, transparent);
  border-bottom-color: color-mix(in oklab, #F2F5EE 16%, transparent);
  color: #F2F5EE;
}
body.is-underground .topbar__mark { color: #F2F5EE; }
body.is-underground .topbar__nav a { color: #A7B29C; }
body.is-underground .topbar__nav a[aria-current="true"] { color: #F2F5EE; }
body.is-underground .topbar__nav a::after { background: var(--brand-green-lift); }
body.is-underground .burger span { background: #F2F5EE; }
@media (hover: hover) and (pointer: fine) {
  body.is-underground .topbar__nav a:hover { color: #F2F5EE; }
}

.topbar__in {
  height: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: var(--sc-5);
}

.topbar__mark {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-display);
  font-weight: 600; font-size: 0.9rem; letter-spacing: -0.015em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar__mark img { width: 46px; height: 26px; object-fit: contain; }

.topbar__nav {
  display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.75rem);
  margin-inline-start: auto;
  font-size: 0.86rem;
}
.topbar__nav a {
  color: var(--sc-ink-soft);
  text-decoration: none;
  position: relative;
  padding-block: 0.35rem;
  transition: color 160ms var(--sc-ease-out);
  white-space: nowrap;
}
.topbar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--brand-green);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .topbar__nav a:hover { color: var(--sc-ink); }
  .topbar__nav a:hover::after { transform: scaleX(1); }
}
.topbar__nav a[aria-current="true"] { color: var(--sc-ink); }
.topbar__nav a[aria-current="true"]::after { transform: scaleX(1); }

.topbar__cta { margin-inline-start: var(--sc-3); flex: 0 0 auto; }

/* ---------------------------------------------------------------- burger --*/
.burger {
  display: none;
  width: 42px; height: 42px;
  flex: 0 0 42px;              /* or the CTA squashes it to a few pixels */
  margin-inline-start: auto;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: var(--sc-r-md);
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.8px;
  background: var(--sc-ink);
  transition: transform 260ms var(--sc-ease-out), opacity 180ms var(--sc-ease-out);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ menu --*/
.menu {
  /* Below the bar (70), above the rail (60) and the page (1). If the overlay
     covered the bar, the burger's close state would be invisible and the only
     way out would be Escape or a link. */
  position: fixed; inset: 0; z-index: 68;
  background: var(--sc-canvas);
  padding: calc(var(--bar) + 1.5rem) clamp(1.25rem, 6vw, 3rem) 2rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 260ms var(--sc-ease-out);
}
.menu.is-open { opacity: 1; }
.menu__in { display: grid; gap: 0; max-width: 32rem; margin-inline: auto; }
.menu__in > a:not(.action) {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  text-decoration: none;
  color: var(--sc-ink);
  font-family: var(--sc-font-display);
  font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.menu.is-open .menu__in > a:not(.action) {
  animation: menu-in 460ms var(--sc-ease-out) forwards;
}
.menu__in > a b { color: var(--brand-green); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; }
@keyframes menu-in { to { opacity: 1; transform: none; } }
.menu__cta { margin-top: var(--sc-6); justify-self: start; }
.menu__meta { margin-top: var(--sc-6); display: flex; gap: var(--sc-5); font-size: 0.82rem; }
.menu__meta a { color: var(--sc-ink-soft); }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  /* Two classes deep on purpose: .action is defined later in this file and
     would otherwise win the display race at equal specificity, leaving the
     desktop button on the phone bar. */
  .topbar .topbar__nav, .topbar .topbar__cta { display: none; }
  .topbar .burger { display: block; }
}
@media (min-width: 901px) {
  .menu { display: none !important; }
}

/* ================================================================= CHROME ==
   The folio in the margin: the drawn root, which is the signature move.      */

.rail {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--rail);
  z-index: 60;
  pointer-events: none;
  display: grid;
  place-items: stretch;
}
.rail__svg { width: 100%; height: 100%; overflow: visible; }

/* the taproot draws itself from the page's scroll progress */
.root-line {
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - var(--root-p, 0)));
}
.root-line--ghost {
  stroke: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 1.2;
}
.root-branch {
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: var(--blen);
  stroke-dashoffset: calc(var(--blen) * (1 - var(--branch-p, 0)));
  opacity: 0.72;
}

/* the rail inverts with the ground while the soil chapter owns the screen */
body.is-underground .root-line,
body.is-underground .root-branch { stroke: var(--brand-green-lift); }

@media (max-width: 900px) {
  .rail { width: 3px; }
  .rail__svg { display: none; }
  .rail { background: linear-gradient(
      to bottom,
      var(--brand-green) calc(var(--root-p, 0) * 100%),
      color-mix(in oklab, var(--sc-ink) 10%, transparent) 0); }
}

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--brand-green); color: #F3F0E8;
  padding: var(--sc-3) var(--sc-5); text-decoration: none;
}
.skip:focus { left: var(--sc-4); top: var(--sc-4); }

/* ============================================================ FLY-IN ==
   The page's own entry device, so the engine's [data-sc-*] selectors stay
   untouched. Rises further and settles slower than the engine default,
   because a chaptered page has fewer, larger arrivals.                       */

[data-fly]:not([data-fly-stagger]),
[data-fly-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 780ms var(--sc-ease-out), transform 780ms var(--sc-ease-out);
}
[data-fly]:not([data-fly-stagger]).is-in,
[data-fly-stagger] > .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* fewer and gentler, not zero: the opacity that carries comprehension stays */
  [data-fly]:not([data-fly-stagger]),
  [data-fly-stagger] > * { transform: none; transition-duration: 240ms; }
  .atmos__field { animation: none; }
  .menu.is-open .menu__in > a:not(.action) { animation-duration: 1ms; }
}

/* ------------------------------------------------------------ logo intro --*/
.logo-intro {
  animation: logo-in 1100ms var(--sc-ease-out) 120ms both;
  transform-origin: 50% 60%;
}
@keyframes logo-in {
  0%   { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.9) rotate(-1.6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-intro { animation: logo-fade 400ms ease both; }
  @keyframes logo-fade { from { opacity: 0 } to { opacity: 1 } }
}

/* ================================================================= LAYOUT ==*/

.chapter { padding-block: var(--sc-section); position: relative; }
/* A flow section straight after a pinned act takes reduced top padding: the
   pinned stage needs a full viewport to scroll off. */
.chapter--after-pin { padding-block-start: var(--sc-6); }

.measure { max-width: 34rem; }
.measure--wide { max-width: 46rem; }

/* Bereichsüberschrift: groß, ruhig, mit kurzem orangefarbenem Strich darunter.
   Keine Nummerierung, kein „Kapitel“ davor. */
.chapter__head {
  margin-bottom: var(--sc-8);
}
.chapter__head::after {
  content: "";
  display: block;
  width: 3rem; height: 4px;
  margin-top: var(--sc-4);
  border-radius: 2px;
  background: var(--brand-orange);
}
.chapter__title {
  font-family: var(--sc-font-display);
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.038em;
  margin: 0;
  text-wrap: balance;
  color: var(--sc-ink);
}

.lede-xl {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: var(--sc-track-snug);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
.prose > * + * { margin-top: var(--sc-5); }
.prose > :is(h3) { margin-top: var(--sc-8); }
.prose p { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; }
.prose strong { color: var(--sc-ink); font-weight: 600; }
.prose a:not(.action) {
  color: var(--brand-green); font-weight: 600;
  text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}

.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 var(--sc-4);
}

/* ============================================================ TITLE PAGE ==*/

.title-page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--bar) + var(--sc-5)) var(--sc-gutter) var(--sc-6);
  gap: var(--sc-6);
}
.title-page__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-bottom: 1px solid var(--sc-hairline);
  padding-bottom: var(--sc-3);
}
.title-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(var(--sc-6), 6vw, var(--sc-9));
}
.title-page__mark { justify-self: center; width: min(100%, 26rem); }
.title-page__mark img { width: 100%; height: auto; }

.title-page h1 {
  font-family: var(--sc-font-display);
  font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.1rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.038em;
  margin: 0;
  text-wrap: balance;
}
.title-page h1 .thin { font-weight: 300; color: var(--sc-ink-soft); display: block; }
.title-page__claim {
  margin-top: var(--sc-5);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-base); font-weight: 500; line-height: 1.4;
  color: var(--brand-green); max-width: 40ch; text-wrap: balance;
}
.title-page__claim + .title-page__sub { margin-top: var(--sc-3); }
.title-page__sub {
  margin-top: var(--sc-5);
  font-size: var(--sc-t-lg); line-height: 1.45;
  color: var(--sc-ink-soft); max-width: 34ch; text-wrap: pretty;
}
.title-page__act { margin-top: var(--sc-6); }
.title-page__foot {
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); align-items: baseline;
  border-top: 1px solid var(--sc-hairline);
  padding-top: var(--sc-3);
  font-size: 0.78rem; color: var(--sc-ink-soft);
}
.title-page__foot b { color: var(--sc-ink); font-weight: 600; }

@media (max-width: 860px) {
  .title-page__body { grid-template-columns: 1fr; gap: var(--sc-6); }
  .title-page__mark { width: min(100%, 16rem); order: -1; justify-self: start; }
}
@media (max-width: 560px) {
  /* both folio labels wrap and collide at phone widths; the name survives */
  .title-page__top > :last-child { display: none; }
  .title-page__foot { gap: var(--sc-2) var(--sc-5); }
}

/* ============================================================== TIMELINE ==*/

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
/* the dated rows and the method rows are one continuous table, not two
   stacked ones: a second border-top a gap below the first reads as an empty row */
.timeline--joined { border-top: 0; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: var(--sc-4) var(--sc-6);
  padding: var(--sc-5) 0;
  border-bottom: 1px solid var(--sc-hairline);
  align-items: baseline;
}
.timeline__when {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-green); font-variant-numeric: tabular-nums;
}
.timeline__when[data-state="planned"] { color: var(--sc-ink-soft); }
.timeline__what { font-size: var(--sc-t-lg); line-height: 1.35; letter-spacing: -0.012em; }
.timeline__note { display: block; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-2); line-height: 1.5; }

@media (max-width: 620px) { .timeline li { grid-template-columns: 1fr; gap: var(--sc-1); } }

/* ============================================================== KEY FACTS ==*/

.facts { display: grid; gap: 0; margin: var(--sc-7) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.facts > div {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--sc-4) var(--sc-6); align-items: baseline;
  padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline);
}
.facts dt { color: var(--sc-ink-soft); font-size: var(--sc-t-base); margin: 0; }
.facts dd {
  margin: 0; font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.facts dd small { font-size: var(--sc-t-sm); font-weight: 400; color: var(--sc-ink-soft); letter-spacing: 0; }

@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: var(--sc-1); }
  .facts dd { font-size: var(--sc-t-base); }
}

/* --------------------------------------------------------------- action --*/
.action {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  background: var(--brand-orange);
  color: var(--sc-ink);
  font-weight: 600; letter-spacing: -0.005em;
  padding: var(--sc-3) var(--sc-6);
  border-radius: var(--sc-r-md);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.18),
              0 4px 14px hsl(var(--sc-shadow-color) / 0.10);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out),
              background 140ms var(--sc-ease-out);
}
.action--sm { padding: 0.45rem 0.9rem; font-size: 0.84rem; gap: var(--sc-2); }
@media (hover: hover) and (pointer: fine) {
  .action:hover {
    background: #F7A64F;
    box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.20), 0 8px 22px hsl(var(--sc-shadow-color) / 0.14);
    transform: translateY(-1px);
  }
  .action:hover .action__arrow { transform: translateX(2px); }
}
.action:active { transform: translateY(1px); box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.2); }
.action__arrow { transition: transform 160ms var(--sc-ease-out); }

.action-note { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 44ch; display: block; }
.chapter__act { margin-top: var(--sc-7); }

@media (prefers-reduced-motion: reduce) { .action { transition: none; } }

/* ================================================================ SILENCE ==*/

.silence {
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-lg);
  padding: clamp(var(--sc-7), 9vw, var(--sc-10)) var(--sc-6);
  text-align: center;
  display: grid; gap: var(--sc-4); place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px,
      color-mix(in oklab, var(--sc-ink) 3.5%, transparent) 11px 12px);
}
.silence p { color: var(--sc-ink-soft); max-width: 40ch; }
.silence__mark { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); color: var(--sc-ink); font-weight: 500; }

/* ==================================================================== FAQ ==*/

.faq { border-top: 1px solid var(--sc-hairline-strong); margin-top: var(--sc-7); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sc-5) var(--sc-7) var(--sc-5) 0;
  position: relative;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.018em; line-height: 1.28;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--sc-2); top: 50%;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--brand-green);
  border-bottom: 1.5px solid var(--brand-green);
  translate: 0 -60%; rotate: 45deg;
  transition: rotate 220ms var(--sc-ease-out), translate 220ms var(--sc-ease-out);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 -30%; }
.faq details > div { padding: 0 var(--sc-7) var(--sc-6) 0; }
.faq details p { color: var(--sc-ink-soft); max-width: 58ch; }

/* =============================================================== COLOPHON ==*/

.colophon {
  border-top: 1px solid var(--sc-hairline-strong);
  padding-block: var(--sc-7) var(--sc-6);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sc-7); align-items: end;
}
.colophon__mark { width: min(100%, 13rem); }
.colophon__mark img { width: 100%; height: auto; }
/* Leitsatz über die ganze Breite in einer Zeile, darunter Satz und Hinweis
   eine Stufe größer, je etwa zwei Zeilen im Blocksatz. */
.colophon__claim {
  grid-column: 1 / -1;
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 0.6rem + 2.3vw, 2.6rem); font-weight: 500; line-height: 1.12;
  letter-spacing: -0.024em; margin: 0;
  hyphens: none; -webkit-hyphens: none;
  white-space: nowrap;
}
.colophon__claim span:nth-child(2) { color: var(--sc-ink-soft); font-weight: 400; }
.colophon__claim span:nth-child(3) { color: var(--brand-green); }

/* Satz und Hinweis im Blocksatz, gleich breit, damit sie als Block stehen.
   Trennung nur an gesetzten Stellen (&shy;), nicht automatisch. */
.colophon__run,
.colophon__note {
  width: 100%; max-width: 36rem;
  text-align: justify; text-align-last: left;
  hyphens: manual; -webkit-hyphens: manual;
  color: var(--sc-ink-soft);
}
.colophon__run { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }
.colophon__act { margin-top: var(--sc-6); }
.colophon__note { margin-top: var(--sc-4); font-size: var(--sc-t-base); line-height: 1.6; }

/* :not(.action) matters: the generic link rule otherwise outranks .action and
   paints the CTA label green on the orange fill at 3.3:1. */
.colophon__run a:not(.action) { color: var(--brand-green); font-weight: 600; text-decoration-thickness: 1.5px; }
.colophon__meta {
  margin-top: var(--sc-7); padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6);
  font-size: 0.78rem; color: var(--sc-ink-soft); grid-column: 1 / -1;
}
.colophon__meta a { color: var(--sc-ink-soft); }
.colophon__meta a:hover { color: var(--brand-green); }

@media (max-width: 760px) {
  .colophon { grid-template-columns: 1fr; gap: var(--sc-6); }
  /* auf dem Handy passt der Leitsatz nicht in eine Zeile: je Wort eine Zeile */
  .colophon__claim { white-space: normal; }
  .colophon__claim span { display: block; }
  /* schmale Spalte: Blocksatz würde große Lücken reißen */
  .colophon__run, .colophon__note { text-align: left; }
  .colophon__mark { width: min(60%, 11rem); }
}

/* ============================================================ FINE PRINT ==*/

.agehint {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-pill);
  padding: 4px 12px;
}

/* ========================================================== LEGAL PAGES ==
   Impressum and Datenschutz. Same design system, document register.          */

.legal { padding-block: calc(var(--bar) + var(--sc-8)) var(--sc-9); }
.legal__head { border-bottom: 1px solid var(--sc-hairline-strong); padding-bottom: var(--sc-5); margin-bottom: var(--sc-8); }
.legal__head h1 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl); font-weight: 500; line-height: 1.02;
  letter-spacing: -0.032em; margin: 0; text-wrap: balance;
}
.legal__lead { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 52ch; }

.legal__body { max-width: 44rem; }
.legal__body h2 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.022em;
  margin: var(--sc-8) 0 var(--sc-4);
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  text-wrap: balance;
}
.legal__body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal__body h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em;
  margin: var(--sc-6) 0 var(--sc-3);
}
.legal__body p, .legal__body li { color: var(--sc-ink-soft); line-height: 1.72; }
.legal__body p + p { margin-top: var(--sc-4); }
.legal__body ul, .legal__body ol { margin: var(--sc-4) 0 0; padding-left: 1.25rem; }
.legal__body li + li { margin-top: var(--sc-2); }
.legal__body a { color: var(--brand-green); font-weight: 600; text-underline-offset: 0.2em; }
.legal__body strong { color: var(--sc-ink); font-weight: 600; }
.legal__body address { font-style: normal; color: var(--sc-ink); line-height: 1.7; }

.legal__meta {
  margin-top: var(--sc-9); padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.8rem; color: var(--sc-ink-soft);
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6);
}
.legal__meta a { color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- printing --*/
@media print {
  .rail, .skip, .topbar, .menu, .atmos, .sc-grain { display: none !important; }
  .page { margin-left: 0; }
  .soil { --sc-canvas: #fff; --sc-ink: #000; color: #000; background: #fff; }
  .legal { padding-block: 0; }
}