/* Hero-only refinement, 18.10.2026. Existing system fonts remain provisional.
   The wood surface reuses the locally documented draft asset, without new media. */
.hero {min-height:660px;display:block;background:var(--paper)}
.hero::before {background:linear-gradient(90deg,rgba(250,249,244,.96) 0%,rgba(250,249,244,.91) 28%,rgba(250,249,244,.77) 43%,rgba(250,249,244,.22) 60%,transparent 76%)}
.hero .hero-image {object-position:65% center}
.hero .hero-content {position:relative;padding:112px 0 28px;isolation:isolate}
.hero-brandline {width:fit-content;margin-left:18px;text-align:center;font:500 italic clamp(1.35rem,1.8vw,1.7rem)/1.25 var(--character);color:var(--green);letter-spacing:-.035em;rotate:-17deg;transform-origin:left top}
.hero .hero-content h1 {max-width:660px;margin-top:16px;font:600 clamp(2.6rem,3.9vw,3.6rem)/1.04 var(--heading);letter-spacing:-.045em;text-wrap:balance;color:var(--green)}
.hero-question {max-width:610px;margin-top:16px;font:500 italic clamp(1.8rem,2.55vw,2.5rem)/1.13 var(--heading);letter-spacing:-.025em;color:var(--brick);text-wrap:balance}
.hero .hero-support {margin-top:20px;font-size:calc(1.13rem + 2px);line-height:1.4;font-weight:700;color:var(--green)}
.hero .hero-description {max-width:555px;margin-top:12px;font-size:calc(.96rem + 2px);line-height:1.65;color:var(--ink);text-wrap:pretty}
.hero-benefits {list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:max-content max-content;gap:8px 26px;width:fit-content;font-size:calc(.8rem + 2px);line-height:1.5;font-weight:600;color:var(--green)}
.hero-benefits li {position:relative;padding-left:18px}
.hero-benefits li::before {content:'✓';position:absolute;left:0;color:var(--green)}
.hero-sign {position:absolute;top:32px;left:0;display:grid;place-items:center;min-height:56px;padding:12px 23px;transform:rotate(-9deg);color:var(--green);background-color:var(--sand);background-image:url('../entwurf/phase1-1/wissen-v2.webp');background-size:660% auto;background-position:85% 11.5%;border:1px solid #a97e51;border-radius:3px 6px 4px 2px;box-shadow:0 5px 8px #49321e30,inset 0 1px 1px #fff9,inset 0 -2px 2px #57391e55;font:700 1.05rem/1.3 var(--heading);text-align:center;transform-origin:22px 10px}
.hero-sign {top:62px;min-height:60px;font-size:1.12rem;transform:rotate(-17deg)}
.hero-sign::before,.hero-sign::after {content:'';position:absolute;width:9px;height:9px;top:8px;border-radius:50%;border:1px solid #554f42;background:linear-gradient(45deg,transparent 39%,#37382f 42%,#37382f 56%,transparent 59%),radial-gradient(circle at 30% 25%,#eee6d3,#a39c87 58%,#575545);box-shadow:0 1px 2px #332d2399,inset 0 1px 1px #fff9}
.hero-sign::before {left:10px}
.hero-sign::after {right:10px}
.hero-sign span {text-shadow:0 1px 1px #fff8}
.hero .hero-scroll {display:flex;align-items:center;gap:12px;width:fit-content;min-height:44px;margin-top:26px;padding:4px 0;color:var(--green);font-size:calc(.79rem + 2px);font-weight:600;text-decoration:none;border-bottom:1px solid #0f3a2850}
.hero-scroll span {font-size:1.4rem;line-height:1;transition:transform .2s}
.hero-scroll:hover span {transform:translateY(3px)}
.hero-scroll:hover {border-color:var(--green)}
.hero-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Keep the desktop introduction near the left edge and size its light backdrop to the text. */
@media(min-width:1100px) {
 .hero {--hero-gutter:clamp(24px,3.3vw,64px)}
 .hero .hero-content {width:calc(100% - 2 * var(--hero-gutter));max-width:none;margin-inline:auto}
 .hero-sign {left:max(-36px,calc(12px - var(--hero-gutter)))}
 .hero-brandline {margin-left:max(-12px,calc(36px - var(--hero-gutter)))}
 .hero::before {background:linear-gradient(90deg,rgba(250,249,244,.96) 0,rgba(250,249,244,.91) calc(var(--hero-gutter) + 300px),rgba(250,249,244,.77) calc(var(--hero-gutter) + 540px),rgba(250,249,244,.22) calc(var(--hero-gutter) + 730px),transparent calc(var(--hero-gutter) + 920px))}
}
@media(min-width:1600px) {
 .hero {min-height:720px}
 .hero .hero-content {padding-top:124px;padding-bottom:36px}
 .hero-sign {top:62px}
 .hero .hero-content h1 {max-width:700px}
 .hero-question {max-width:650px}
 .hero .hero-description {font-size:calc(1rem + 2px);max-width:575px}
}
@media(min-width:701px) and (max-width:1099px) {
 .hero {min-height:640px}
 .hero .hero-content {padding-left:0}
 .hero .hero-content h1 {max-width:560px;font-size:3rem}
 .hero-question {max-width:500px;font-size:2rem}
 .hero .hero-description {max-width:490px}
 .hero-benefits {grid-template-columns:1fr;gap:6px}
 .hero::before {background:linear-gradient(90deg,#faf9f4f5,#faf9f4e8 38%,#faf9f4d9 62%,transparent 96%)}
}
@media(max-width:700px) {
 .hero {min-height:0}
 .hero .hero-content {padding:64px 0 26px}
 .hero .hero-picture {inset:auto 0 0;height:250px;mask-image:linear-gradient(180deg,transparent,black 28%)}
 .hero .hero-image {object-position:72% 70%}
 .hero::before {background:linear-gradient(180deg,#faf9f4eb 0%,#faf9f4ed 38%,#faf9f4e8 61%,#faf9f4b3 71%,#faf9f400 85%)}
 .hero-brandline {font-size:1.35rem;letter-spacing:-.04em}
 .hero .hero-content h1 {margin-top:14px;font-size:clamp(2rem,8.7vw,3.1rem);max-width:510px;line-height:1.06;letter-spacing:-.04em}
 .hero-question {font-size:clamp(1.5rem,6.2vw,2rem);max-width:400px;margin-top:13px;line-height:1.15}
 .hero .hero-support {font-size:calc(1rem + 2px);margin-top:17px}
 .hero .hero-description {font-size:calc(.85rem + 2px);line-height:1.58;margin-top:10px;max-width:500px}
 .hero-benefits {grid-template-columns:1fr;font-size:calc(.77rem + 2px);gap:5px;margin-top:16px}
 .hero-sign {position:relative;top:auto;left:auto;width:fit-content;max-width:calc(100% - 12px);margin:0 0 23px 4px;min-height:50px;padding:10px 22px;font-size:1.04rem;transform:rotate(-17deg)}
 .hero .hero-scroll {margin-top:164px;font-size:calc(.76rem + 2px);background:#faf9f4ed;padding:4px 10px;border-radius:3px;border-bottom:0;min-height:44px}
}

/* The handwritten greeting sits over the garden, leaving the introduction in place. */
@media(min-width:701px) {
 .hero .hero-content {padding-top:160px}
 .hero .hero-brandline {position:absolute;top:110px;left:36vw;margin:0;font-size:clamp(2rem,2.2vw,2.65rem);rotate:-12deg;text-shadow:0 1px 8px #faf9f4b3}
}
@media(min-width:701px) and (max-width:1099px) {
 .hero .hero-brandline {left:48%;top:95px;font-size:2rem}
}
@media(max-width:700px) {
 .hero .hero-brandline {margin-left:auto;margin-right:12px;font-size:1.7rem;rotate:-10deg}
 .hero .hero-content h1 {margin-top:19px}
}
/* White edging follows the letters, without a rectangular background. */
.hero .hero-brandline {
 font-weight:700;
 background:transparent;
 -webkit-text-stroke:3px #fff;
 paint-order:stroke fill;
 text-shadow:0 1px 2px #0f3a2833;
}
/* Continue the garden below the introduction, then give the next heading equal breathing room. */
.home {--hero-transition-space:clamp(64px,5.5vw,104px)}
.home .hero {padding-bottom:var(--hero-transition-space)}
.home .hero + .tools {padding-top:var(--hero-transition-space)}
.home main[data-fdg-home-motion] > section:not(.hero) {padding-block:var(--hero-transition-space)}
.home .hero .hero-benefits + .hero-description {margin-top:26px}
.home .hero .hero-scroll {margin-top:38px;font-size:1.06rem;font-weight:800;color:var(--brick);border-bottom-color:var(--brick)}
.home .hero .hero-scroll span {font-size:1.7rem;font-weight:800}
@media(max-width:700px) {
 .home {--hero-transition-space:48px}
 .home .hero .hero-picture {height:calc(250px + var(--hero-transition-space))}
 .home .hero .hero-scroll {margin-top:176px;font-size:1rem}
}