/* Hof der Chancen */

@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Schrittwinkel, Kopfhaltung und Blick des Schafs, registriert für weiche Übergänge */
@property --swing { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --head { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --look { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

:root {
  /* Bergischer Dreiklang plus Landschaft: Schiefer, Kalkputz, Fensterladen, Wiese, Stroh */
  --night: #0f2150;        /* Text, Linien, Akzente */
  --night-2: #1d3470;
  --night-deep: #0d1c45;   /* Abendband */
  --blue: #2f55b3;         /* Links (6:1 auf Papier) */
  --silver: #b8bfcb;
  --green: #284a3c;        /* Torgrün */
  --meadow: #2f6b4a;       /* Wiesengrün für Text und Linien */
  --meadow-light: #eef3e5; /* Abschnittsgrund Hellgrün */
  --straw: #e9c46a;        /* Akzent für Knöpfe und Hervorhebungen */
  --straw-2: #dcae4a;
  --straw-light: #f7eed8;
  --ochre-text: #6b4710;
  --paper: #f6f3ec;
  --muted: #4a5366;        /* Nebentext (7:1 auf Papier) */
  --error: #a32a1c;

  --line: var(--night);
  --line-soft: rgba(15, 33, 80, .3);
  --gate: var(--green);

  /* feines Papierrauschen, sehr dezent */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: "Spectral", Georgia, serif;
  --font-text: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Hoftor-Szene: breiter als hoch, oben liegt Himmel, in dem der Claim steht */
  --stage-w: min(128svh, 1600px);
  --stage-h: calc(var(--stage-w) * .625);
}
@media (max-aspect-ratio: 3/4) {
  :root { --stage-w: 94svh; --stage-bottom: 4.5rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--grain), var(--paper);
  color: var(--night);
  font: 400 1.125rem/1.6 var(--font-text);
}
h1, h2, h3, .lead, .claim { overflow-wrap: break-word; }
/* Lange deutsche Wörter nur dort trennen, wo es eng wird */
@media (max-width: 40rem) { h1, h2, h3, .claim { hyphens: auto; } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0; }
h1 em, h2 em, .lead em, .claim em { font-style: italic; font-weight: 300; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .2s, text-decoration-thickness .2s; }
a:hover { color: var(--night); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 7px rgba(233, 196, 106, .55); }
main:focus { outline: none; box-shadow: none; }
img, svg { max-width: 100%; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  padding: .75rem 1.25rem; background: var(--night); color: var(--paper);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Noch fehlende Angaben, vor dem Start ersetzen */
.placeholder { background: #ffe066; color: #1b1b1b; padding: 0 .25em; border-radius: 2px; }
.placeholder-box { display: grid; place-items: center; padding: 1rem; background: #ffe066; color: #1b1b1b; text-align: center; }

/* Bänder: wechselnder Grund für Rhythmus */
.band { background: var(--grain), var(--paper); }
.band--green { background: var(--grain), var(--meadow-light); }
.band--straw { background: var(--grain), var(--straw-light); }
.band--night { background: var(--grain), var(--night-deep); color: #f2efe6; }
.band--night a { color: #c9d7ff; }
.band--night :focus-visible { outline-color: var(--straw); }

/* ---------- Knöpfe ---------- */

.button, .gate-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .9rem 1.7rem;
  font: 600 1.0625rem/1.2 var(--font-text); color: var(--night);
  background: var(--straw); border: 1px solid var(--night); border-radius: 3px; cursor: pointer;
  transition: background-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.button:hover, .gate-button:hover { background: var(--straw-2); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(15, 33, 80, .55); }
.button:active, .gate-button:active { transform: translateY(0); box-shadow: none; }
.button { justify-self: start; }

/* ---------- Kopfzeile ---------- */

.site-header {
  position: relative; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding: 1.25rem var(--gutter);
}
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; }
.site-header__tools { display: flex; align-items: center; gap: .5rem 1.5rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--night); text-decoration: none; min-height: 48px; }
.brand:hover { color: var(--night); }
.brand__mark { width: 2.2rem; height: auto; aspect-ratio: 100 / 128; color: currentColor; flex: none; }
.brand__name { font: 400 1.3rem/1 var(--font-display); letter-spacing: .05em; }
.site-nav { position: relative; order: -1; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--night); text-decoration: underline; text-decoration-color: transparent; font-size: 1.0625rem;
  transition: text-decoration-color .2s, text-underline-offset .2s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration-color: currentColor; text-underline-offset: .35em; }
.site-nav__toggle { display: none; }

.motion-toggle {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; min-width: 44px; padding: .4rem .8rem;
  font: 400 .9375rem/1 var(--font-text); color: var(--night);
  background: rgba(246, 243, 236, .75); border: 1px solid rgba(15, 33, 80, .4); border-radius: 3px; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.motion-toggle:hover { background: var(--straw-light); border-color: var(--night); }
.motion-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle__play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle__pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle__play { display: inline; }
@media (max-width: 40rem) { .site-header { gap: .5rem; padding-top: 1rem; } .site-header__tools { gap: .5rem; } .brand__name { font-size: 1.15rem; } .motion-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .motion-toggle { padding: .4rem; justify-content: center; } }

@media (max-width: 62rem) {
  .js .site-nav__toggle {
    display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.1rem;
    font: 400 1.0625rem/1 var(--font-text); color: var(--night);
    background: var(--paper); border: 1px solid var(--night); border-radius: 3px; cursor: pointer;
  }
  .site-nav { order: 0; }
  .js .site-nav__toggle[aria-expanded="false"] + ul { display: none; }
  .js .site-nav ul {
    position: absolute; right: 0; top: calc(100% + .5rem);
    flex-direction: column; gap: 0; min-width: 16rem; padding: .5rem 1.25rem;
    background: var(--paper); border: 1px solid var(--night); border-radius: 3px;
  }
  .js .site-nav li + li { border-top: 1px solid var(--silver); }
  .js .site-nav a { width: 100%; padding: .4rem 0; }
}

/* ---------- Hoftor ---------- */

.hero { position: relative; height: 100svh; }
.js .hero { height: 300svh; }
.hero__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* heller Vormittag */
  background: linear-gradient(180deg, #cfe0f0 0%, #e3edf1 34%, #f1f0e8 66%, var(--paper) 100%);
}
/* Morgendämmerung, verblasst beim Scrollen */
.hero__sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #f1cfcb 0%, #f6dcc8 32%, #f6e9d9 62%, var(--paper) 100%);
  opacity: calc(1 - var(--sky, 1));
}
.js .hero__sticky { --open: 0; --zoom: 1; --so: 0; --pk: 1; --sky: 0; }

.hero__text {
  position: absolute; inset: 0 0 auto; z-index: 5;
  min-height: calc(100svh - var(--stage-h) * .86);
  display: grid; align-content: center; justify-items: center; gap: 1.25rem;
  padding: min(5.5rem, 12svh) 1rem 0; text-align: center;
}
.claim {
  margin: 0; max-width: 21ch;
  font: 300 min(clamp(2.75rem, 1.3rem + 4.6vw, 5.75rem), 8.6svh)/1.04 var(--font-display);
  letter-spacing: -.02em; text-wrap: balance;
  /* rückt beim Aufbau des Hofs nach oben und wird ruhiger */
  transform: translateY(calc((1 - var(--cs, .74)) * -95%)) scale(var(--cs, .74));
  transform-origin: 50% 0;
}
.js .hero__sticky { --cs: 1; }
.gate-button { display: none; opacity: var(--hint, 1); }
.js .gate-button { display: inline-flex; }
.gate-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.gate-button[hidden] { display: none; }

.stage {
  position: absolute; z-index: 1; bottom: var(--stage-bottom, 0); left: 50%;
  width: var(--stage-w); aspect-ratio: 16 / 10;
  /* die Kamera fährt beim Öffnen leicht hinein */
  transform: translateX(-50%) scale(var(--zoom, 1.08));
  transform-origin: 50% 72%;
  will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene path, .scene rect, .scene circle {
  fill: none; stroke: var(--line); stroke-width: 1.15;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.scene .soft { stroke: var(--line-soft); stroke-width: .8; }
/* Luftperspektive: Was weiter hinten liegt, ist heller */
.scene .hills path { stroke: rgba(15, 33, 80, .45); stroke-width: .9; }
.scene .hills .soft { stroke: rgba(15, 33, 80, .22); }
.scene--back .draw path, .scene--back .draw rect, .scene--back .draw circle { stroke-width: 1; }
.scene .fill { fill: var(--paper); stroke: none; }
.scene path[fill^="url"] { fill: url(#schiefer); stroke: var(--line); }
.scene--back path[fill^="url"] { fill: url(#schiefer-back); stroke: none; }
.scene .shutters rect { fill: var(--green); stroke: var(--line); }
.scene .stone-line { stroke: rgba(15, 33, 80, .34); stroke-width: .75; }
.scene .stone-fill { stroke: none; }
.scene--front { z-index: 2; }

/* Aquarellflächen: leicht versetzt, ausgefranst, hinter den Linien */
.wash { stroke: none !important; filter: url(#aquarell); }
.wash.wash--meadow { fill: #9dc086; fill-opacity: .55; }
.wash.wash--meadow-far { fill: #bcd5a8; fill-opacity: .5; }
.wash.wash--grass { fill: #a7c88d; fill-opacity: .5; }
.wash.wash--leaf { fill: #86ad6e; fill-opacity: .5; }
.wash.wash--path { fill: #ddb977; fill-opacity: .45; }
.wash.wash--slate { fill: #8d9bb8; fill-opacity: .36; }
.wash.wash--lime { fill: #efe5cf; fill-opacity: .7; }
.wash.wash--brick { fill: #b9735a; fill-opacity: .45; }
.wash.wash--wood { fill: #c9a36a; fill-opacity: .38; }
.wash.wash--wood-dark { fill: #8d6a3e; fill-opacity: .32; }
.wash.wash--stone { fill: #d2cbbd; fill-opacity: .6; }

/* Torflügel: echte 3D-Drehung nach innen */
.gate {
  position: absolute; z-index: 3;
  left: 36.25%; top: 56.5%; width: 27.5%; height: 29.5%;
  perspective: calc(var(--stage-w) * .9);
}
.wing { position: absolute; top: 0; width: 50%; height: 100%; display: block; backface-visibility: visible; }
.wing--left  { left: 0;  transform-origin: 0 50%;    transform: rotateY(calc(var(--open, 1) * 76deg)); }
.wing--right { right: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--open, 1) * -76deg)); }
.js .wing { will-change: transform; }

/* Linien zeichnen sich, danach füllen sich die Flächen (Werte setzt hoftor.js) */
.scene .body { fill: var(--paper); stroke: none; }
.js .draw > * { stroke-dasharray: 1; stroke-dashoffset: var(--d, 1); }
.js .draw .slate, .js .draw .body, .js .draw .shutters rect { stroke-dashoffset: 0; opacity: var(--f, 0); }
.js .draw .shutters rect, .js .draw .wash, .js .draw .smoke *, .js .draw .chicken * { stroke-dasharray: none; }
.js .draw .wash, .js .draw .smoke, .js .draw .chicken { opacity: var(--w, 0); }

/* Leises Leben: Rauch, Blätter, Vögel, Huhn */
.scene .puff { fill: rgba(190, 196, 210, .55); stroke: none; filter: url(#aquarell); transform-box: fill-box; transform-origin: center; animation: puff 10s linear infinite; }
.scene .puff--2 { animation-delay: -3.3s; }
.scene .puff--3 { animation-delay: -6.6s; }
@keyframes puff {
  0% { transform: translate(0, 0) scale(.45); opacity: 0; }
  12% { opacity: .95; }
  100% { transform: translate(22px, -78px) scale(1.9); opacity: 0; }
}
.sway { transform-box: view-box; transform-origin: 800px 404px; animation: sway 7.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
.scene .bird__wings { stroke: rgba(15, 33, 80, .75); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: flap 1.2s ease-in-out infinite alternate; }
.bird--1 { animation: fly-1 80s linear infinite; }
.bird--2 { animation: fly-2 80s linear infinite; animation-delay: -34s; }
@keyframes fly-1 { from { transform: translate(-60px, 150px); } 50% { transform: translate(800px, 120px); } to { transform: translate(1660px, 140px); } }
@keyframes fly-2 { from { transform: translate(-60px, 190px); } 50% { transform: translate(800px, 172px); } to { transform: translate(1660px, 160px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.scene .chicken path { stroke-width: .9; }
.scene .chicken__body { fill: #fbf7ee; }
.scene .chicken__comb { fill: #c25b45; stroke: none; }
.chicken__head { transform-box: fill-box; transform-origin: 0% 100%; animation: peck 5s ease-in-out infinite; }
@keyframes peck { 0%, 55%, 100% { transform: rotate(0); } 64% { transform: rotate(34deg); } 72% { transform: rotate(6deg); } 80% { transform: rotate(30deg); } 88% { transform: rotate(0); } }

/* Schaf schaut über die Mauer, später läuft es durchs Tor */
.peek-sheep {
  position: absolute; z-index: 1; width: 7%; left: 71.5%; top: 64.6%;
  transform: translate(-50%, calc(-100% + var(--pky, 0) * 1%)) scaleX(-1);
  opacity: var(--pk, 0);
}
.hero-sheep {
  position: absolute; z-index: 4; width: 7%;
  left: var(--sx, 72%); top: var(--sy, 86.4%);
  transform: translate(-50%, -93%) scale(var(--ss, 1));
  transform-origin: 50% 100%;
  opacity: var(--so, 1);
}
@media (max-aspect-ratio: 3/4) { .hero-sheep, .peek-sheep { width: 9%; } }

.status {
  display: flex; align-items: flex-start; gap: .65rem; margin: 0;
  width: max-content; max-width: 100%;
  padding: .75rem 1.15rem; background: var(--paper);
  border: 1px solid var(--night); border-radius: 3px;
  font-size: 1.0625rem; line-height: 1.45;
}
.hero .status {
  position: absolute; z-index: 5; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%); max-width: calc(100% - 2rem);
  box-shadow: 0 10px 24px -18px rgba(15, 33, 80, .6);
}
.status svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; fill: none; stroke: var(--meadow); stroke-width: 1.7; stroke-linecap: round; }
.status strong { font-weight: 700; }

/* ---------- Das Schaf ---------- */

.sheep {
  display: block; width: 100%; height: auto; overflow: visible;
  --head: var(--head-rest, 0deg);
  transition: --head 1.1s ease-in-out, --swing .35s ease-out, --look .45s ease-out;
}
.sheep[data-pose="graze"] { --head-rest: 60deg; }
.sheep[data-pose="look"]  { --head-rest: -8deg; }
.sheep[data-pose="walk"]  { --head-rest: 4deg; }
.is-scrolling .sheep { --head: 2deg; }
.sheep.is-looking { --head: 0deg; }
.sheep__body { fill: var(--sheep-wool, #fbf8f1); stroke: var(--sheep-line, #0f2150); stroke-width: 1.3; }
.sheep__wool { fill: none; stroke: var(--sheep-curl, rgba(15, 33, 80, .35)); stroke-width: 1; stroke-linecap: round; }
.sheep__tail { fill: none; stroke: var(--sheep-line, #0f2150); stroke-width: 1.3; stroke-linecap: round; }
.sheep__far .leg { fill: none; stroke: var(--sheep-far, #58617a); stroke-width: 2.2; stroke-linecap: round; }
.sheep__near .leg { fill: none; stroke: var(--sheep-face, #0f2150); stroke-width: 2.4; stroke-linecap: round; }
.leg--a { transform: rotate(calc(var(--swing, 0) * 1deg)); }
.leg--b { transform: rotate(calc(var(--swing, 0) * -1deg)); }
.sheep__head { transform-origin: 90px 27px; transform: rotate(calc(var(--head, 0deg) + var(--look, 0deg))); }
.sheep__face { fill: var(--sheep-face, #0f2150); }
.sheep__eye { fill: var(--sheep-eye, #f5f3ee); transform-box: fill-box; transform-origin: center; animation: blink 7s infinite; animation-delay: var(--blink-delay, 0s); }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.sheep.is-hopping .sheep__hop { animation: hop .6s var(--ease); }
@keyframes hop { 0% { transform: none; } 38% { transform: translateY(-12px); } 70% { transform: none; } 84% { transform: translateY(-3px); } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) { .sheep { pointer-events: auto; cursor: pointer; } }

.sheep-walk { position: absolute; width: 6.5rem; pointer-events: none; }
.sheep-walk[data-walk] { transform: translateX(calc((var(--p, 1) - 1) * 9rem)); }
.sheep-walk--vision { right: max(var(--gutter), 6%); bottom: 2.5rem; }
.sheep-walk--footer { right: 12%; bottom: calc(100% - .35rem); width: 5.5rem; }
.sheep-walk--hofstelle { position: relative; margin-top: 2.5rem; }
.sheep-walk--page { left: 52%; bottom: 13%; width: 24%; }
.sheep-walk--weg { top: calc(15cqw - 3.5rem); left: 0; width: 5.5rem; transform: translateX(calc(var(--p, 1) * 66cqw)); }
@media (max-width: 44rem) {
  .sheep-walk--vision, .sheep-walk--weg, .sheep-walk--page, .sheep-walk--hofstelle { display: none; }
  .sheep-walk--footer { width: 4.25rem; }
}

/* ---------- Einblenden beim Scrollen ---------- */

.js [data-progress] { --p: 0; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Abschnitte ---------- */

.section { position: relative; max-width: var(--wrap); margin: 0 auto; padding: var(--space) var(--gutter); }
.section__head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section h2 { font-weight: 300; font-size: clamp(2.25rem, 1.45rem + 2.6vw, 3.4rem); letter-spacing: -.015em; margin-bottom: 1.25rem; }
.section__head p { font-size: 1.1875rem; max-width: 60ch; }
.section p { max-width: 65ch; }
.lead { font: 300 clamp(1.7rem, 1.15rem + 2.1vw, 2.7rem)/1.22 var(--font-display); margin: 0 0 1.75rem; text-wrap: pretty; }
.kicker.kicker { font: 600 1.0625rem/1.4 var(--font-text); letter-spacing: .03em; color: var(--green); margin-bottom: 1.5rem; }

.vision { padding-bottom: calc(var(--space) + 4rem); }
.vision__text { max-width: 48rem; }

/* ---------- 4-Säulen-Modell ---------- */

.modell__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.modell__figure { margin: 0; position: sticky; top: 1.5rem; }
.sym { position: relative; max-width: 40rem; }
.sym__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sym-ring { fill: none; stroke: rgba(47, 107, 74, .45); stroke-width: 1; stroke-dasharray: 2 9; }
.sym-line { fill: none; stroke-width: 1.5; transition: opacity .3s; }
.sym-line--gibt { stroke: var(--night); stroke-dasharray: 8 6; }
.sym-line--bekommt { stroke: var(--meadow); stroke-dasharray: 1.5 6; stroke-linecap: round; stroke-width: 2.3; }
.sym-dot { transition: opacity .3s; visibility: hidden; }
.dots-on .sym-dot { visibility: visible; }
.sym-dot--gibt { fill: var(--night); }
.sym-dot--bekommt { fill: var(--meadow); }
.sym-wash { transition: opacity .3s; }
.sym-wash--senioren { fill: #f2c4a0; fill-opacity: .75; }
.sym-wash--inklusion { fill: #ecd08e; fill-opacity: .75; }
.sym-wash--kinder { fill: #b5d0ea; fill-opacity: .8; }
.sym-wash--tiere { fill: #b3d09c; fill-opacity: .8; }
.sym-node { transition: opacity .3s; }
.sym-node > circle { fill: none; stroke: rgba(15, 33, 80, .35); stroke-width: 1.2; transition: stroke .3s, stroke-width .3s; }
.sym-ill path, .sym-ill circle, .sym-ill ellipse { fill: none; stroke: var(--night); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sym-ill .ill-fill { fill: rgba(255, 253, 247, .65); }
.sym-ill .ill-egg { fill: #fffaf0; stroke-width: 1.2; }
.sym-ill .ill-hay { fill: #e3c27a; }
.sym-ill .ill-water { stroke: #2f6fb0; stroke-width: 1.4; }
.sym-ill .sheep__body { fill: #fbf8f1; stroke: var(--night); stroke-width: 1.3; }
.sym-ill .sheep__face { fill: var(--night); stroke: none; }
.sym-ill .sheep__eye { fill: #f5f3ee; stroke: none; }
.sym-ill .sheep__wool { stroke: rgba(15, 33, 80, .35); stroke-width: 1; }
.sym-ill .sheep__far .leg { stroke: #58617a; stroke-width: 2.2; }
.sym-ill .sheep__near .leg { stroke: var(--night); stroke-width: 2.4; }
.sym-ill .sheep__head { transform: rotate(-6deg); }
.sym-hub { fill: var(--night); }
.sym-hub-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  display: grid; justify-items: center; pointer-events: none; color: var(--paper); text-align: center;
}
.sym-hub-label span { font: 400 clamp(1.15rem, .9rem + 1vw, 2rem)/1 var(--font-display); }
.sym-hub-label small { font-size: .9375rem; letter-spacing: .08em; color: #d4d9e4; margin-top: .3rem; }
.js .sym-mask path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p, 1) - var(--s)) * 2.4, 1)); }
.js .sym-dots { opacity: clamp(0, (var(--p, 1) - .7) * 4, 1); }

.sym-button {
  position: absolute; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--night);
  transition: transform .3s var(--ease);
}
.sym-button:hover { transform: translate(-50%, -50%) scale(1.03); }
.sym-button:focus-visible { outline-offset: 2px; border-radius: 50%; }
.sym-button__label {
  position: absolute; left: 6%; right: 6%; bottom: 13%;
  font: 400 clamp(1rem, .75rem + .7vw, 1.3rem)/1.1 var(--font-display); text-align: center;
}
.sym-button[aria-pressed="true"] .sym-button__label { font-weight: 500; }
@media (max-width: 36rem) {
  .sym-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.modell__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.5rem; font-size: 1rem; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: .6rem; margin-right: 1rem; }
.legend-line { display: inline-block; width: 2.5rem; border-top: 1.5px dashed var(--night); }
.legend-line--bekommt { border-top: 2.5px dotted var(--meadow); }

.modell__hint { color: var(--muted); font-size: 1rem; }
.saeule { padding: 1.4rem 1rem 1.25rem; margin: 0 -1rem; border-top: 1px solid rgba(15, 33, 80, .18); border-radius: 3px; transition: background-color .3s; }
.saeule h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.55rem; margin-bottom: .75rem; }
.saeule__dot { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid rgba(15, 33, 80, .4); }
.saeule--senioren .saeule__dot { background: #f2c4a0; }
.saeule--inklusion .saeule__dot { background: #ecd08e; }
.saeule--kinder .saeule__dot { background: #b5d0ea; }
.saeule--tiere .saeule__dot { background: #b3d09c; }
.saeule dl { display: grid; gap: .35rem; margin: 0 0 .9rem; }
.saeule dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.saeule dt { color: var(--meadow); font-weight: 700; font-size: 1rem; }
.saeule dd { margin: 0; }
.saeule p { margin: 0; color: #2b3552; }
.saeule.is-active { background: rgba(255, 253, 247, .75); }

.modell__figure[data-active] .sym-line,
.modell__figure[data-active] .sym-dot,
.modell__figure[data-active] .sym-wash,
.modell__figure[data-active] .sym-node { opacity: .2; }
.modell__figure[data-active="senioren"] [data-group="senioren"],
.modell__figure[data-active="inklusion"] [data-group="inklusion"],
.modell__figure[data-active="kinder"] [data-group="kinder"],
.modell__figure[data-active="tiere"] [data-group="tiere"] { opacity: 1; }
.modell__figure[data-active="senioren"] .sym-node[data-group="senioren"] > circle,
.modell__figure[data-active="inklusion"] .sym-node[data-group="inklusion"] > circle,
.modell__figure[data-active="kinder"] .sym-node[data-group="kinder"] > circle,
.modell__figure[data-active="tiere"] .sym-node[data-group="tiere"] > circle { stroke: var(--night); stroke-width: 2.2; }

@media (max-width: 56rem) {
  .modell__layout { grid-template-columns: minmax(0, 1fr); }
  .modell__figure { position: relative; top: 0; }
  .sym { margin: 0 auto; }
}
@media (max-width: 36rem) { .saeule dl div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Hofplan ---------- */

.hof__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.hof__figure { position: sticky; top: 1.5rem; }
.plan { display: block; width: 100%; height: auto; overflow: visible; }
.plan path, .plan circle {
  fill: none; stroke: var(--line); stroke-width: 1;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.plan .face { fill: #fbf8f1; }
.plan .face.side { fill: #efe9dc; }
.plan .roof { fill: #cfd6e3; }
.plan .roof.front { fill: #bdc8da; }
.plan .wood { fill: #ecdab8; }
.plan .wood.side { fill: #dfc79d; }
.plan .bed { fill: #c79d66; fill-opacity: .55; stroke: rgba(15, 33, 80, .35); }
.plan .pitch { fill: #f1dfac; stroke: var(--line-soft); }
.plan .leaf { fill: #fbf8f1; }
.plan .window { fill: #d4dcea; stroke: var(--line-soft); }
.plan .door { fill: #bf9f72; }
.plan .soft, .plan .fence { stroke: var(--line-soft); stroke-width: .8; }
.plan .post { stroke-width: .8; }
.plan .sheep__body { fill: #fbf8f1; stroke: var(--night); }
.plan .sheep__face { fill: var(--night); stroke: none; }
.plan .sheep__eye { fill: #f5f3ee; stroke: none; animation: none; }
.plan .sheep__far .leg { stroke: #58617a; stroke-width: 2.2; }
.plan .sheep__near .leg { stroke: var(--night); stroke-width: 2.4; }
.plan .sheep__wool { stroke: rgba(15, 33, 80, .35); }
.plan .sheep__head { transform: rotate(55deg); }
.plan-part { transition: transform .4s var(--ease); }
.js .plan-draw path:not(.wash) { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p, 1) * 1.5, 1)); fill-opacity: clamp(0, (var(--p, 1) - .45) * 2.5, 1); }
.js .plan-draw .bed { fill-opacity: calc(clamp(0, (var(--p, 1) - .45) * 2.5, 1) * .55); }
.js .plan-draw .wash { opacity: clamp(0, (var(--p, 1) - .5) * 2.5, 1); }
.js .plan-sheep, .js .plan-pin { opacity: clamp(0, (var(--p, 1) - .4) * 3, 1); }
.hof__figure[data-hl="1"] [data-area~="1"], .hof__figure[data-hl="2"] [data-area~="2"],
.hof__figure[data-hl="3"] [data-area~="3"], .hof__figure[data-hl="4"] [data-area~="4"],
.hof__figure[data-hl="5"] [data-area~="5"], .hof__figure[data-hl="6"] [data-area~="6"],
.hof__figure[data-hl="7"] [data-area~="7"], .hof__figure[data-hl="8"] [data-area~="8"],
.hof__figure[data-hl="9"] [data-area~="9"] { transform: translateY(-9px); }

.plan-pin {
  position: absolute; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  transform: translate(-50%, -50%); border: 2px solid var(--paper); border-radius: 50%;
  background: var(--night); color: var(--paper); font: 700 .9375rem/1 var(--font-text); cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(15, 33, 80, .6);
  transition: transform .3s var(--ease), background-color .2s, color .2s;
}
.plan-pin:hover, .plan-pin.is-active { background: var(--straw); color: var(--night); border-color: var(--night); transform: translate(-50%, calc(-50% - 9px)) scale(1.08); }

.plan-legend { margin: 0 0 2rem; padding: 0; list-style: none; }
.plan-legend li {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: .9rem; align-items: start;
  padding: .75rem .75rem; margin: 0 -.75rem; border-top: 1px solid rgba(15, 33, 80, .18); border-radius: 3px;
  transition: background-color .25s;
}
.plan-legend li:last-child { border-bottom: 1px solid rgba(15, 33, 80, .18); }
.plan-legend li.is-active { background: var(--straw-light); }
.plan-legend__num {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--night); color: var(--paper); font-weight: 700; font-size: .9375rem;
}
.plan-legend__text { display: grid; }
.plan-legend__name { font-weight: 700; }
.plan-legend__desc { color: var(--muted); font-size: 1rem; line-height: 1.45; }

.badge {
  display: inline-flex; align-items: center; white-space: nowrap; align-self: center;
  padding: .15rem .65rem; border: 1px solid; border-radius: 3px;
  font: 600 .9375rem/1.4 var(--font-text); letter-spacing: .01em;
}
.badge--geplant { background: #f6e5bf; border-color: #b8862f; border-style: dashed; color: var(--ochre-text); }
.badge--vorbereitung { background: #dde6f7; border-color: var(--blue); color: var(--night-2); }
.badge--verfuegbar { background: var(--meadow); border-color: var(--meadow); color: #fff; }
.status-key { display: grid; gap: .5rem; margin: 0; font-size: 1rem; }
.status-key div { display: grid; grid-template-columns: 10rem 1fr; gap: .75rem; align-items: center; }
.status-key dd { margin: 0; color: var(--muted); }

@media (max-width: 56rem) { .hof__layout { grid-template-columns: minmax(0, 1fr); } .hof__figure { position: relative; top: 0; } }

/* ---------- Der Weg zum Hof: Abendszene ---------- */

.zeitplan h2, .zeitplan .section__head p { color: #f6f3ec; }
.weg { position: relative; container-type: inline-size; }
.weg__track { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 1.5rem; }
.weg__track path { fill: none; stroke-linecap: round; }
.weg__stars circle { fill: #ece9f6; opacity: .75; }
.weg__track .weg__moon { fill: #f3e9c9; opacity: .92; }
.weg__track .weg__hill { stroke: none; filter: url(#aquarell); }
.weg__track .weg__hill--far { fill: #18326a; }
.weg__track .weg__hill--near { fill: #1a3d4f; }
.weg__edge { stroke: #cdb57d; stroke-width: 12; }
.weg__inner { stroke: #efe2bd; stroke-width: 8.5; }
.js .weg__edge, .js .weg__inner { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p, 1) * 1.25, 1)); }
.weg__stop { fill: var(--night-deep); stroke: #e8dcc0; stroke-width: 2; }
.weg__lantern path { fill: none; stroke: #f3e3b6; stroke-width: 1.6; stroke-linejoin: round; }
.weg__flame { fill: #ffd27a; }
.band--night .sheep-walk { --sheep-line: #e6e2d6; --sheep-face: #cbd0dc; --sheep-far: #9aa3b8; --sheep-eye: #0d1c45; --sheep-curl: rgba(230, 226, 214, .45); --sheep-wool: #f6f2e8; }

.weg__phasen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.phase { padding: 0 clamp(1rem, 3vw, 2.5rem) 0 0; color: #e9e6dd; }
.phase__when { font-weight: 700; margin-bottom: .5rem; color: #f6f3ec; }
.phase__num { display: block; font: 300 2.25rem/1.1 var(--font-display); margin-bottom: .25rem; }
.phase--now .phase__num { font-style: italic; color: #ffe2a3; }
.phase__here {
  display: inline-block; margin-bottom: .9rem; padding: .15rem .7rem;
  background: var(--straw); color: var(--night); border-radius: 3px; font-size: .9375rem; font-weight: 700;
}
@media (max-width: 50rem) {
  .weg__track { display: none; }
  .weg__phasen { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .phase { position: relative; padding: 0 0 0 2.25rem; }
  .phase::before {
    content: ""; position: absolute; left: .35rem; top: .5rem; width: .8rem; height: .8rem;
    border: 1.5px solid #e8dcc0; border-radius: 50%; background: var(--night-deep);
  }
  .phase--now::before { background: var(--straw); border-color: var(--straw); box-shadow: 0 0 0 6px rgba(255, 217, 138, .25), 0 0 18px 6px rgba(255, 217, 138, .35); }
  .phase:not(:last-child)::after {
    content: ""; position: absolute; left: .73rem; top: 1.5rem; bottom: -2rem; border-left: 1.5px dashed #cdb57d;
  }
}

/* ---------- Team und Zitat ---------- */

.team__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.person__photo { aspect-ratio: 4 / 5; max-width: 15rem; margin-bottom: 1.5rem; }
.person h3 { font-size: 1.9rem; margin-bottom: .25rem; }
.person__role { color: var(--green); font-weight: 700; margin-bottom: .9rem; }
@media (max-width: 44rem) { .team__people { grid-template-columns: minmax(0, 1fr); } }

.moment { display: grid; place-items: center; min-height: 82svh; max-width: var(--wrap); margin: 0 auto; padding: var(--space) var(--gutter); }
.moment__quote { margin: 0; text-align: center; }
.moment__quote blockquote { margin: 0 0 2rem; }
.moment__quote blockquote p {
  max-width: 18ch; margin: 0 auto;
  font: italic 300 clamp(2.4rem, 1.2rem + 4.6vw, 5.5rem)/1.1 var(--font-display); letter-spacing: -.015em; text-wrap: balance;
}
.moment__quote figcaption { max-width: 46ch; margin: 0 auto; font-size: 1.125rem; color: #3a3f4f; }

/* ---------- Studien ---------- */

.studien__list { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.quote { margin: 0; max-width: 48rem; padding-left: 1.5rem; border-left: 3px solid var(--straw); }
.quote:nth-child(even) { margin-left: auto; border-left-color: #9dc086; }
.quote blockquote { margin: 0 0 1.25rem; }
.quote blockquote p { margin: 0; font: 300 clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem)/1.42 var(--font-display); text-wrap: pretty; }
.quote figcaption { display: grid; gap: .35rem; padding-top: 1rem; border-top: 1px solid rgba(15, 33, 80, .18); font-size: 1rem; line-height: 1.5; color: #2b3552; }
.quote__meta { color: var(--muted); }

/* ---------- Fragen ---------- */

.faq__list { max-width: 54rem; border-bottom: 1px solid rgba(15, 33, 80, .2); }
.faq__item { border-top: 1px solid rgba(15, 33, 80, .2); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  min-height: 48px; padding: 1.5rem 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: clamp(1.4rem, 1.15rem + .7vw, 1.8rem); transition: transform .3s var(--ease); }
.faq__item summary:hover h3 { transform: translateX(4px); }
.faq__item summary::after {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding-bottom: 1.6rem; margin: 0; }

/* ---------- Hofstelle ---------- */

.hofstelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.hofstelle__intro h3 { font-size: 1.6rem; margin: 2.25rem 0 1rem; }
.suchprofil { margin: 0; }
.suchprofil div { padding: .8rem 0; border-top: 1px solid rgba(15, 33, 80, .18); }
.suchprofil div:last-child { border-bottom: 1px solid rgba(15, 33, 80, .18); }
.suchprofil dt { color: var(--meadow); font-weight: 700; font-size: 1rem; }
.suchprofil dd { margin: 0; }
@media (max-width: 56rem) { .hofstelle { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Wege zu den Bereichen ---------- */

.bereiche__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.bereich {
  display: grid; gap: .9rem; height: 100%; padding: 1.75rem 1.5rem 1.6rem;
  border-top: 3px solid var(--night); background: rgba(255, 253, 247, .55); color: var(--night); text-decoration: none;
  transition: background-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.bereich:hover { color: var(--night); background: var(--straw-light); transform: translateY(-4px); box-shadow: 0 14px 28px -20px rgba(15, 33, 80, .55); }
.bereich__title { font: 300 clamp(1.7rem, 1.35rem + 1vw, 2.2rem)/1.12 var(--font-display); }
.bereich__text { color: #2b3552; }
.bereich__cta { align-self: end; justify-self: start; color: var(--blue); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: transform .3s var(--ease); }
.bereich:hover .bereich__cta { transform: translateX(5px); text-decoration-thickness: 2px; color: var(--night); }

/* ---------- Formulare ---------- */

.form { display: grid; gap: 1.5rem; }
.field { min-width: 0; }
.field > label, .choices legend { display: block; font-weight: 700; margin-bottom: .45rem; }
.field__req, .field__opt { font-weight: 400; font-size: .9375rem; color: var(--muted); margin-left: .35rem; white-space: nowrap; }
.field__hint { margin: -.2rem 0 .5rem; color: var(--muted); font-size: 1rem; }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea {
  width: 100%; min-height: 50px; padding: .75rem .95rem;
  font: inherit; color: var(--night); background: #fffdf8;
  border: 1px solid #6b7488; border-radius: 3px;
  transition: border-color .2s;
}
.field input:not([type="checkbox"]):not([type="radio"]):hover, .field textarea:hover { border-color: var(--night); }
.field textarea { min-height: 8rem; resize: vertical; }
.field [aria-invalid="true"] { border: 2px solid var(--error) !important; }
.field__error { margin: .45rem 0 0; color: var(--error); font-weight: 700; font-size: 1rem; }
.field__error:empty { display: none; }
.choices { border: 0; margin: 0; padding: 0; }
.choice { display: flex; gap: .75rem; align-items: flex-start; padding: .4rem 0; min-height: 44px; cursor: pointer; }
.choice input { flex: none; width: 1.35rem; height: 1.35rem; margin: .2rem 0 0; accent-color: var(--green); }
.field--consent .choice { font-size: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.more { border-top: 1px solid rgba(15, 33, 80, .2); border-bottom: 1px solid rgba(15, 33, 80, .2); }
.more summary { display: flex; align-items: center; gap: .5rem; min-height: 52px; cursor: pointer; font-weight: 700; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before {
  content: ""; width: .55rem; height: .55rem; margin: 0 .4rem 0 .15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform .3s var(--ease);
}
.more[open] summary::before { transform: rotate(45deg); }
.more__body { display: grid; gap: 1.5rem; padding: .5rem 0 1.5rem; }
.form__summary { padding: 1.25rem 1.5rem; border: 2px solid var(--error); border-radius: 3px; background: #fff6f3; }
.form__summary h3 { font: 700 1.125rem/1.4 var(--font-text); color: var(--error); margin-bottom: .5rem; }
.form__summary ul { margin: 0; padding-left: 1.25rem; }
.form__summary a { color: var(--error); }
.form__note { margin: 0; color: var(--muted); font-size: 1rem; }
.form__status:empty { display: none; }
.form__status { margin: 0; padding: 1rem 1.25rem; border-left: 4px solid var(--straw); background: var(--straw-light); }
.form__status a { display: inline-block; margin-top: .35rem; font-weight: 700; }

/* ---------- Unterseiten ---------- */

.page-hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4rem); align-items: end;
  max-width: var(--wrap); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.page-hero h1 { font-weight: 300; font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.5rem); letter-spacing: -.02em; line-height: 1.04; margin-bottom: 1.5rem; }
.page-hero .lead { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); max-width: 34ch; }
.page-hero__art { position: relative; }
.feldrand { display: block; width: 100%; height: auto; overflow: visible; }
.feldrand path { fill: none; stroke: var(--night); stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.feldrand .soft { stroke: var(--line-soft); }
@media (max-width: 50rem) { .page-hero { grid-template-columns: minmax(0, 1fr); } .page-hero__art { max-width: 26rem; } }

.prose { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 22rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.section.prose { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.prose h2 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); }
@media (max-width: 56rem) { .prose { grid-template-columns: minmax(0, 1fr); } }
.einfach {
  padding: 1.35rem 1.5rem; background: var(--meadow-light); border-left: 4px solid var(--meadow); border-radius: 0 3px 3px 0;
  font-size: 1.1875rem; line-height: 1.65;
}
.einfach p:last-child { margin-bottom: 0; }
.einfach__title.einfach__title { font-weight: 700; font-size: 1rem; color: var(--meadow); margin-bottom: .5rem; }

.angebote h2 { margin-bottom: 2rem; }
.angebote__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.angebot { padding: 1.4rem 1.25rem 1.5rem; border-top: 3px solid var(--straw); background: rgba(255, 253, 247, .55); }
.angebot h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-size: 1.6rem; margin-bottom: .75rem; }
.angebot p { margin: 0; }
.angebote__note { margin-top: 2rem; color: var(--muted); font-size: 1rem; }
.phasen-kurz { padding-left: 1.25rem; }
.phasen-kurz li { margin-bottom: .6rem; max-width: 65ch; }

.liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.liste__intro .einfach { margin-top: 1.5rem; }
@media (max-width: 56rem) { .liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Rechtliches ---------- */

.legal { max-width: 44rem; margin: 0 auto; padding: 3rem var(--gutter) 6rem; }
.legal h1 { font-weight: 300; font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); margin-bottom: 2rem; }
.legal h2 { font-size: 1.6rem; margin: 2.75rem 0 .75rem; }
.legal p, .legal li { max-width: 65ch; }
.legal address { font-style: normal; margin-bottom: 1em; }

/* ---------- Footer: Nachtblau ---------- */

.site-footer { position: relative; margin-top: 5rem; background: var(--grain), var(--night); color: #ebe7dd; }
.site-footer__inner {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem;
  max-width: var(--wrap); margin: 0 auto; padding: 3.75rem var(--gutter) 4.25rem; font-size: 1.0625rem;
}
.site-footer__brand { display: flex; gap: 1.25rem; align-items: flex-start; }
.site-footer__brand .brand__mark { width: 2.9rem; color: #f6f3ec; }
.site-footer__brand p { max-width: 34ch; margin-bottom: .5rem; }
.site-footer__name.site-footer__name { font: 400 1.6rem/1.2 var(--font-display); color: #fff; margin-bottom: .5rem; }
.site-footer__title { font: 700 1rem/1.4 var(--font-text); color: var(--straw); margin-bottom: .75rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer a { color: #f6f3ec; }
.site-footer a:hover { color: var(--straw); }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a[aria-current="page"] { font-weight: 700; }
.site-footer :focus-visible { outline-color: var(--straw); }
@media (max-width: 50rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }

/* ---------- Bewegung anhalten (Knopf in der Kopfzeile) ---------- */

.motion-paused .puff, .motion-paused .sway, .motion-paused .bird, .motion-paused .bird__wings,
.motion-paused .chicken__head, .motion-paused .sheep__eye { animation-play-state: paused; }

/* ---------- Reduzierte Bewegung: alles fertig und ruhig ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .hero { height: 100svh; }
  .js .hero__sticky { --open: 1; --zoom: 1.08; --so: 1; --pk: 0; --sky: 1; --cs: .74; }
  .js .gate-button, .motion-toggle { display: none; }
  .js .draw { --d: 0; --f: 1; --w: 1; }
  .js [data-progress] { --p: 1; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .puff, .sway, .bird, .bird__wings, .chicken__head, .sheep__eye { animation: none !important; }
  .scene .puff--2, .scene .puff--3 { display: none; }
  .scene .puff--1 { transform: translate(6px, -22px); opacity: .7; }
  .bird--1 { transform: translate(1150px, 132px); }
  .bird--2 { transform: translate(1215px, 160px); }
  .sym-dots { display: none; }
  .sheep { transition: none; --swing: 0; }
  .is-scrolling .sheep, .sheep.is-looking { --head: var(--head-rest, 0deg); }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .button:hover, .gate-button:hover, .bereich:hover, .sym-button:hover { transform: none; }
}