/* Phase 1.1: reference proportions, natural light and a continuous garden setting. */
.hero {position:relative;isolation:isolate;overflow:hidden;background:#d6ddad;min-height:370px;display:flex;align-items:center}
.hero::after {content:"";position:absolute;inset:0;z-index:-3;background:url('../entwurf/phase1-1/gartenlicht.webp') center/cover;filter:blur(3px);transform:scale(1.03)}
.hero-image {position:absolute;inset:0 6% 0 auto;z-index:-2;width:auto;max-width:none;height:100%;aspect-ratio:281/251;object-fit:contain;mask-image:linear-gradient(90deg,transparent,black 19%,black 82%,transparent)}
.hero::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#faf9f4d9 0%,#faf9f4c9 33%,#faf9f469 52%,transparent 70%)}
.hero-content {padding-block:28px}.hero h1 {font-family:var(--character);font-style:italic;font-size:clamp(2.6rem,4.5vw,4.2rem);font-weight:500;letter-spacing:-.055em;line-height:1.13;max-width:650px}.hero h1 span {display:block}
.benefits {list-style:none;padding:0;margin:18px 0;font-weight:500;font-size:.98rem;line-height:1.7}.benefits li::before {content:"✓";font-size:1.15rem;font-weight:700;margin-right:10px}.hero-actions {display:flex;flex-wrap:wrap;gap:12px}
.tools {padding-block:24px 32px}.section-heading {text-align:center;margin-bottom:20px}.section-heading h2 {font:700 clamp(1.55rem,2.2vw,2rem)/1.2 var(--body)}.section-heading p {margin-top:5px;color:var(--muted);font-size:.9rem}
.tool-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.tool-card {background:#fffefb;border:1px solid #e0e1d5;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 6px #0f3a280b}
.tool-picture {position:relative;isolation:isolate;min-height:145px;background:var(--sage);display:grid;align-items:center;overflow:hidden}.tool-picture img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center}
.tool-picture::after {content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#16322238,transparent 72%)}
.tool-picture p {position:relative;z-index:1;justify-self:start;margin:18px 14px 22px;max-width:calc(100% - 25px);color:white;font:500 italic clamp(1.15rem,1.8vw,1.65rem)/1.23 var(--character);letter-spacing:-.045em;transform:rotate(-6deg);transform-origin:left center;text-shadow:0 1px 2px #0f3a28,1px 0 1px #0f3a28,-1px 0 1px #0f3a28;paint-order:stroke fill;-webkit-text-stroke:.65px #0f3a28}
.tool-picture p span {display:block}.tool-card:nth-child(2) .tool-picture p {font-size:clamp(1.05rem,1.65vw,1.5rem);line-height:1.2}
.tool-body {position:relative;padding:27px 15px 15px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;flex:1;text-align:center;justify-items:center}.tool-symbol {position:absolute;left:calc(50% - 24px);top:-25px;width:48px;height:48px;border-radius:50%;display:grid;place-content:center;background:#fffefb;color:var(--green)}.tool-symbol svg {width:30px;height:30px;stroke-width:1.6}
.tool-body h3 {font-size:1.24rem;line-height:1.15;min-height:2.3em;max-width:240px}.tool-body p {font-size:.82rem;line-height:1.45;margin:0;max-width:260px}.tool-body .button {font-size:.77rem;min-height:38px;padding:.5rem .9rem;gap:.55rem;align-self:end;width:100%}
.course {padding-block:30px 32px;background:linear-gradient(110deg,#f2f3e9,var(--paper) 68%)}.course-top {display:grid;grid-template-columns:.9fr 1.4fr;align-items:center;gap:18px}.course-copy h2 {font-size:clamp(2.2rem,3.6vw,3.4rem);color:var(--brick);letter-spacing:-.04em;line-height:1.02}.course-copy h2 span {display:block}.course-subtitle {font:600 clamp(1.35rem,2.05vw,1.9rem)/1.12 var(--heading);margin-top:12px!important;max-width:420px}.course-copy>p:not(.course-subtitle) {max-width:365px;margin-block:16px 20px;font-size:.94rem}.course-image img {width:100%;border-radius:7px;aspect-ratio:1.72;object-fit:cover}
.course-path {display:grid;grid-template-columns:minmax(0,3.7fr) 50px minmax(0,1.45fr);gap:14px;align-items:start;margin-top:28px}.steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:0}.step {position:relative;text-align:center;padding:0 4px}.step-number {background:var(--green);color:var(--paper);border-radius:50%;display:grid;place-content:center;width:32px;height:32px;margin:0 auto 10px;font:1.15rem var(--heading)}.step:nth-child(2) .step-number {background:#586b50}.step:nth-child(3) .step-number {background:var(--brick)}.step-symbol {display:block;margin:0 auto 10px;color:var(--green)}.step-symbol svg {width:42px;height:42px;stroke-width:1.6}.step:nth-child(3) .step-symbol {color:var(--brick)}.step h3 {font-size:1.04rem;line-height:1.2;min-height:0}.step-detail {margin-top:8px}.step-detail p {font-size:.81rem;line-height:1.45}.step-detail p+p {margin-top:7px}.step:not(:last-child)::after {content:"→";position:absolute;right:-19px;top:62px;font-size:1.5rem;color:var(--green)}.equals {font:900 4.6rem/1 var(--body);text-align:center;color:var(--green);align-self:center}.course-result {align-self:center}.course-result img {width:100%;border-radius:8px;object-fit:contain}
.knowledge {position:relative;isolation:isolate;overflow:hidden;background:var(--sand);padding-block:34px 24px}.knowledge-image {position:absolute;z-index:-2;right:0;top:0;height:100%;width:48%;object-fit:cover;object-position:right center;mask-image:linear-gradient(90deg,transparent,black 28%)}.knowledge::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f4eddf 0%,#f4eddfed 35%,#f4eddf86 57%,transparent 77%)}.knowledge-intro {min-height:215px;display:flex;align-items:center}.knowledge-intro>div {width:59%}.knowledge .eyebrow {font-size:.71rem;letter-spacing:.1em;color:var(--green)}.knowledge h2 {margin-block:9px 14px;font-size:clamp(2rem,3.3vw,3.1rem)}.knowledge-intro p {max-width:610px;font-size:.94rem}.knowledge-intro .button {margin-top:18px}.topics {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;padding:0;list-style:none;margin:22px 0 0}.topics li {background:#faf9f4f5;border:1px solid #eee9df;border-radius:6px;padding:13px 7px;text-align:center;font:600 .78rem/1.25 var(--body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:94px}.topics svg {width:29px;height:29px;stroke-width:1.6;color:var(--green)}
.expertise {padding-block:34px;background:linear-gradient(110deg,#eff2e8,#faf9f4 62%)}.expertise-layout {display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}.expertise h2 {font-size:clamp(1.7rem,2.65vw,2.45rem);margin-bottom:16px;line-height:1.13}.expertise h2 span {display:block}.expertise p {max-width:550px;font-size:.9rem}.principles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;text-align:center}.principles>div {padding-inline:17px}.principles>div+div {border-left:1px solid #7b8f7266}.principles svg {width:40px;height:40px;stroke-width:1.6;color:var(--green);margin-bottom:9px}.principles h3 {font-size:1.13rem;margin-bottom:9px}.principles p {font-size:.78rem;line-height:1.45}
@media(min-width:1600px) {.hero {min-height:420px}.hero-image {right:14%}.hero h1 {font-size:4.5rem}}
@media(max-width:1099px) {
 .hero {min-height:340px}.hero h1 {font-size:3.2rem;max-width:560px}.hero-image {right:3%;width:auto}.tool-grid {gap:10px}.tool-picture {min-height:125px}.tool-picture p {font-size:1.08rem;margin-left:10px}.tool-card:nth-child(2) .tool-picture p {font-size:1rem}.tool-body {padding-inline:11px;gap:10px}.tool-body h3 {font-size:1.08rem}.tool-body p {font-size:.77rem}.tool-body .button {font-size:.7rem;padding-inline:.6rem}.course-path {grid-template-columns:minmax(0,3.7fr) 40px minmax(0,1.5fr);gap:7px}.steps {gap:12px}.step {padding:0}.step h3 {font-size:.92rem}.step-detail p {font-size:.7rem}.step:not(:last-child)::after {right:-13px;font-size:1.2rem}.equals {font-size:3.5rem}.knowledge-intro>div {width:65%}.topics {grid-template-columns:repeat(4,minmax(0,1fr))}.expertise-layout {grid-template-columns:1fr;gap:24px}.expertise h2 span {display:inline}.expertise p {max-width:760px}.principles>div {padding-inline:20px}
}
@media(max-width:700px) {
 .hero {min-height:530px;align-items:flex-start}.hero-content {padding-block:26px 245px}.hero h1 {font-size:clamp(2.25rem,9.6vw,3rem);max-width:none;line-height:1.15}.hero::after {background-size:auto 100%;filter:blur(2px)}.hero-image {inset:auto 0 0 auto;width:auto;height:260px;mask-image:linear-gradient(180deg,transparent,black 18%),linear-gradient(90deg,transparent,black 18%,black 82%,transparent);mask-composite:intersect}.hero::before {background:linear-gradient(180deg,#faf9f4e8,#faf9f4cf 44%,#faf9f400 75%)}.benefits {font-size:.9rem;margin:14px 0 17px;line-height:1.8}.hero-actions {gap:8px}.hero-actions .button {font-size:.8rem;min-height:42px;padding:.6rem .9rem;gap:.65rem}
 .tools {padding-block:24px 30px}.section-heading {margin-bottom:18px}.section-heading h2 {font-size:1.5rem}.section-heading p {font-size:.82rem}.tool-grid {grid-template-columns:1fr;gap:20px}.tool-picture {min-height:165px}.tool-picture img {object-position:60% 43%}.tool-picture p {font-size:1.45rem;line-height:1.23;margin:20px 20px 28px}.tool-card:nth-child(2) .tool-picture p {font-size:1.3rem}.tool-body {padding:27px 20px 18px;gap:10px}.tool-body h3 {font-size:1.37rem;min-height:0;max-width:260px}.tool-body p {font-size:.86rem;max-width:280px}.tool-body .button {font-size:.82rem;width:auto;min-height:42px;padding:.6rem 1.1rem}
 .course {padding-block:28px}.course-top {grid-template-columns:1fr;gap:24px}.course-copy h2 {font-size:2.6rem;max-width:370px}.course-subtitle {font-size:1.65rem}.course-copy>p:not(.course-subtitle) {max-width:none;font-size:.93rem}.course-path {grid-template-columns:1fr;gap:16px;margin-top:28px}.steps {grid-template-columns:1fr;gap:32px}.step {display:grid;grid-template-columns:38px 42px 1fr;column-gap:12px;align-items:center;text-align:left;padding:0 6px}.step-number {margin:0}.step-symbol {margin:0}.step h3 {font-size:1.3rem;min-height:0}.step-detail {grid-column:2/-1;margin-top:12px}.step-detail p {font-size:.88rem}.step:not(:last-child)::after {content:"↓";top:auto;bottom:-29px;left:13px;right:auto;font-size:1.3rem}.equals {justify-self:center;font-size:3.8rem}.course-result {width:100%;max-width:430px;justify-self:center}.course-result img {max-height:none}
 .knowledge {padding-block:28px 22px}.knowledge-image {width:100%;height:270px;top:auto;bottom:225px;object-fit:cover;object-position:right center;opacity:.6;mask-image:linear-gradient(180deg,transparent,black 25%,transparent)}.knowledge::before {background:linear-gradient(180deg,#f4eddfed,#f4eddfb3)}.knowledge-intro {min-height:0}.knowledge-intro>div {width:100%}.knowledge h2 {font-size:2.25rem}.knowledge-intro p {font-size:.9rem}.knowledge-intro .button {font-size:.86rem}.topics {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:25px}.topics li {min-height:86px;font-size:.85rem;padding:12px}.topics svg {width:29px;height:29px}
 .expertise {padding-block:28px}.expertise-layout {gap:24px}.expertise h2 {font-size:1.85rem}.expertise h2 span {display:block}.expertise p {font-size:.87rem}.principles {grid-template-columns:1fr;gap:18px;text-align:left}.principles>div {display:grid;grid-template-columns:40px 1fr;column-gap:17px;align-items:start;padding:0}.principles>div+div {border-left:0;border-top:1px solid #7b8f7244;padding-top:18px}.principles span {grid-row:1/3}.principles svg {margin:0;width:36px;height:36px}.principles h3 {font-size:1.12rem;margin-bottom:5px}.principles p {font-size:.84rem;grid-column:2}
}
/* Second pass: complete restored draft photography instead of magnified fragments. */
.hero{min-height:390px;background:var(--sand)}
.hero::after{display:none}
.hero-image{inset:0;width:100%;max-width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:62% center;mask-image:none;mask-composite:add}
.hero::before{background:linear-gradient(90deg,#faf9f466 0%,#faf9f44d 34%,#faf9f40d 56%,transparent 68%)}
.hero-content{padding-left:clamp(24px,5.5vw,90px);padding-block:28px}
.hero h1{font-size:clamp(2.8rem,4.5vw,4.25rem);letter-spacing:-.05em;line-height:1.12}
.hero h1 span+span{padding-left:32px}
.tool-picture img{object-position:center;filter:none}
.tool-picture::after{background:linear-gradient(90deg,#0f3a281f,transparent 58%)}
.tool-picture p{-webkit-text-stroke:0;paint-order:normal;text-shadow:0 1px 2px #10271ae6,0 0 6px #10271a80;line-height:1.22}
.knowledge-scene{position:absolute;z-index:-2;right:0;top:0;width:53%;aspect-ratio:2/1;mask-image:linear-gradient(90deg,transparent,black 20%)}
.knowledge-scene>img{width:100%;height:100%;object-fit:cover}
.sign-labels span{position:absolute;left:64%;width:28%;height:10.5%;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-2deg);color:var(--green);font:600 clamp(.85rem,1.25vw,1.2rem)/1.1 var(--heading)}
.sign-labels span:nth-child(1){top:9.5%}.sign-labels span:nth-child(2){top:20.5%}.sign-labels span:nth-child(3){top:31.5%}.sign-labels span:nth-child(4){top:42.5%;font-size:clamp(.65rem,1.05vw,1rem)}.sign-labels span:nth-child(5){top:53.5%}.sign-labels span:nth-child(6){top:64.5%}
@media(min-width:1600px){.hero{min-height:440px}.hero-image{right:0;width:100%}}
@media(max-width:1099px) and (min-width:701px){.hero-content{padding-left:30px}.hero-image{right:0;width:100%}.hero h1{font-size:3.2rem}.hero::before{background:linear-gradient(90deg,#faf9f4a6,#faf9f45c 44%,transparent 74%)}}
@media(max-width:700px){
 .hero{min-height:560px;align-items:flex-start}.hero-content{padding:28px 0 225px}.hero h1{font-size:clamp(2.1rem,8.8vw,2.8rem);line-height:1.17}.hero h1 span+span{padding-left:15px}
 .hero-image{inset:0;right:0;width:100%;height:100%;object-fit:cover;object-position:66% center;mask-image:none}
 .hero::before{background:linear-gradient(180deg,#faf9f4ed 0%,#faf9f4d9 38%,#faf9f45c 57%,transparent 78%)}
 .knowledge-scene{width:130%;right:-30%;top:100px;opacity:.2;mask-image:linear-gradient(180deg,transparent,black 30%,transparent)}.sign-labels{display:none}
}
.hero-image{object-position:62% 38%}@media(max-width:700px){.hero-image{object-position:74% center}}
.hero-picture{position:absolute;inset:0;z-index:-2}.hero-picture .hero-image{z-index:auto}
/* Feedback 18.10.2026: clearer orientation and a more generous rhythm. */
.hero {min-height:510px}
.hero-content {padding-block:48px; padding-left:clamp(24px,5.5vw,90px)}
.hero::before {background:linear-gradient(90deg,#faf9f4e0 0%,#faf9f4c2 35%,#faf9f440 57%,transparent 75%)}
.hero-intro {max-width:540px;margin-top:26px;font-size:1.13rem;font-weight:600;color:var(--green)}
.benefits {max-width:535px;margin:21px 0 18px;display:grid;gap:12px;font-size:.98rem;line-height:1.55}
.benefits li {position:relative;padding-left:26px}
.benefits li::before {position:absolute;left:0;top:0;margin:0;color:var(--green)}
.hero-outlook {font-size:.91rem;color:var(--muted);max-width:520px}
.tools {padding-block:54px 60px;background:linear-gradient(115deg,#f4eddf,var(--sand));border-block:1px solid #dacebb80}
.section-heading {margin-bottom:34px}
.section-heading p {margin-top:13px;font-size:.96rem}
.tool-grid {gap:24px}
.tool-picture {min-height:165px;align-items:start}
.tool-picture p,.tool-card:nth-child(2) .tool-picture p {margin:17px 14px 0;font-size:clamp(.98rem,1.35vw,1.22rem);font-weight:700;line-height:1.3;letter-spacing:-.035em;transform:rotate(-17deg);max-width:80%;text-shadow:0 1px 3px #10271a,0 0 8px #10271a99}
.tool-picture::after {background:linear-gradient(135deg,#0f3a283b,transparent 62%)}
.tool-body {padding:34px 20px 23px;gap:18px}
.tool-body p {font-size:.88rem;line-height:1.6}
.tool-body .button {min-height:42px}
.course {padding-block:58px 60px}
.course-top {gap:36px}
.course-path {margin-top:46px}
.knowledge {padding-block:52px 44px}
.topics {margin-top:32px;gap:12px}
.expertise {padding-block:54px}
@media(min-width:1600px) {.hero {min-height:550px}}
@media(min-width:701px) and (max-width:1099px) {
 .hero-content {padding-left:24px}.hero h1 {font-size:3rem}
 .hero-intro,.benefits {max-width:500px}
 .tool-grid {gap:16px}.tool-body {padding-inline:13px}
 .tool-body h3 {font-size:1.12rem}.tool-body p {font-size:.82rem}
 .tool-picture p,.tool-card:nth-child(2) .tool-picture p {font-size:1rem;margin-left:11px}
}
@media(max-width:700px) {
 .hero {min-height:680px}
 .hero-content {padding:38px 0 250px}
 .hero-intro {font-size:1rem;margin-top:24px;max-width:340px}
 .benefits {font-size:.9rem;gap:12px;margin-block:21px 17px;max-width:350px}
 .hero-outlook {font-size:.82rem;max-width:330px}
 .hero::before {background:linear-gradient(180deg,#faf9f4f2 0%,#faf9f4e8 47%,#faf9f46b 66%,transparent 85%)}
 .tools {padding-block:40px 44px}.section-heading {margin-bottom:28px}.section-heading p {font-size:.9rem;margin-top:12px}
 .tool-grid {gap:28px}.tool-picture {min-height:175px}
 .tool-picture p,.tool-card:nth-child(2) .tool-picture p {font-size:1.15rem;margin:19px 19px 0}
 .tool-body {padding:32px 22px 24px;gap:16px}.tool-body p {font-size:.9rem}
 .course {padding-block:44px}.course-top {gap:30px}.course-path {margin-top:36px}
 .knowledge {padding-block:42px 36px}.expertise {padding-block:42px}
 .topics {gap:12px;margin-top:30px}
}

/* Bildtexte im gleichen Winkel wie das Schild; Abstand schuetzt vor Beschnitt. */
.tool-picture p,.tool-card:nth-child(2) .tool-picture p {margin-top:45px}

/* Zurueckhaltender Verfuegbarkeitshinweis in den bestehenden Markenfarben. */
.tool-card--soon .tool-picture,
.course-image--soon {position:relative;isolation:isolate}
.tool-card--soon .tool-picture::after,
.course-image--soon::after {
 content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(180deg,rgba(250,249,244,.12),rgba(233,220,203,.58));
 pointer-events:none;
}
.tool-soon-label {
 position:absolute;z-index:2;right:14px;bottom:16px;
 max-width:calc(100% - 28px);padding:10px 17px;border-radius:24px;
 background:var(--green);color:var(--paper);
 border:1px solid rgba(250,249,244,.65);
 font:600 .86rem/1.3 var(--body);text-align:center;
 box-shadow:0 3px 12px #0f3a2826;
}
.tool-card--soon .button:disabled {cursor:default;opacity:.65}

.course-image--soon {border-radius:7px;overflow:visible}
.course-image--soon::after {border-radius:inherit}

/* Kursankuendigung: oben links ueber dem Bildrand, gleicher Winkel wie das Hero-Schild. */
.course-image--soon .tool-soon-label {
 top:-12px;left:-44px;right:auto;bottom:auto;
 width:250px;max-width:none;padding:12px 16px;
 border-radius:12px;
 font:700 2.75rem/1.08 var(--heading);
 transform:rotate(-17deg);transform-origin:top left;
 box-shadow:0 5px 14px #0f3a2840;
}
@media(max-width:400px) {
 .course-image--soon .tool-soon-label {
  width:210px;left:-8px;right:auto;top:-8px;padding:10px;
  font-size:2.58rem;
 }
}

/* Complete course explanations: retain readable type and natural row height. */
.course .step-detail p {font-size:.88rem;line-height:1.5;overflow-wrap:break-word}
@media(min-width:901px){.course .step h3{min-height:2.4em}}
@media(min-width:701px) and (max-width:1099px){
 .course .course-path{grid-template-columns:1fr;gap:18px}
 .course .equals{justify-self:center}
 .course .course-result{width:100%;max-width:430px;justify-self:center}
}
@media(min-width:701px) and (max-width:900px){
 .course .steps{grid-template-columns:1fr;gap:32px}
 .course .step{display:grid;grid-template-columns:38px 42px 1fr;column-gap:12px;align-items:center;text-align:left;padding:0 6px}
 .course .step-number,.course .step-symbol{margin:0}
 .course .step h3{font-size:1.3rem;min-height:0}
 .course .step-detail{grid-column:2/-1;margin-top:12px}
 .course .step:not(:last-child)::after{content:"↓";top:auto;bottom:-29px;left:13px;right:auto;font-size:1.3rem}
}