:root {
  --plum: #9f6255;
  --plum-dark: #493631;
  --rose: #b96f60;
  --blush: #dfc8ba;
  --cream: #f1e4d7;
  --ink: #3f332f;
  --muted: #66544d;
  --sage: #eadb9f;
  --sage-deep: #805044;
  --sage-mid: #f3ecd3;
  --sage-light: #e8dcc6;
  --vanilla: #e5d2c4;
  --bronze: #a97858;
  --petal: #d9bdad;
  --greige: #d8cbbb;
  --line: rgba(79, 62, 58, .22);
  --serif: "Nunito", Arial, sans-serif;
  --sans: "Nunito", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #f1e4d7; font-family: var(--sans); font-size: 1rem; line-height: 1.7; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(142,85,76,.5); outline-offset: 4px; border-radius: 4px; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 20; background: #fff4ea; padding: .7rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.site-header { height: 92px; padding: 0 clamp(1.25rem, 4vw, 5rem); display: flex; align-items: center; justify-content: space-between; background: rgba(241,228,215,.94); backdrop-filter: blur(15px); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(93,68,58,.12); }
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.1; }
.brand-logo { width: clamp(14rem, 18vw, 17rem); height: auto; max-height: 5.1rem; object-fit: contain; flex: none; filter: drop-shadow(0 3px 5px rgba(101,72,63,.08)); }
.site-header .header-logo { width: clamp(19rem, 30vw, 27rem); max-height: 4.9rem; object-position: left center; filter: none; }
.brand-copy { display: flex; flex-direction: column; }
.brand strong { display: block; font-size: .9rem; letter-spacing: .22em; }
.brand small { display: block; margin-top: .3rem; color: var(--muted); font-size: .72rem; letter-spacing: .04em; }
.site-header .brand-copy small { margin-top: .12rem; }
.brand-name { text-transform: uppercase; letter-spacing: .12em !important; }
.brand-tagline { color: #78654f !important; font-style: italic; }
.site-header nav, footer nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.5vw, 2.5rem); }
.site-header nav a { text-decoration: none; font-size: .9rem; font-weight: 500; }
.site-header nav a:not(.nav-cta):hover { color: var(--plum); }
.site-header nav a.active { color: var(--sage-deep); font-weight: 700; }
.nav-cta { border: 1px solid rgba(111,76,55,.38); color: var(--plum-dark); background: #fbf4eb; padding: .65rem 1.2rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(111,76,55,.09); }
.nav-cta:hover { background: #f8eee4; color: var(--plum-dark); }
.menu-toggle { display: none; border: 0; background: none; color: var(--plum); font: 600 .9rem var(--sans); }
.hero { min-height: calc(100svh - 92px); position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); overflow: hidden; background: radial-gradient(circle at 13% 12%, rgba(185,111,96,.30) 0, rgba(224,190,170,.34) 21%, transparent 44%), linear-gradient(135deg, #f4e9dc 0%, #e4cebd 52%, #cfaa91 100%); }
.hero::before { content: ""; position: absolute; z-index: 1; left: -10rem; top: -17rem; width: 38rem; height: 52rem; background: linear-gradient(170deg, rgba(255,235,211,.58), rgba(201,125,112,.04)); clip-path: polygon(42% 0, 61% 0, 100% 100%, 0 100%); transform: rotate(17deg); pointer-events: none; }
.hero-image { grid-column: 2; background: linear-gradient(90deg, var(--blush) 0%, rgba(231,207,192,.22) 24%, rgba(255,242,231,.02) 100%), url("images/praxis-hero-olive-leaves.png") center right/cover no-repeat; min-height: 680px; }
.hero-copy { position: absolute; z-index: 2; width: min(720px, 55vw); left: clamp(1.5rem, 7vw, 8rem); top: 50%; transform: translateY(-54%); }
.eyebrow { margin: 0 0 1.3rem; color: var(--sage-deep); font-size: .78rem; font-weight: 600; line-height: 1.45; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow,
h3,
.life-stage-label,
.framework strong,
.topics span,
.values span {
  font-family: "Alata", Arial, sans-serif;
}
h1, h2, h3, blockquote { font-family: var(--serif); font-weight: 300; }
h1 { margin: 0; color: var(--plum-dark); font-size: clamp(3.7rem, 6.3vw, 6.8rem); line-height: 1.02; letter-spacing: -.012em; }
h1 em { color: var(--plum); font-weight: 300; }
.lead { max-width: 610px; margin: 2.2rem 0 0; color: #5d4f4b; font-size: clamp(1.05rem, 1.35vw, 1.25rem); }
.hero-actions { display: flex; align-items: center; gap: 1.35rem; margin-top: 2.3rem; }
.hero-action-links { display: flex; align-items: flex-start; flex-direction: column; gap: 1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.55rem; border-radius: 999px; text-decoration: none; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: #fbf4eb; color: var(--plum-dark); border: 1px solid rgba(111,76,55,.38); box-shadow: 0 12px 28px rgba(111,76,55,.15); }
.button.primary:hover { background: #f8eee4; }
.text-link { text-underline-offset: .4rem; text-decoration-thickness: 1px; font-weight: 600; }
.availability { position: absolute; right: clamp(1.5rem, 4vw, 5rem); bottom: 2.5rem; z-index: 3; display: flex; align-items: flex-start; gap: .65rem; padding: 1rem 1.2rem; background: rgba(247,238,228,.96); border: 1px solid rgba(124,92,73,.22); border-radius: 14px; box-shadow: 0 15px 40px rgba(79,62,58,.14); }
.availability p { margin: 0; font-size: .84rem; line-height: 1.5; }
.availability span { color: var(--muted); }
.dot { margin-top: .42rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sage); }
.reassurance { padding: 1.15rem clamp(1.5rem, 8vw, 9rem); text-align: center; background: #dfc9b7; }
.reassurance p { margin: 0 auto; max-width: 850px; color: #62534f; font-size: .98rem; font-weight: 600; }
.intro { padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 8vw, 9rem) clamp(4rem, 7vw, 7rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 9rem); align-items: end; background: linear-gradient(180deg, #f2e7da 0%, #dfc7b5 100%); }
h2 { margin: 0; color: var(--plum-dark); font-size: clamp(2.55rem, 4.5vw, 4.75rem); line-height: 1.1; letter-spacing: -.012em; }
.intro > p { margin: 0 0 .35rem; max-width: 590px; color: var(--muted); font-size: 1.08rem; }
.intro-signs { max-width: 610px; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }
.intro-signs > p { margin: 0; }
.intro-signs > p:last-child { margin-top: 1.35rem; max-width: 560px; }
.intro-signs ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.intro-signs li { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: start; gap: .8rem; margin: .75rem 0; }
.intro-signs li::before { content: none; }
.intro-sign-icon { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; color: #a95645; background: rgba(255,248,241,.64); border: 1px solid rgba(169,86,69,.2); border-radius: 50%; }
.intro-sign-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.topics { padding: 0 clamp(1.5rem, 8vw, 9rem) clamp(6rem, 10vw, 10rem); display: grid; grid-template-columns: repeat(3, 1fr); background: linear-gradient(180deg, #dfc7b5 0%, #eadbcf 72%, #d3b39e 100%); }
.topics article { padding: 1.8rem clamp(1rem, 2vw, 2rem); }
.topics article:nth-child(3n+1) { padding-left: 0; }
.topics article:nth-child(3n) { border-right: 0; }
.topics span, .values span { color: var(--sage-deep); font-size: .75rem; font-weight: 600; letter-spacing: .12em; }
h3 { margin: 1.25rem 0 .7rem; color: var(--plum-dark); font-size: 1.65rem; line-height: 1.2; }
.topics p, .values p { margin: 0; color: var(--muted); font-size: .94rem; }
.life-stages { padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 8vw, 9rem); background: linear-gradient(135deg, #e8d8ca 0%, #eee1b7 55%, #dfc6b4 100%); }
.life-stages-head { max-width: 900px; }
.life-stages-head > p:last-child { max-width: 760px; margin: 1.7rem 0 0; color: var(--muted); font-size: 1.05rem; }
.life-stage-grid { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.life-stage-grid article { padding: clamp(2rem, 4vw, 3.4rem); border: 1px solid var(--line); border-radius: 4px 34px 4px 4px; box-shadow: 0 18px 45px rgba(91,62,48,.11); }
.life-stage-young { background: linear-gradient(145deg, rgba(239,229,190,.94), rgba(250,247,236,.92)); }
.life-stage-adult { background: linear-gradient(145deg, rgba(247,232,222,.96), rgba(249,242,235,.92)); }
.life-stage-older { background: linear-gradient(145deg, rgba(244,233,220,.96), rgba(217,188,170,.9)); }
.life-stage-label { color: var(--sage-deep); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.life-stage-grid h3 { margin-top: 1rem; font-size: clamp(1.65rem, 2.5vw, 2.35rem); }
.life-stage-grid p { color: var(--muted); }
.life-stage-grid .experience { margin: 1.5rem 0 0; padding-top: 1.2rem; font-size: .92rem; font-style: italic; }
.approach { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(105deg, #c98f7f 0%, #dfc6b7 34%, #e8ddb4 70%, #d7baa8 100%); color: var(--ink); }
.therapy-path { min-height: 680px; padding: clamp(3rem, 7vw, 7rem); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; color: var(--plum-dark); background: radial-gradient(circle at 18% 18%, rgba(255,229,217,.7), transparent 42%); }
.therapy-path .eyebrow { color: #fff8ef; }
.therapy-path h2 { font-size: clamp(3rem, 5vw, 5.6rem); line-height: 1.02; }
.therapy-path h2 em { color: var(--plum); font-style: normal; }
.therapy-path ol { list-style: none; margin: 3rem 0 0; padding: 0; max-width: 650px; }
.therapy-path li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.15rem 0; }
.therapy-path li > span { color: var(--sage-deep); font-size: .75rem; font-weight: 600; letter-spacing: .12em; }
.therapy-path li strong { display: block; margin-bottom: .2rem; font-size: 1.08rem; }
.therapy-path li p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.approach-copy { padding: clamp(4rem, 8vw, 8rem); align-self: stretch; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.approach-copy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 32%, rgba(247,230,183,.58), transparent 72%); pointer-events: none; }
.approach-copy > * { position: relative; z-index: 1; }
.approach .eyebrow { color: #906f3f; }
.approach h2 { color: var(--plum-dark); font-size: clamp(2.8rem, 4.3vw, 4.8rem); }
.approach-copy > p:not(.eyebrow) { max-width: 620px; margin: 2rem 0; color: var(--muted); }
.approach ul { list-style: none; padding: 0; margin: 2rem 0 0; }
.approach li { padding: 1.1rem 0; }
.approach li strong { display: block; margin-bottom: .2rem; font-size: 1.08rem; }
.approach li p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.quote-band { min-height: 150px; padding: 2.7rem clamp(1.5rem, 8vw, 9rem); display: grid; place-items: center; text-align: center; overflow: hidden; position: relative; }
.quote-band blockquote { position: relative; z-index: 1; margin: 0; max-width: 900px; color: var(--plum-dark); font-family: "Caveat", cursive; font-size: clamp(1.55rem, 2.35vw, 2.3rem); font-style: italic; font-weight: 600; line-height: 1.35; letter-spacing: .01em; }
.quote-path { background: radial-gradient(circle at 18% 30%, rgba(211,177,125,.42), transparent 30%), linear-gradient(120deg, #e9dacd, #eee2ba); }
.quote-future { background: radial-gradient(circle at 82% 18%, rgba(185,111,96,.28), transparent 29%), linear-gradient(120deg, #e7d7a8, #dcc2b1); }
.quote-future blockquote { font-size: clamp(1.45rem, 2.1vw, 2.1rem); }
.quote-wrap { width: fit-content; max-width: 900px; }
.quote-translation { margin: .45rem 0 0 auto; max-width: 34rem; color: var(--muted); font-size: .85rem; font-style: italic; line-height: 1.45; text-align: right; }
.about { padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 8vw, 9rem); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(4rem, 9vw, 10rem); background: linear-gradient(135deg, #e6d8b4 0%, #e2d4c6 52%, #d6b5a3 100%); }
.about-copy { max-width: 560px; }
.about-copy h2 { font-size: clamp(3rem, 4.5vw, 5rem); }
.role { margin: .8rem 0 1.7rem; color: var(--sage-deep); font-weight: 600; }
.iful-link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22rem; }
.iful-link:hover { color: var(--plum-dark); }
.training-note { margin: 0 0 1.7rem; padding: 1.35rem 1.5rem; background: rgba(255,248,239,.68); border-left: 3px solid rgba(142,85,76,.45); border-radius: 0 18px 18px 0; }
.training-note h3 { margin: 0 0 .65rem; font-size: 1.2rem; }
.training-note p { margin: 0 0 .75rem; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.training-note p:last-child { margin-bottom: 0; }
.info-teaser { display: block; margin: 0 0 1.7rem; padding: 1.1rem 1.3rem; text-decoration: none; background: rgba(255,248,239,.68); border-left: 3px solid rgba(142,85,76,.45); border-radius: 0 18px 18px 0; }
.info-teaser strong, .info-teaser span { display: block; }
.info-teaser span { margin-top: .2rem; color: var(--muted); font-size: .9rem; }
.info-teaser:hover { background: rgba(255,248,239,.94); }
.about-copy > p:not(.eyebrow):not(.role) { margin: 0 0 1.15rem; color: var(--muted); line-height: 1.72; }
.about-copy .text-link { display: inline-block; margin-top: 1rem; }
.about-side { width: 100%; max-width: 450px; justify-self: end; align-self: start; }
.portrait { margin: 0 0 2.2rem; overflow: hidden; border-radius: 4px 46px 4px 4px; background: rgba(255,248,239,.55); box-shadow: 0 24px 60px rgba(79,62,58,.16); }
.portrait img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.values { align-self: center; }
.values > div { display: grid; grid-template-columns: 50px 1fr 1.15fr; gap: 1rem; align-items: baseline; padding: 1.7rem 0; }
.values h3 { margin: 0; }
.guidance { padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 8vw, 9rem); background: radial-gradient(circle at 82% 18%, rgba(227,191,113,.42), transparent 28%), linear-gradient(135deg, #eadfb9 0%, #e9dbcf 58%, #e5cfbb 100%); }
.guidance-intro { max-width: 880px; }
.guidance-intro > p:not(.eyebrow) { margin: 1.6rem 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.guidance-panels { margin-top: 3rem; }
.guidance-portrait { width: 100%; max-width: 300px; height: auto; aspect-ratio: 9 / 8; margin: 0; justify-self: end; overflow: hidden; border-radius: 4px 28px 4px 4px; box-shadow: 0 16px 38px rgba(111,76,55,.12); }
.guidance-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.guidance-card { height: 100%; padding: clamp(2.4rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; background: rgba(255,250,243,.84); border: 1px solid rgba(94,65,52,.14); border-radius: 4px 38px 4px 4px; box-shadow: 0 22px 55px rgba(91,62,48,.13); }
.guidance-card h3 { margin: 0 0 1.7rem; font-size: clamp(1.9rem, 2.5vw, 2.55rem); line-height: 1.25; }
.guidance-card ul { margin: 0; padding: 0; list-style: none; }
.guidance-card li { position: relative; padding: .58rem 0 .58rem 1.65rem; color: var(--muted); font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.55; }
.guidance-card li strong { color: #594039; font-weight: 600; }
.guidance-card li::before { content: "·"; position: absolute; left: .25rem; top: .42rem; color: var(--sage-deep); font-size: 1.35rem; font-weight: 700; }
.steps { padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 8vw, 9rem); background: radial-gradient(circle at 92% 8%, rgba(185,111,96,.30), transparent 31%), linear-gradient(145deg, #e9dccf 0%, #d9bfad 56%, #e5d2c4 100%); }
.steps h2 { max-width: 800px; }
.step-grid { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step-grid article { min-height: 245px; padding: 2rem; background: rgba(252,242,232,.9); border: 1px solid var(--line); border-radius: 4px 34px 4px 4px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 18px 45px rgba(105,70,52,.12); }
.step-grid article:nth-child(1) {
  background: linear-gradient(145deg, #fffaf5 0%, #fdf8f2 100%);
  border-color: rgba(91, 77, 69, .14);
  box-shadow: 10px -9px 0 rgba(112, 108, 105, .42), 14px -5px 22px rgba(76, 72, 69, .34);
}
.step-grid article:nth-child(2) { background: radial-gradient(circle at 82% 16%, rgba(255,247,241,.94) 0%, rgba(185,111,96,.24) 34%, transparent 58%), linear-gradient(145deg, #eadccf 0%, #d1a08f 100%); box-shadow: 0 18px 42px rgba(129,79,62,.13); }
.step-grid article:nth-child(3) { position: relative; overflow: hidden; background: linear-gradient(132deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.10) 21%, transparent 42%), radial-gradient(ellipse at 0% 0%, rgba(247,220,213,.88) 0%, rgba(232,218,172,.34) 36%, transparent 64%), linear-gradient(145deg, #f5ddd7 0%, #e7b2a8 100%); border-color: rgba(184,117,105,.28); box-shadow: 0 22px 52px rgba(184,117,105,.12), 0 0 42px rgba(239,196,187,.24); }
.step-grid article:nth-child(3)::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(128deg, rgba(255,255,255,.36) 0 7%, transparent 7% 15%, rgba(255,248,205,.22) 15% 20%, transparent 20% 100%); opacity: .72; }
.step-grid article:nth-child(3) > span, .step-grid article:nth-child(3) > div { position: relative; z-index: 1; }
.step-grid article > span { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; color: var(--plum-dark); background: rgba(255,255,255,.58); font-weight: 600; }
.step-grid h3 { margin-bottom: .6rem; }
.step-grid p { margin: 0; color: var(--muted); }
.framework { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(248,238,228,.86); border: 1px solid var(--line); }
.framework > div { padding: 1.35rem 1.5rem; }
.framework > div:last-child { border-right: 0; }
.framework strong, .framework span { display: block; }
.framework strong { margin-bottom: .25rem; color: var(--plum-dark); }
.framework span { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.cancellation-note { margin: 1rem 0 0; padding: 1rem 1.25rem; color: var(--muted); background: rgba(255,248,241,.58); border-radius: 4px; font-size: .92rem; line-height: 1.6; }
.cancellation-note strong { color: var(--plum-dark); }
.confidentiality { margin-top: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem; align-items: start; background: linear-gradient(135deg, rgba(239,229,190,.92), rgba(247,238,220,.86)); border: 1px solid rgba(160,137,77,.24); border-radius: 4px 30px 4px 4px; }
.confidentiality-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.72); color: var(--sage-deep); font-size: 1.3rem; font-weight: 700; }
.confidentiality h3 { margin: .1rem 0 .55rem; font-size: 1.45rem; }
.confidentiality p { margin: 0; max-width: 980px; color: var(--muted); font-size: .96rem; }
.confidentiality-link { color: inherit; text-decoration: none; }
.confidentiality-link:hover { border-color: rgba(160,137,77,.45); }
.knowledge-page { background: #f1e4d7; }
.knowledge-hero { min-height: 400px; padding: clamp(4rem, 7vw, 6.5rem) clamp(1.5rem, 10vw, 11rem); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 80% 20%, rgba(232,201,122,.52), transparent 30%), linear-gradient(135deg, #eadbce, #eadfb8); }
.knowledge-hero h1 { font-size: clamp(3.2rem, 6vw, 6.2rem); }
.knowledge-hero > p:last-child { max-width: 700px; margin: 1.4rem 0 0; color: var(--muted); font-size: 1.08rem; }
.knowledge-section { padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 10vw, 11rem); display: grid; grid-template-columns: 100px minmax(0, 850px); gap: clamp(1.5rem, 5vw, 5rem); justify-content: center; background: linear-gradient(145deg, #eadbce, #d9c0b0); }
.knowledge-section.confidentiality-section { background: linear-gradient(135deg, #eadfb8, #ead7c4); }
.knowledge-number { color: rgba(142,85,76,.5); font-size: 1rem; font-weight: 700; letter-spacing: .15em; padding-top: .5rem; }
.knowledge-copy h2 { font-size: clamp(2.4rem, 4.5vw, 4.5rem); }
.knowledge-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.04rem; }
.benefit-box { margin-top: 2.2rem; padding: clamp(1.5rem, 3vw, 2.4rem); background: rgba(255,249,241,.88); border: 1px solid var(--line); border-radius: 4px 28px 4px 4px; }
.benefit-box h3 { margin-top: 0; }
.benefit-box p { margin-bottom: 0; color: var(--muted); }
.faq-section { padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 10vw, 11rem) clamp(4.5rem, 7vw, 6.5rem); background: linear-gradient(145deg, #ece0d3, #dcc5b6); }
.faq-section > .eyebrow, .faq-section > h2, .faq-controls, .faq-list { width: min(100%, 900px); margin-left: auto; margin-right: auto; }
.faq-section > .eyebrow { margin-bottom: .65rem; }
.faq-controls { display: flex; justify-content: flex-end; margin-bottom: .7rem; }
.faq-toggle-all {
  width: auto;
  margin: 0;
  padding: .62rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(169, 87, 70, .42);
  border-radius: 999px;
  color: #8f4335;
  background: rgba(255, 250, 244, .68);
  font: 600 .88rem var(--sans);
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(91, 62, 48, .07);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.faq-toggle-all:hover { color: #fffaf4; background: #a95746; border-color: #a95746; transform: translateY(-1px); }
.faq-toggle-all:focus-visible { outline: 3px solid rgba(169, 87, 70, .32); outline-offset: 3px; }
.guidance-teaser { min-height: 0; text-align: center; }
.guidance-teaser .guidance-intro { width: min(100%, 820px); margin: 0 auto; }
.guidance-teaser .guidance-intro > p:not(.eyebrow) { margin-inline: auto; }
.guidance-teaser .button { margin-top: 1.8rem; }
.guidance-page .knowledge-hero { min-height: 520px; }
.guidance-page-content { padding-top: clamp(4.5rem, 8vw, 7rem); }
.guidance-page-content .guidance-intro { width: min(100%, 920px); margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.guidance-page-content .guidance-intro p { margin-inline: auto; }
.faq-section > h2 { margin-bottom: 2.6rem; font-size: clamp(2.4rem, 4.5vw, 4.5rem); }
.faq-list { display: grid; gap: .55rem; }
.faq-list details { padding: 0 clamp(1.15rem, 2.2vw, 1.65rem); background: rgba(255,249,241,.88); border: 1px solid rgba(91,62,48,.10); border-radius: 12px; box-shadow: 0 4px 14px rgba(91,62,48,.045); transition: border-color .2s ease, box-shadow .2s ease; }
.faq-list details:hover { border-color: rgba(169,87,70,.25); box-shadow: 0 6px 18px rgba(91,62,48,.065); }
.faq-list details[open] { border-color: rgba(169,87,70,.24); }
.faq-list summary { position: relative; padding: .92rem 3rem .92rem 0; color: var(--plum-dark); font-size: clamp(1.02rem, 1.4vw, 1.14rem); font-weight: 600; line-height: 1.45; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; top: 50%; right: .1rem; transform: translateY(-50%); color: #a95746; font-size: 1.35rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0; padding: 0 0 1.2rem; max-width: 790px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.faq-list details a { color: var(--plum-dark); text-underline-offset: .2rem; }
.faq-list .crisis-information { padding: 0 0 1.7rem; max-width: 900px; }
.faq-list .crisis-information > p { padding-bottom: 1.1rem; }
.crisis-contacts { margin: 0; padding: 0 0 0 1.35rem; color: var(--muted); }
.crisis-contacts li { margin: 0 0 1.15rem; padding-left: .35rem; line-height: 1.65; }
.crisis-contacts li:last-child { margin-bottom: 0; }
.crisis-contacts strong,
.crisis-contacts span { display: block; }
.crisis-contacts strong { margin-bottom: .18rem; color: var(--plum-dark); font-size: 1.02rem; }
.knowledge-cta { padding: 4rem 1.5rem; text-align: center; background: #dbc5b5; }
.knowledge-cta p { margin: 0 0 1.25rem; font-size: 1.08rem; }
.contact { padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 8vw, 9rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; color: var(--ink); background: radial-gradient(circle at 12% 15%, rgba(185,111,96,.38), transparent 32%), linear-gradient(125deg, #dfc7b7 0%, #d5b7a4 58%, #bd816d 100%); }
.contact .eyebrow { color: var(--sage-deep); }
.contact h2 { color: var(--plum-dark); }
.contact-portrait {
  width: min(15rem, 72%);
  margin: 2.2rem 0 0;
  overflow: hidden;
  border: 3px solid rgba(255, 250, 244, .78);
  border-radius: 1.3rem;
  box-shadow: 0 18px 42px rgba(79, 49, 39, .18);
}
.contact-portrait img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.contact-panel { padding: clamp(2rem, 4vw, 3.5rem); color: var(--ink); background: rgba(252,242,231,.94); border: 1px solid rgba(94,65,52,.18); border-radius: 4px 45px 4px 4px; box-shadow: 0 20px 50px rgba(91,62,48,.16); }
.contact-panel > p { margin-top: 0; color: var(--muted); }
.button.light { margin: 1rem 0 1.5rem; color: white; background: var(--sage-deep); }
.contact dl { margin: 0; }
.contact dl > div { display: grid; grid-template-columns: 90px 1fr; padding: .8rem 0; }
.contact dd a[href^="mailto:"] { overflow-wrap: anywhere; }
.contact dt { font-weight: 600; }
.contact dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.contact dd a { color: var(--plum-dark); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .22rem; }
.contact-map { position: relative; height: 11.5rem; margin-top: 1.25rem; overflow: hidden; border: 1px solid rgba(94,65,52,.18); border-radius: 14px; background: #e8dfd4; }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.contact-map-link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: .65rem; text-decoration: none; }
.contact-map-link span { padding: .5rem .8rem; border-radius: 9px; color: #fff; background: #a95746; font-size: .85rem; font-weight: 600; box-shadow: 0 3px 10px rgba(64,39,31,.2); }
.contact-map-link:hover span, .contact-map-link:focus-visible span { background: #864332; }
.contact-map-link:focus-visible { outline: 3px solid #a95746; outline-offset: -4px; }
.contact-panel .contact-map-credit { margin: .3rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.contact-map-credit a { color: inherit; }
.location-note { display: block; margin-top: .2rem; font-size: .9rem; line-height: 1.5; }
.contact small { display: block; margin-top: 1.2rem; color: #7c6e6a; }
footer { min-height: 160px; padding: 2rem clamp(1.5rem, 4vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: linear-gradient(110deg, #e2d297 0%, #dac1b1 55%, #ad6d5d 100%); color: var(--plum-dark); }
.footer-brand .brand-logo { width: clamp(15rem, 23vw, 19rem); max-height: 6.5rem; }
.footer-brand small { color: var(--muted); }
footer p, footer nav { font-size: .8rem; }
footer nav a { color: var(--plum-dark); text-underline-offset: .25rem; }

@media (max-width: 920px) {
  .site-header { height: 76px; }
  .site-header .header-logo { width: min(20rem, 68vw); max-height: 3.8rem; }
  .menu-toggle { display: block; padding: .7rem; }
  .site-header nav { position: absolute; top: 76px; left: 0; right: 0; padding: 1.5rem; display: none; flex-direction: column; align-items: stretch; background: var(--cream); }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: .55rem; }
  .nav-cta { text-align: center; }
  .hero { min-height: auto; display: block; padding-bottom: 2rem; }
  .hero-image { min-height: 52svh; background-image: linear-gradient(0deg, #f2d6d0 0%, rgba(248,226,221,.05) 36%), url("images/praxis-hero-olive-leaves.png"); background-position: 66% center; }
  .hero-copy { position: relative; width: auto; left: auto; top: auto; transform: none; padding: 0 1.5rem 2rem; margin-top: -2.3rem; }
  h1 { font-size: clamp(3.35rem, 14vw, 5.4rem); }
  .availability { position: relative; right: auto; bottom: auto; width: max-content; max-width: calc(100% - 3rem); margin: 0 1.5rem; }
  .intro, .about, .contact { grid-template-columns: 1fr; }
  .about, .contact { gap: 3rem; }
  .about { display: flex; flex-direction: column; gap: 0; }
  .about-copy, .about-side { display: contents; }
  .about-copy > .eyebrow { order: 1; }
  .about-copy > h2 { order: 2; }
  .about-copy > .role { order: 3; }
  .about-side > .portrait { order: 4; width: 100%; max-width: 520px; margin: .8rem auto 2.2rem; }
  .about-copy > p:not(.eyebrow):not(.role) { order: 5; }
  .about-copy > .text-link { order: 6; }
  .about-side > .values { order: 7; width: 100%; max-width: 680px; margin-top: 2.2rem; }
  .topics { grid-template-columns: 1fr 1fr; }
  .topics article:nth-child(2) { border-right: 0; }
  .topics article:nth-child(3) { padding-left: 0; }
  .topics article:nth-child(3n) { border-right: 0; }
  .topics article:nth-child(even) { border-right: 0; }
  .topics article:nth-child(odd) { padding-left: 0; }
  .life-stage-grid { grid-template-columns: 1fr; }
  .approach { grid-template-columns: 1fr; }
  .guidance-card { grid-template-columns: 1fr; gap: 2.5rem; }
  .guidance-portrait { width: 100%; max-width: 280px; height: auto; aspect-ratio: 9 / 8; justify-self: center; }
  .therapy-path { min-height: 520px; }
  .values > div { grid-template-columns: 42px 1fr; }
  .values p { grid-column: 2; }
  .step-grid { grid-template-columns: 1fr; }
  .step-grid article { min-height: 210px; }
  .framework { grid-template-columns: 1fr 1fr; }
  .framework > div:nth-child(2) { border-right: 0; }
  .knowledge-section { grid-template-columns: 1fr; gap: .5rem; }
}

@media (max-width: 420px) {
  #inhalt h1,
  #inhalt h2,
  #inhalt h3 {
    overflow-wrap: anywhere;
  }
  .vt-explainer .vt-text h2 {
    font-size: 1.8rem;
    letter-spacing: -.02em;
  }
  .vt-science h2 {
    font-size: 1.65rem;
    letter-spacing: -.02em;
  }
}
@media (max-width: 560px) {
  .brand-logo { width: 11.5rem; height: auto; max-height: 4.6rem; }
  .site-header .header-logo { width: min(15.5rem, 70vw); max-height: 3.7rem; }
  .site-header .brand-name, .site-header .brand-tagline { display: none; }
  .hero .eyebrow { max-width: 21rem; margin-bottom: .9rem; font-size: .72rem; letter-spacing: .075em; }
  .lead { margin-top: 1.6rem; }
  .hero-actions { width: 100%; display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  .hero-action-links { gap: .9rem; }
  .intro, .life-stages, .about, .guidance, .steps, .contact { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .topics { grid-template-columns: 1fr; }
  .topics article { padding: 1.8rem 0; border-right: 0; }
  .topics article:nth-child(3n) { border-right: 0; }
  .framework { grid-template-columns: 1fr; }
  .framework > div { border-right: 0; border-bottom: 0; }
  .framework > div:last-child { border-bottom: 0; }
  .confidentiality { grid-template-columns: 1fr; }
  .therapy-path { padding: 4rem 1.5rem; min-height: 470px; }
  .approach-copy { padding: 4rem 1.5rem; }
  .approach-copy::before { opacity: .7; }
  .portrait { border-radius: 4px 32px 4px 4px; }
  .quote-band { min-height: 138px; padding: 2.35rem 1.5rem; }
  .quote-translation { margin-top: .55rem; font-size: .8rem; }
  .contact dl > div { grid-template-columns: 1fr; gap: .15rem; }
  .contact-portrait { width: min(13rem, 64vw); margin: 1.8rem auto 0; }
  footer { align-items: flex-start; flex-direction: column; }
}

/* Gut lesbare Hauptnavigation auf Desktop und Mobilgeräten */
@media (min-width: 921px) {
  .site-header nav {
    gap: clamp(.8rem, 1.35vw, 1.4rem);
  }
  .site-header nav a {
    font-size: 1.125rem;
    line-height: 1.3;
    white-space: nowrap;
  }
}

@media (min-width: 921px) and (max-width: 1200px) {
  .site-header {
    padding-inline: 1.25rem;
  }
  .site-header .brand-lockup {
    width: 12rem;
    transform: none;
  }
  .site-header nav {
    gap: .6rem;
  }
  .site-header nav a {
    font-size: 1rem;
  }
}

@media (max-width: 920px) {
  .site-header nav {
    gap: .25rem;
  }
  .site-header nav a {
    font-size: 1.25rem;
    line-height: 1.35;
  }
}

/* Kontaktimpuls unmittelbar an die Kacheln anschließen. */
.section-directory {
  padding-bottom: 0;
}
.home-cta {
  padding-top: 0;
}

/* Breite Angebotskacheln mit ruhigen, farbigen Symbolen. */
.section-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: 1rem;
}
.section-directory-title {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: 0 0 .35rem;
  color: #9e4f3f;
  font-family: Alata, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-directory .directory-card {
  min-height: 112px;
  padding: 1rem 1.35rem 1rem 1rem;
  justify-content: flex-start;
  border-top: 0;
  border-radius: 4px 22px 4px 4px;
}
.directory-icon {
  flex: 0 0 auto;
  width: 4.75rem;
  height: 4.75rem;
  display: grid;
  place-items: center;
  color: #a95544;
  background: #f4ded3;
  border-radius: 50%;
}
.directory-icon svg {
  width: 2.45rem;
  height: 2.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.section-directory .directory-label {
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  font-weight: 600;
}
.section-directory .directory-card b {
  margin-left: auto;
  font-size: 1.75rem;
}
.directory-therapy .directory-icon { color: #b07b32; background: #f7e7bc; }
.directory-guidance .directory-icon { color: #a85c66; background: #f1d9dc; }
.directory-process .directory-icon { color: #6f7868; background: #e6e8df; }
.directory-about .directory-icon { color: #7d6a60; background: #ece4df; }
.directory-info .directory-icon { color: #a96943; background: #f3e1d5; }

@media (max-width: 640px) {
  .section-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 1rem;
    gap: .75rem;
  }
  .section-directory .directory-card {
    min-height: 92px;
    padding: .75rem;
    gap: .65rem;
  }
  .directory-icon {
    width: 3.15rem;
    height: 3.15rem;
  }
  .directory-icon svg {
    width: 1.75rem;
    height: 1.75rem;
  }
  .section-directory .directory-label {
    font-size: .95rem;
    line-height: 1.25;
  }
  .section-directory .directory-card b {
    font-size: 1.3rem;
  }
}

/* Gut zu wissen: FAQ auf großen Bildschirmen großzügiger und klarer. */
@media (min-width: 761px) {
  .knowledge-page .faq-section > .eyebrow,
  .knowledge-page .faq-controls,
  .knowledge-page .faq-list {
    width: min(100%, 1180px);
  }

  .knowledge-page .faq-section > .eyebrow {
    font-size: 1.65rem;
    letter-spacing: .08em;
  }

  .knowledge-page .faq-toggle-all {
    padding: .8rem 1.35rem;
    font-size: 1.05rem;
  }

  .knowledge-page .faq-list {
    gap: .7rem;
  }

  .knowledge-page .faq-list details {
    padding-right: 1.9rem;
    padding-left: 1.9rem;
    border-radius: 15px;
  }

  .knowledge-page .faq-list summary {
    padding-top: 1.18rem;
    padding-bottom: 1.18rem;
    font-size: 1.3rem;
  }

  .knowledge-page .faq-list summary::after {
    font-size: 1.7rem;
  }

  .knowledge-page .faq-list details p,
  .knowledge-page .faq-list .crisis-information {
    max-width: 1060px;
    font-size: 1.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

/* Verhaltenstherapie: klar, warm und wissenschaftlich fundiert */
.vt-page { background: #fffaf5; }
.vt-page main { overflow: hidden; }
.vt-hero { position: relative; min-height: 610px; display: grid; grid-template-columns: 1.04fr .96fr; }
.vt-hero-copy { position: relative; padding: clamp(4rem, 7vw, 7.5rem); display: flex; flex-direction: column; justify-content: center; color: #fffaf5; background: linear-gradient(145deg, #a95645 0%, #bd735f 100%); overflow: hidden; }
.vt-hero-copy::after { content: ""; position: absolute; width: 22rem; height: 22rem; right: -6rem; top: -7rem; border: 1px solid rgba(255,255,255,.43); border-radius: 50%; }
.vt-hero-copy .eyebrow { color: #fffaf5; margin-bottom: 1.1rem; }
.vt-hero-copy h1 { color: #fffaf5; font-size: clamp(3.7rem, 5.8vw, 6.5rem); font-weight: 400; line-height: .99; }
.vt-hero-copy h1 span { display: inline-block; margin: .08em 0; padding: .05em .25em .1em; color: #8f3f30; background: rgba(255,239,226,.58); border-radius: 18px; }
.vt-hero-script { position: relative; z-index: 1; margin: 2rem 0 0 2.2rem; color: #fff8f1; font-family: "Yuyu", cursive; font-size: clamp(1.7rem, 2.25vw, 2.55rem); line-height: 1.12; text-align: center; transform: rotate(-2deg); }
.vt-index { margin-top: 4.6rem; display: grid; grid-template-columns: auto 5rem auto; gap: 1rem; align-items: center; width: max-content; font-size: .82rem; }
.vt-index > span:nth-child(2) { height: 1px; background: rgba(255,255,255,.75); }
.vt-hero-image { position: relative; min-height: 610px; background: #f2dfd0 url("images/praxis-hero-sunlight-neutral.png") 74% center / cover no-repeat; }
.vt-hero-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(169,86,69,.16), transparent 28%); }
.vt-hero-image blockquote { position: absolute; z-index: 1; top: 14%; right: 10%; margin: 0; color: #563a32; font-family: "Yuyu", cursive; font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1.18; text-align: center; transform: rotate(-4deg); }
.vt-hero-statement { min-height: 610px; padding: clamp(4rem, 6vw, 6.8rem); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 78% 18%, rgba(240,202,116,.22), transparent 32%), linear-gradient(135deg, #fffaf5, #f5e6da); }
.vt-hero-statement .eyebrow { margin-bottom: 1.25rem; }
.vt-hero-statement h2 { max-width: 700px; font-size: clamp(3rem, 4.4vw, 5rem); line-height: 1.03; }
.vt-hero-statement > p:last-child { max-width: 620px; margin: 1.8rem 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.68; }
.vt-explainer, .vt-suitable { padding: clamp(4.2rem, 7vw, 7rem) clamp(1.5rem, 8vw, 9rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; background: linear-gradient(180deg, #fffaf5, #fff8f2); }
.vt-text { max-width: 650px; }
.vt-text h2, .vt-process h2 { font-size: clamp(2.35rem, 3.3vw, 3.8rem); }
.vt-text > p { margin: 1.6rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.72; }
.vt-text > p + p { margin-top: .9rem; }
.vt-button { margin-top: 1.9rem; display: inline-flex; align-items: center; gap: 2.2rem; min-height: 52px; padding: .8rem 1.65rem; color: #503831; background: #f0ca74; border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: 0 10px 24px rgba(186,121,72,.13); transition: transform .2s, background .2s; }
.vt-button:hover { background: #e9bd5d; transform: translateY(-2px); }
.vt-focus { position: relative; padding: clamp(2rem, 4vw, 3.4rem); background: linear-gradient(135deg, #f5e5dc, #f8eee8); border-radius: 28px 4px 28px 4px; overflow: hidden; }
.vt-focus::before, .vt-focus::after, .vt-science::after { content: ""; position: absolute; width: 10rem; height: 10rem; border: 1px solid rgba(169,86,69,.36); border-radius: 50%; }
.vt-focus::before { right: -4rem; top: -5rem; }
.vt-focus::after { left: -5rem; bottom: -6rem; }
.vt-focus h3 { margin: 0 0 1.1rem; font-size: 1.2rem; }
.vt-focus h3 span { color: #b6604f; }
.vt-focus-intro { margin: 0 0 .55rem; color: var(--muted); font-family: "Yuyu", cursive; font-size: clamp(1.45rem, 1.7vw, 1.75rem); line-height: 1.25; }
.vt-focus ul { margin: 0; padding: 0; list-style: none; }
.vt-focus li { position: relative; padding: .45rem 0 .45rem 2.5rem; color: var(--muted); }
.vt-focus li::before { content: "→"; position: absolute; left: .25rem; color: #b6604f; font-size: 1.25rem; }
.vt-history { padding: clamp(4.5rem, 7vw, 7rem) clamp(1.5rem, 8vw, 9rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; background: linear-gradient(130deg, #f3dfd2, #ead0bf); }
.vt-history h2 { max-width: 620px; font-size: clamp(2.5rem, 4vw, 4.4rem); }
.vt-history-copy { max-width: 760px; }
.vt-history-copy > p:first-child { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.vt-history-message { margin: 2rem 0 0; padding: 1.5rem 1.7rem; color: #563a32; background: rgba(255,250,245,.58); border-radius: 18px; font-size: 1.08rem; line-height: 1.65; }
.vt-process { padding: clamp(4.5rem, 7vw, 7rem) clamp(1.5rem, 6vw, 7rem); background: linear-gradient(135deg, #f3e3d8 0%, #f8eee7 55%, #ecd4c4 100%); }
.vt-process-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.vt-process-grid article { position: relative; padding: 0 clamp(1rem, 2.2vw, 2.4rem); text-align: center; }
.vt-process-grid article:not(:last-child)::after { content: ""; position: absolute; right: -2rem; top: 3.2rem; width: 4rem; height: 1px; background: rgba(169,86,69,.5); }
.vt-process-grid article:nth-child(2)::after { right: -2rem; }
.vt-icon { width: 5.6rem; height: 5.6rem; margin: 0 auto 1.15rem; display: grid; place-items: center; color: #a95645; background: rgba(255,248,242,.58); border-radius: 50%; }
.vt-icon svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vt-process-grid h3 { margin: 0 0 .55rem; color: #563a32; font-family: "Alata", Arial, sans-serif; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.vt-process-grid p { margin: 0 auto; max-width: 16rem; color: var(--muted); line-height: 1.55; }
.vt-suitable { background: #fffaf5; }
.vt-science { position: relative; padding: clamp(2.7rem, 5vw, 4.8rem); background: linear-gradient(125deg, #e6c3b5 0%, #efd5ca 52%, #e2b5a5 100%); border-radius: 24px; box-shadow: 0 18px 42px rgba(111,67,54,.1); overflow: hidden; }
.vt-process > .vt-science { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.vt-science-standalone { margin: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 7rem); }
.vt-science::after { right: -4rem; bottom: -5rem; }
.vt-science .eyebrow { margin-bottom: 1rem; }
.vt-science h2 { position: relative; z-index: 1; max-width: 820px; font-size: clamp(2.2rem, 3.4vw, 3.8rem); line-height: 1.08; }
.vt-science-standalone h2 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  font-weight: 500;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
.vt-science-heading-word {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: -.035em;
}
.vt-science-heading-small {
  display: block;
  margin-top: .18em;
  font-size: .72em;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.vt-science > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 920px; margin: 1.35rem 0 0; color: var(--muted); font-size: 1.03rem; line-height: 1.72; }
.vt-science > p + p { margin-top: .9rem; }
.vt-concerns { position: relative; padding: clamp(2rem, 4vw, 3.4rem); background: linear-gradient(135deg, #f5e5dc, #f8eee8); border-radius: 28px 4px 28px 4px; }
.vt-concerns h3 { margin: 0 0 1rem; font-size: 1.2rem; }
.vt-concerns p { margin: 0; color: var(--muted); line-height: 1.7; }
.vt-closing-quote { min-height: 165px; background: linear-gradient(110deg, #e4c8b4, #f1d9ca); }
.vt-closing-quote blockquote { font-family: "Yuyu", cursive; font-size: clamp(2rem, 3.2vw, 3.15rem); font-weight: 400; }

@media (max-width: 920px) {
  .vt-hero { grid-template-columns: 1fr; }
  .vt-hero-copy { min-height: 460px; }
  .vt-hero-statement { min-height: 470px; }
  .vt-hero-image { min-height: 500px; }
  .vt-explainer, .vt-suitable { grid-template-columns: 1fr; gap: 2.5rem; }
  .vt-history { grid-template-columns: 1fr; gap: 2rem; }
  .vt-process-grid { grid-template-columns: 1fr 1fr; gap: 3rem 1rem; }
  .vt-process-grid article:nth-child(2)::after { display: none; }
  .vt-science { border-radius: 24px; }
}

@media (max-width: 560px) {
  .vt-hero-copy { min-height: 430px; padding: 4rem 1.5rem; }
  .vt-hero-statement { min-height: 430px; padding: 4rem 1.5rem; }
  .vt-hero-copy h1 { font-size: clamp(3.2rem, 16vw, 4.45rem); }
  .vt-hero-script { margin-left: 0; font-size: 1.9rem; }
  .vt-index { margin-top: 3rem; grid-template-columns: auto 3rem auto; }
  .vt-hero-image { min-height: 390px; background-position: 68% center; }
  .vt-hero-image blockquote { top: 8%; right: 6%; font-size: 2.1rem; }
  .vt-explainer, .vt-suitable { padding-top: 4.2rem; padding-bottom: 4.2rem; }
  .vt-history { padding: 4.2rem 1.5rem; }
  .vt-process { padding: 4.2rem 1.5rem; }
  .vt-process-grid { grid-template-columns: 1fr 1fr; gap: 2.8rem .5rem; }
  .vt-process-grid article { padding: 0 .5rem; }
  .vt-process-grid article::after { display: none; }
  .vt-icon { width: 4.8rem; height: 4.8rem; }
  .vt-process-grid p { font-size: .92rem; }
  .vt-focus, .vt-science, .vt-concerns { padding: 2rem 1.45rem; }
  .vt-button { width: 100%; justify-content: space-between; }
}

/* Stilwerkstatt: Sonnenlicht, Ruhe und fachliche Klarheit */
:root {
  --plum: #a95645;
  --plum-dark: #563a32;
  --rose: #c97c69;
  --blush: #ead2c5;
  --cream: #fbf4ec;
  --ink: #3f322e;
  --muted: #695751;
  --sage: #e7b45d;
  --sage-deep: #995443;
  --sage-mid: #f7e9d8;
  --sage-light: #f1dfc8;
  --vanilla: #f6e8da;
  --bronze: #bd7d50;
  --petal: #e7c0b2;
  --greige: #e5d8ca;
  --line: rgba(83, 58, 49, .16);
  --serif: "Quicksand", Arial, sans-serif;
  --sans: "Quicksand", Arial, sans-serif;
}

body { background: #ead3c2; }
.brand { gap: .85rem; }
.brand-lockup { display: block; width: clamp(16rem, 22vw, 22rem); height: auto; max-height: 5.3rem; object-fit: contain; object-position: left center; }
.site-header .brand-lockup { transform: translateX(-2.5rem); }
.brand-mark { width: 4.45rem; height: 4.45rem; object-fit: contain; flex: none; }
.brand-copy { min-width: 0; gap: .02rem; white-space: nowrap; }
.site-header .brand-copy strong { color: #563a32; font-size: 1.12rem; font-weight: 600; line-height: 1.15; letter-spacing: .01em; text-transform: none; }
.site-header .brand-copy small { margin: 0; color: #765f56; font-size: .55rem; font-weight: 600; line-height: 1.3; letter-spacing: .065em; text-transform: uppercase; }
.site-header {
  background: rgba(255, 250, 244, .94);
  border-bottom: 1px solid rgba(86, 58, 50, .1);
  box-shadow: 0 8px 28px rgba(74, 47, 38, .035);
}
.site-header nav a { color: #4f403a; }
.site-header nav a:not(.nav-cta):hover,
.site-header nav a.active { color: var(--plum); }
.nav-cta {
  color: #fffaf4;
  background: var(--plum);
  border-color: var(--plum);
  box-shadow: 0 8px 20px rgba(141, 73, 57, .16);
}
.nav-cta:hover { color: #fff; background: #8f493b; }

.hero {
  min-height: min(820px, calc(100svh - 92px));
  grid-template-columns: minmax(0, 53%) minmax(420px, 47%);
  background: linear-gradient(120deg, #f3dfd0 0%, #e5c4ae 72%, #cd977b 100%);
}
.hero::before {
  left: -7rem;
  top: -16rem;
  width: 33rem;
  background: linear-gradient(170deg, rgba(236, 176, 98, .2), rgba(255, 250, 244, 0));
}
.hero-image {
  min-height: 700px;
  background-image: linear-gradient(90deg, #f6e6da 0%, rgba(246, 230, 218, .33) 18%, rgba(255, 255, 255, 0) 43%), url("images/praxis-hero-olive-leaves.png");
  background-position: 72% center;
}
.hero-copy { width: min(690px, 52vw); }
h1, h2, h3 { font-weight: 400; }
h1, h2 { letter-spacing: -.035em; }
h1 { max-width: 700px; font-size: clamp(3.65rem, 5.8vw, 6.4rem); line-height: 1.04; }
h1 em { color: var(--plum); font-weight: 400; }
.lead { max-width: 570px; color: #5d4d47; }
.eyebrow { color: var(--plum); font-weight: 700; }
.button.primary {
  color: #fffaf4;
  background: var(--plum);
  border-color: var(--plum);
  box-shadow: 0 14px 30px rgba(141, 73, 57, .2);
}
.button.primary:hover { background: #8f493b; }
.hero-mini-portrait {
  width: 8.2rem;
  height: 10.25rem;
  margin: 0;
  overflow: hidden;
  border: 3px solid rgba(255, 250, 244, .9);
  border-radius: 1.15rem;
  box-shadow: 0 12px 28px rgba(86, 58, 50, .17);
}
.hero-mini-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.availability {
  background: rgba(255, 250, 244, .95);
  border-color: rgba(106, 72, 59, .16);
  box-shadow: 0 16px 38px rgba(79, 50, 40, .11);
}
.dot { background: #d99552; box-shadow: 0 0 0 4px rgba(217, 149, 82, .14); }
.reassurance { background: #d5aa8f; }
.reassurance p {
  color: #4d342e;
  font-size: 1.04rem;
  font-weight: 700;
}

.intro {
  position: relative;
  isolation: isolate;
  padding-top: clamp(14rem, 20vw, 18rem);
  padding-bottom: clamp(12rem, calc(14vw + 2rem), 16rem);
  background: #fff9f3;
}
.offer-journey {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 1.5rem;
  bottom: -4.25rem;
  width: min(58vw, 680px);
  height: calc(100% + 5rem);
  object-fit: fill;
  transform: translateX(-50%);
  opacity: .82;
  mix-blend-mode: multiply;
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 7%, #000 18%, #000 82%, rgba(0, 0, 0, .45) 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 7%, #000 18%, #000 82%, rgba(0, 0, 0, .45) 93%, transparent 100%);
  pointer-events: none;
  user-select: none;
}
.offer-sunrise {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -5.2rem;
  width: min(68vw, 900px);
  height: auto;
  transform: translateX(-50%);
  opacity: .86;
  pointer-events: none;
  user-select: none;
}
.intro > :not(.offer-journey):not(.offer-sunrise) { position: relative; z-index: 1; }
.intro > div:first-child { align-self: start; }
.topics {
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: clamp(4rem, 6vw, 6rem);
  background: #ecd1bd;
}
.topics::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -7.5rem;
  left: 0;
  width: 100%;
  height: 7.6rem;
  background: center bottom / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23ecd1bd' d='M0 72C180 18 330 26 514 84c207 65 351 64 542-4 160-57 259-68 384-34v104H0Z'/%3E%3C/svg%3E");
  pointer-events: none;
  transform: translateY(.34cm);
}
.topics article { position: relative; z-index: 1; }
.topics-heading { position: relative; z-index: 1; grid-column: 1 / -1; margin: -1.2rem 0 .4rem; text-align: center; }
.topics-heading .eyebrow { margin-bottom: .35rem; color: #a95645; }
.topics-heading > p:last-child { margin: 0; color: #66504a; font-size: 1.08rem; }
.topics article {
  min-height: 210px;
  padding: 2rem;
  background: #f8eade;
  border: 1px solid var(--line);
  border-top: 3px solid rgba(169, 86, 69, .56);
  border-radius: 2px 22px 2px 2px;
  box-shadow: 8px -8px 0 rgba(145, 86, 66, .16), 14px -12px 26px rgba(102, 63, 49, .14);
}
.topic-icon {
  width: 4.7rem;
  height: 4.7rem;
  margin-bottom: 1.15rem;
  display: grid;
  place-items: center;
  color: #624840;
  background: #f0ddd2;
  border-radius: 50%;
}
.topic-icon svg { width: 2.75rem; height: 2.75rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topics article:nth-child(2) .topic-icon { background: #f3dfb7; }
.topics article:nth-child(3) .topic-icon { background: #ead8ca; }
.topics article:nth-child(4) .topic-icon { background: #efcec8; }
.topics article:nth-child(5) .topic-icon { background: #f1dfc7; }
.topics article:nth-child(6) .topic-icon { background: #ead4cc; }
.topics article:nth-child(1) { background: #f5e2d5; }
.topics article:nth-child(2) { background: #f3dfc4; }
.topics article:nth-child(3) { background: #efddd0; }
.topics article:nth-child(4) { background: #f0d2cb; }
.topics article:nth-child(5) { background: #f2ddc8; }
.topics article:nth-child(6) { background: #ecd4cc; }
.topics article:nth-child(3n+1) { padding-left: 2rem; }
.topics article:nth-of-type(1) { background: #f5e2d5; }
.topics article:nth-of-type(2) { background: #f3dfc4; }
.topics article:nth-of-type(3) { background: #efddd0; }
.topics article:nth-of-type(4) { background: #f0d2cb; }
.topics article:nth-of-type(5) { background: #f2ddc8; }
.topics article:nth-of-type(6) { background: #ecd4cc; }
.topics article:nth-of-type(2) .topic-icon { background: #f3dfb7; }
.topics article:nth-of-type(3) .topic-icon { background: #ead8ca; }
.topics article:nth-of-type(4) .topic-icon { background: #efcec8; }
.topics article:nth-of-type(5) .topic-icon { background: #f1dfc7; }
.topics article:nth-of-type(6) .topic-icon { background: #ead4cc; }
.topics-unified {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
.topics-unified article,
.topics-unified article:nth-child(n) {
  min-height: 260px;
  height: 100%;
  padding: 1.55rem;
  border-right: 1px solid var(--line);
}
.topics-unified article:nth-of-type(7) { background: #f5e2d5; }
.topics-unified article:nth-of-type(8) { background: #f3dfc4; }
.topics-unified article:nth-of-type(9) { background: #efddd0; }
.topics-unified article:nth-of-type(10) { background: #f0d2cb; }
.topics-unified article:nth-of-type(7) .topic-icon { background: #f3dfb7; }
.topics-unified article:nth-of-type(8) .topic-icon { background: #ead8ca; }
.topics-unified article:nth-of-type(9) .topic-icon { background: #f1dfc7; }
.topics-unified article:nth-of-type(10) .topic-icon { background: #ead4cc; }
.topics-unified h3 { font-size: clamp(1.25rem, 1.45vw, 1.65rem); }
@media (max-width: 1550px) {
  .topics-unified { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .topics-unified { grid-template-columns: 1fr; }
}
.topics span, .values span { color: var(--plum); }
.topics h3 { margin-top: .45rem; color: #4d342e; font-weight: 600; }
.topics p { color: #59423a; font-weight: 500; }
.topics span { font-weight: 700; }

.life-stages { background: linear-gradient(135deg, #dfbda5 0%, #ecd2bf 55%, #d6a58a 100%); }
.life-stage-grid article {
  background: #f5e2d5;
  border: 1px solid var(--line);
  border-top: 3px solid rgba(169, 86, 69, .56);
  border-radius: 2px 22px 2px 2px;
  box-shadow: 8px -8px 0 rgba(145, 86, 66, .16), 14px -12px 26px rgba(102, 63, 49, .14);
}
.life-stage-older { background: #f3dfc4; }
.life-stage-grid .topic-icon { margin-bottom: 1.15rem; }
.life-stage-young .topic-icon { color: #4f6759; background: #d9eadf; }
.life-stage-adult .topic-icon { color: #86554a; background: #efd4c8; }
.life-stage-older .topic-icon { background: #f3dfb7; }
.life-stage-label { color: var(--plum); font-weight: 700; }
.life-stage-grid h3 { color: #4d342e; font-weight: 600; }
.life-stage-grid p { color: #59423a; font-weight: 500; }

.approach { background: #e7c4ad; }
.therapy-path {
  color: #fffaf4;
  background: linear-gradient(145deg, #b96654 0%, #9f5546 100%);
}
.therapy-path::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -8rem;
  top: -8rem;
  border: 1px solid rgba(255, 235, 214, .36);
  border-radius: 50%;
}
.therapy-path h2,
.therapy-path h2 em,
.therapy-path li > span { color: #fffaf4; }
.therapy-path .eyebrow,
.therapy-path li p { color: rgba(255, 250, 244, .78); }
.approach-copy { background: #ead0be; }
.approach-copy::before { background: radial-gradient(ellipse at 100% 25%, rgba(230, 174, 92, .24), transparent 66%); }
.approach .eyebrow { color: var(--plum); }
.approach .therapy-path .eyebrow { color: #fff8ef; }

.quote-path { background: linear-gradient(120deg, #e2c8b5, #d5aa94); }
.quote-future { background: linear-gradient(120deg, #ddb9a3, #cf9784); }
.quote-growth {
  min-height: 150px;
  padding: 2rem clamp(1.5rem, 8vw, 9rem) 3.25rem;
  background: #ecd1bd;
}
.quote-growth .quote-wrap {
  width: min(100%, 88rem);
}
.quote-growth blockquote {
  display: inline-grid;
  max-width: none;
  color: #67483e;
  text-align: left;
}
.quote-growth .quote-line {
  display: block;
  white-space: nowrap;
}
.quote-growth .quote-line-second {
  margin-top: .2rem;
  margin-left: 50%;
}
.quote-attribution {
  width: max-content;
  margin: .45rem 0 0 68%;
  transform: translateX(-50%);
  color: #8d6152;
  font-family: "Yuyu", cursive;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  line-height: 1.3;
}
@media (min-width: 1180px) {
  .quote-growth .quote-wrap { transform: translateX(-6rem); }
}
@media (max-width: 1179px) {
  .quote-growth blockquote {
    display: block;
    text-align: center;
  }
  .quote-growth .quote-line {
    white-space: normal;
  }
  .quote-growth .quote-line-second {
    margin-left: 0;
  }
  .quote-growth .quote-attribution {
    margin-left: 50%;
  }
}

.quote-band blockquote {
  font-family: "Yuyu", cursive;
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .015em;
}
.quote-future .quote-wrap {
  width: 100%;
  max-width: none;
}
.quote-future blockquote {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.7rem, 2.35vw, 2.35rem);
}
@media (max-width: 760px) {
  .quote-future blockquote {
    white-space: normal;
  }
}

.about { background: #ecd0bd; }
.portrait { box-shadow: 0 24px 55px rgba(79, 49, 39, .13); }
.values > div { border-top: 1px solid rgba(86, 58, 50, .14); }
.guidance { background: linear-gradient(135deg, #ddb99f 0%, #ead0be 68%, #d5a489 100%); }
.guidance-card { background: rgba(255, 251, 246, .9); box-shadow: 0 20px 48px rgba(83, 52, 42, .1); }
.guidance-card li { padding-left: 0; }
.guidance-card li::before { display: none; }

/* Beratung: ruhige Dreispaltenliste und gerahmtes Porträt */
.guidance-card .guidance-list {
  display: grid;
  gap: .15rem;
}
.guidance-card .guidance-list li {
  display: grid;
  grid-template-columns: minmax(9.5rem, 11.5rem) 2.25rem minmax(0, 1fr);
  column-gap: .45rem;
  align-items: baseline;
  padding: .62rem 0;
}
.guidance-card .guidance-term,
.guidance-card .guidance-description {
  display: block;
}
.guidance-card .guidance-arrow {
  color: #a95645;
  font-family: Arial, sans-serif;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.guidance-portrait {
  box-sizing: border-box;
  width: 100%;
  max-width: 255px;
  justify-self: start;
  padding: 2px;
  overflow: hidden;
  background: #fbf5ec;
  border: 4px solid transparent;
  border-image: linear-gradient(115deg, #d8bd98 0%, #bb956d 48%, #dcc5a4 100%) 1;
  border-radius: 0;
  box-shadow: 0 8px 18px rgba(93, 63, 48, .10);
}
.guidance-portrait img {
  border: 0;
}

@media (max-width: 920px) {
  .guidance-portrait {
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .guidance-page .guidance-card {
    padding: 1.4rem 1rem;
  }
  .guidance-card .guidance-list,
  .guidance-card .guidance-term,
  .guidance-card .guidance-description {
    min-width: 0;
  }
  .guidance-card .guidance-list li {
    grid-template-columns: minmax(0, 8rem) 1.35rem minmax(0, 1fr);
    column-gap: .35rem;
    font-size: .9rem;
  }
  .guidance-card .guidance-term,
  .guidance-card .guidance-description {
    overflow-wrap: anywhere;
    hyphens: none;
  }
  .guidance-card .guidance-arrow {
    font-size: 1.2em;
  }
  .guidance-portrait {
    max-width: 235px;
  }
}

.steps { background: #ecd0bd; }
.step-grid article,
.step-grid article:nth-child(1),
.step-grid article:nth-child(2),
.step-grid article:nth-child(3) {
  background: #fffaf4;
  border-color: rgba(86, 58, 50, .14);
  box-shadow: 0 16px 38px rgba(91, 62, 48, .07);
}
.step-grid article:nth-child(2) { border-top: 4px solid #d89a62; }
.step-grid article:nth-child(3) { border-top: 4px solid #b96654; }
.step-grid article:nth-child(1) {
  border-top: 4px solid #96918d;
  box-shadow: 8px 8px 0 rgba(170, 170, 170, .24), 0 16px 38px rgba(91, 62, 48, .07);
}
.step-grid article:nth-child(3)::before { display: none; }
.framework { background: #f4e4d6; }
.confidentiality {
  background: #f2dfcf;
  border-color: rgba(153, 84, 67, .18);
}

.contact {
  color: #fffaf4;
  background: linear-gradient(125deg, #a85847 0%, #ba6b58 52%, #c58468 100%);
}
.contact h2,
.contact .eyebrow { color: #fffaf4; }
.contact-panel { background: #fffaf4; }
.button.light { background: var(--plum); }
footer { background: #d3aa8f; }
.footer-claim {
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #5f443c;
  font-size: .72rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.footer-claim::before { display: none; }
.footer-brand { gap: .8rem; }
.footer-brand .brand-lockup { width: clamp(18rem, 28vw, 25rem); max-height: 6.2rem; }

/* Semantische Hauptüberschriften auf Unterseiten, optisch wie bisher. */
.intro h1 {
  font-size: clamp(2.55rem, 4.5vw, 4.75rem);
  line-height: 1.1;
}
.about-copy h1 {
  font-size: clamp(3rem, 4.5vw, 5rem);
  line-height: 1.1;
}
.contact h1 {
  color: var(--plum-dark);
  font-size: clamp(2.55rem, 4.5vw, 4.75rem);
  line-height: 1.1;
}
.footer-brand .brand-mark { width: 4.8rem; height: 4.8rem; }
.footer-brand .brand-copy strong { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.footer-brand .brand-copy small { margin: 0; font-size: .55rem; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }

.knowledge-page { background: #ecd0bd; }
.knowledge-hero { background: radial-gradient(circle at 82% 20%, rgba(229, 169, 81, .34), transparent 28%), linear-gradient(135deg, #f1dccb, #dfbca5); }
.faq-section { background: #e8c9b4; }
.faq-list details { background: #fffaf4; border-color: rgba(86, 58, 50, .13); box-shadow: 0 10px 28px rgba(83, 52, 42, .06); }
.knowledge-cta { background: #dcb59a; }

/* The navigation remains available while scrolling and becomes more compact. */
html { scroll-padding-top: 84px; }
body { padding-top: 92px; }
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  transition: height .24s ease, padding .24s ease, box-shadow .24s ease;
}
.site-header .brand-lockup,
.site-header nav,
.menu-toggle { transition: width .24s ease, max-height .24s ease, transform .24s ease, font-size .24s ease; }
.site-header.is-compact { height: 46px; box-shadow: 0 10px 28px rgba(74, 47, 38, .12); }
.site-header.is-compact .brand-lockup { width: clamp(8rem, 11vw, 11rem); max-height: 2.65rem; }

/* Kompakter, ruhiger Abschluss auf allen Seiten */
footer {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .12rem 1.5rem;
  padding: 1rem clamp(1.5rem, 5vw, 5.5rem) .85rem;
  background: #d3aa8f;
}
footer .footer-brand {
  grid-column: 1 / -1;
  justify-self: center;
}
footer .footer-brand .brand-lockup {
  width: clamp(12rem, 17vw, 15rem);
  max-height: 3.8rem;
}
footer .footer-claim {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  margin-top: -.55rem;
  font-size: clamp(.68rem, .8vw, .76rem);
}
footer::before {
  display: none;
}
footer > p:not(.footer-claim) {
  grid-column: 1;
  grid-row: 3;
  margin: .8rem 0 0;
  justify-self: start;
  color: rgba(73, 50, 44, .82);
}
footer > nav {
  grid-column: 2;
  grid-row: 3;
  margin-top: .8rem;
  justify-self: end;
  gap: 1.35rem;
}

@media (max-width: 620px) {
  footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: .08rem;
    padding: .75rem 1.25rem .85rem;
  }
  footer .footer-brand,
  footer .footer-claim,
  footer::before,
  footer > p:not(.footer-claim),
  footer > nav {
    grid-column: 1;
    justify-self: center;
  }
  footer .footer-brand .brand-lockup {
    width: min(12.5rem, 64vw);
    max-height: 3.5rem;
  }
  footer .footer-claim {
    white-space: normal;
    max-width: 23rem;
    text-align: center;
  }
  footer > p:not(.footer-claim) {
    grid-row: 3;
    margin-top: .85rem;
    text-align: center;
  }
  footer > nav { grid-row: 4; margin-top: .25rem; }
}

/* Refined Ablauf & Rahmen page */
.steps-refined {
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 6vw, 7rem) clamp(5rem, 8vw, 8rem);
  background:
    radial-gradient(circle at 88% 5%, rgba(224, 178, 127, .20), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(185, 111, 96, .13), transparent 31%),
    linear-gradient(145deg, #edd5c3 0%, #e8cbb6 52%, #dfb89f 100%);
}
.steps-heading { max-width: 820px; margin: 0 auto clamp(2.2rem, 4vw, 3.5rem); text-align: center; }
.steps-heading .eyebrow { margin-bottom: .7rem; }
.steps-heading h1 { font-size: clamp(2.55rem, 4.4vw, 4.7rem); line-height: 1.08; }
.step-grid-refined { margin-top: 0; gap: clamp(1rem, 2vw, 1.5rem); }
.step-grid-refined article,
.step-grid-refined article:nth-child(1),
.step-grid-refined article:nth-child(2),
.step-grid-refined article:nth-child(3) {
  min-height: 300px;
  padding: clamp(1.65rem, 2.8vw, 2.5rem);
  justify-content: flex-start;
  gap: 1.35rem;
  background: rgba(255, 250, 244, .88);
  border: 1px solid rgba(86, 58, 50, .13);
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(91, 62, 48, .10);
}
.step-grid-refined article:nth-child(2) { background: rgba(255, 248, 240, .91); }
.step-grid-refined article:nth-child(3) { background: rgba(251, 248, 240, .90); }
.step-grid-refined article:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(91, 62, 48, .13); }
.step-grid-refined article { transition: transform .2s ease, box-shadow .2s ease; }
.step-grid-refined h2 { margin: 0 0 .6rem; font-size: clamp(1.7rem, 2.2vw, 2.25rem); line-height: 1.18; }
.step-grid-refined p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.62; }
.step-icon,
.framework-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
}
.step-icon { width: 5rem !important; height: 5rem !important; }
.step-icon svg { width: 2.8rem; height: 2.8rem; }
.step-icon-hands svg {
  width: 3.25rem;
  height: 3.25rem;
  stroke-width: 2.35;
}
.step-icon-hands img {
  display: block;
  width: 3.45rem;
  height: auto;
}
.step-icon svg,
.framework-icon svg,
.confidentiality-refined .confidentiality-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-icon-hands svg { stroke-width: 2.35; }
.step-icon-rose,
.framework-icon-rose { color: #8e4d43; background: #efd0c9 !important; }
.step-icon-sun,
.framework-icon-sun { color: #8c5c31; background: #f3dfae !important; }
.step-icon-mint,
.framework-icon-mint { color: #53675c; background: #dce6d8 !important; }
.framework-refined {
  margin-top: clamp(3rem, 4vw, 4rem);
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 250, 244, .86);
  border: 1px solid rgba(86, 58, 50, .13);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(91, 62, 48, .08);
}
.framework-refined > div {
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 1.7rem);
  display: flex;
  gap: .9rem;
  align-items: center;
  border-right: 1px solid rgba(86, 58, 50, .11);
}
.framework-refined > div:last-child { border-right: 0; }
.framework-refined p { margin: 0; }
.framework-icon {
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
}
.framework-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  transform: translate(-50%, -50%);
}
.framework-refined strong { margin-bottom: .18rem; font-size: .94rem; }
.framework-refined span:not(.framework-icon) { font-size: .9rem; line-height: 1.45; }
.framework-refined .audience-list span { display: block; white-space: nowrap; }
.framework-refined .fee-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .14rem;
  line-height: 1.25;
}
.framework-refined .fee-line {
  display: flex;
  align-items: baseline;
  gap: .3em;
  white-space: nowrap;
}
.framework-refined .fee-line b { font-weight: 700; white-space: nowrap; }
.framework-refined .fee-details { margin-top: .36rem; font-size: var(--reading-size); color: var(--muted); }
.framework-refined .fee-details a { color: inherit; text-underline-offset: .16rem; }
.cancellation-note-refined {
  margin-top: 1rem;
  padding: 1rem 1.35rem;
  background: rgba(255, 250, 244, .72);
  border: 1px solid rgba(86, 58, 50, .10);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(91, 62, 48, .05);
}
.confidentiality-refined {
  margin-top: 1rem;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  grid-template-columns: 4rem 1fr;
  align-items: center;
  background: rgba(255, 250, 244, .84);
  border: 1px solid rgba(153, 84, 67, .16);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(91, 62, 48, .08);
}
.confidentiality-refined .confidentiality-icon {
  width: 4rem;
  height: 4rem;
  color: #9c5549;
  background: #efd0c9;
}
.confidentiality-refined .confidentiality-icon svg { width: 2.35rem; height: 2.35rem; }
.confidentiality-refined h2 { margin: 0 0 .25rem; font-size: clamp(1.45rem, 2.2vw, 2rem); }
.confidentiality-refined p { color: #9b4f42; font-weight: 600; }
.confidentiality-refined:hover { background: rgba(255, 250, 244, .96); transform: translateY(-1px); }
.confidentiality-refined { transition: background .2s ease, transform .2s ease; }

@media (max-width: 1450px) {
  .framework-refined { grid-template-columns: 1fr 1fr; }
  .framework-refined > div:nth-child(2) { border-right: 0; }
  .framework-refined > div:nth-child(-n+2) { border-bottom: 1px solid rgba(86, 58, 50, .11); }
}

@media (max-width: 760px) {
  .steps-refined { padding: 2.8rem 1rem 4.5rem; }
  .framework-refined .audience-list span { white-space: normal; }
  .steps-heading { text-align: left; margin-bottom: 2rem; padding: 0 .25rem; }
  .steps-heading h1 { font-size: clamp(2.35rem, 11vw, 3.25rem); }
  .step-grid-refined { grid-template-columns: 1fr; }
  .step-grid-refined article,
  .step-grid-refined article:nth-child(1),
  .step-grid-refined article:nth-child(2),
  .step-grid-refined article:nth-child(3) { min-height: 0; padding: 1.5rem; border-radius: 18px; }
  .step-icon { width: 4.3rem !important; height: 4.3rem !important; }
  .step-icon svg { width: 2.35rem; height: 2.35rem; }
  .step-icon-hands svg { width: 2.9rem; height: 2.9rem; }
  .step-icon-hands img { width: 3rem; }
  .framework-refined { margin-top: 3.25rem; }
  .framework-refined { grid-template-columns: 1fr; border-radius: 18px; }
  .framework-refined > div,
  .framework-refined > div:nth-child(2) {
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(86, 58, 50, .11);
  }
  .framework-refined > div:last-child { border-bottom: 0; }
  .confidentiality-refined { grid-template-columns: 3.5rem 1fr; }
  .confidentiality-refined .confidentiality-icon { width: 3.5rem; height: 3.5rem; }
}

@media (max-width: 920px) {
  body { padding-top: 98px; }
  .topics { grid-template-columns: 1fr 1fr; }
  .site-header {
    height: 98px;
    padding-inline: clamp(1rem, 5vw, 2rem);
    background: #f1ddcf;
  }
  .site-header .brand { gap: .9rem; }
  .site-header .brand-lockup { width: min(20rem, 64vw); max-height: 4.9rem; }
  .site-header .brand-lockup { transform: translateX(-2rem); }
  .site-header .brand-mark { width: 4.35rem; height: 4.35rem; }
  .site-header .brand-copy strong {
    font-size: clamp(1.2rem, 4.4vw, 1.55rem);
    font-weight: 600;
    letter-spacing: .01em;
  }
  .site-header .brand-copy small {
    display: block;
    font-size: .48rem;
    line-height: 1.25;
    letter-spacing: .045em;
  }
  .menu-toggle {
    padding: .6rem 0 .6rem .8rem;
    color: #a05747;
    font-size: 1.14rem;
    font-weight: 600;
  }
  .site-header nav { top: 98px; background: #f1ddcf; }
  .site-header.is-compact { height: 49px; }
  .site-header.is-compact .brand-lockup { width: min(10rem, 32vw); max-height: 2.45rem; }
  .site-header.is-compact .menu-toggle { font-size: .82rem; }
  .site-header.is-compact nav { top: 49px; }
  .hero { padding-bottom: 2.5rem; }
  .hero-image {
    background-image: linear-gradient(0deg, #f7e8dc 0%, rgba(247, 232, 220, .08) 42%), url("images/praxis-hero-olive-leaves.png");
  }
  .hero-copy { width: auto; }
  .topics article:nth-child(odd),
  .topics article:nth-child(3) { padding-left: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .brand-lockup,
  .site-header nav,
  .menu-toggle { transition: none; }
}

@media (max-width: 560px) {
  .site-header { padding-inline: 1.05rem; }
  .site-header .brand { gap: .75rem; }
  .site-header .brand-lockup { width: min(17rem, calc(100vw - 7.2rem)); max-height: 4.5rem; }
  .site-header .brand-lockup { transform: none; }
  .site-header.is-compact .brand-lockup { width: min(8.5rem, calc(100vw - 7.2rem)); max-height: 2.25rem; }
  .site-header .brand-mark { width: 4rem; height: 4rem; }
  .site-header .brand-copy strong { font-size: clamp(1.08rem, 5vw, 1.42rem); }
  .site-header .brand-copy small { font-size: .42rem; letter-spacing: .035em; }
  .menu-toggle { font-size: 1.08rem; }
  .hero-actions { grid-template-columns: 8.2rem minmax(0, 1fr); }
  .hero-mini-portrait { width: 8.2rem; height: 10.25rem; margin: 0; flex: none; }
  .hero-action-links { min-width: 0; }
  .hero-action-links .button { width: 100%; min-height: 6rem; padding: .9rem 1rem; text-align: center; line-height: 1.25; }
  h1 { font-size: clamp(3.1rem, 13vw, 4.6rem); }
  .intro { padding-bottom: 7.2rem; }
  .topics { gap: .8rem; padding-top: 3.5rem; }
  .topics::before { top: -4.5rem; height: 4.6rem; }
  .topics article { min-height: auto; padding: 1.65rem; }
  .topics article:nth-child(odd),
  .topics article:nth-child(3n+1),
  .topics article:nth-child(3) { padding-left: 1.65rem; }

  .topics-unified article,
  .topics-unified article:nth-child(n) {
    min-height: 0;
    height: auto;
    min-width: 0;
    padding: 1rem;
    display: block;
    overflow: hidden;
  }
  .topics-unified .topic-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0 .75rem;
  }
  .topics-unified .topic-icon svg {
    width: 1.9rem;
    height: 1.9rem;
  }
  .topics-unified h3 {
    max-width: 100%;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    hyphens: none;
  }
  .topics-unified article > p {
    max-width: 100%;
    margin-top: .6rem;
    font-size: .8rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Keep the opening photograph edge-to-edge on phones and portrait tablets. */
@media (max-width: 1100px) {
  .hero {
    display: block;
    width: 100%;
    min-height: auto;
    overflow: hidden;
  }

  .hero-image {
    display: block;
    width: 100vw;
    min-width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: clamp(32rem, 92svh, 52rem);
    background-size: cover;
    background-position: 62% center;
  }

  .hero-copy {
    position: relative;
    width: auto;
    left: auto;
    top: auto;
    transform: none;
    padding: 2.75rem 1.5rem 2rem;
    margin-top: 0;
  }

  .availability {
    position: relative;
    right: auto;
    bottom: auto;
    width: max-content;
    max-width: calc(100% - 3rem);
    margin: 0 1.5rem;
  }
}

/* A personal introduction early on makes the therapist visible before the service sections. */
.hero-actions { display: block; }
.personal-welcome {
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 10vw, 11rem);
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 650px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ead8c9 0%, #f0e4d8 55%, #e3c9b8 100%);
}
.personal-welcome-portrait {
  width: 100%;
  max-width: 300px;
  justify-self: center;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 3px solid rgba(255, 250, 244, .9);
  border-radius: 3px 34px 3px 3px;
  box-shadow: 12px -12px 0 rgba(159, 98, 85, .15), 20px 22px 50px rgba(79, 55, 46, .15);
}
.personal-welcome-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 10%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.personal-welcome-copy h2 { font-size: clamp(2.7rem, 4.6vw, 4.8rem); }
.personal-welcome-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 1.35rem 0 0;
  color: #59463f;
  font-size: clamp(1.18rem, 1.42vw, 1.32rem);
  font-weight: 500;
  line-height: 1.75;
}
.personal-welcome-copy .text-link { display: inline-block; margin-top: 1.8rem; font-size: 1.12rem; }
.about-subheading {
  margin: 2.2rem 0 .65rem;
  color: #553b34;
  font-size: 1.28rem;
  font-weight: 700;
}
.role + .about-subheading { margin-top: 1.6rem; }

@media (max-width: 760px) {
  .personal-welcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block: 4.2rem;
  }
  .personal-welcome-portrait {
    width: min(68vw, 300px);
    aspect-ratio: 4 / 5;
    justify-self: center;
  }
  .personal-welcome-copy { text-align: left; }
  .personal-welcome-copy h2 { font-size: clamp(2.55rem, 11vw, 4rem); }
  .about-copy > .about-subheading { order: 5; }
  .hero-action-links { max-width: 22rem; }
  .hero-action-links .button { width: auto; min-height: auto; padding: 1rem 1.6rem; }
}

/* Compact links from the calm opening page to the detailed sections. */
.section-directory {
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 8vw, 9rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  background: #f6eee6;
}
.section-directory::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -7.5rem;
  left: 0;
  width: 100%;
  height: 7.6rem;
  background: center bottom / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23f6eee6' d='M0 72C180 18 330 26 514 84c207 65 351 64 542-4 160-57 259-68 384-34v104H0Z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.section-directory a {
  position: relative;
  z-index: 1;
  min-height: 92px;
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #513a33;
  text-decoration: none;
  background: rgba(255, 251, 246, .88);
  border-top: 3px solid #c88876;
  border-radius: 2px 22px 2px 2px;
  box-shadow: 7px 9px 22px rgba(83, 55, 46, .10);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.section-directory a:nth-child(1) { border-top-color: #bd735f; }
.section-directory a:nth-child(2) { border-top-color: #d8aa63; }
.section-directory a:nth-child(3) { border-top-color: #c98f92; }
.section-directory a:nth-child(4) { border-top-color: #aa9284; }
.section-directory a:nth-child(5) { border-top-color: #9faa8e; }
.section-directory a:nth-child(6) { border-top-color: #d39a78; }
.section-directory a:hover,
.section-directory a:focus-visible {
  transform: translateY(-3px);
  background: #fffaf4;
  box-shadow: 9px 13px 28px rgba(83, 55, 46, .16);
}
.section-directory span { font-family: Alata, sans-serif; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.section-directory b { color: #ad5542; font-size: 1.45rem; font-weight: 500; }

@media (max-width: 900px) {
  .section-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .section-directory { grid-template-columns: 1fr; }
  .section-directory::before { top: -4.5rem; height: 4.6rem; }
  .section-directory a { min-height: 76px; }
}

/* High-contrast but gentle primary navigation action. */
.site-header .nav-cta {
  padding: .82rem 1.65rem;
  color: #503830;
  background: #fffaf2;
  border: 1.5px solid #c9826f;
  box-shadow: 0 8px 22px rgba(94, 59, 48, .14);
  font-weight: 700;
}
.site-header .nav-cta:hover,
.site-header .nav-cta:focus-visible {
  color: #503830;
  background: #f8eadc;
  border-color: #ad5c49;
}

.about-side-portrait {
  width: min(100%, 390px);
  margin: 0 auto 2.4rem;
  overflow: hidden;
  border: 3px solid rgba(255, 250, 244, .88);
  border-radius: 3px 34px 3px 3px;
  box-shadow: 12px -10px 0 rgba(160, 98, 84, .15), 16px 20px 38px rgba(77, 51, 43, .14);
}
.about-side-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  pointer-events: none;
  user-select: none;
}

.legal-page {
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 8vw, 9rem);
  background: linear-gradient(145deg, #f2e4d8 0%, #e5c9b7 100%);
}
.legal-card {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: rgba(255, 250, 244, .92);
  border-top: 4px solid #c9826f;
  border-radius: 3px 38px 3px 3px;
  box-shadow: 12px 16px 38px rgba(82, 54, 45, .12);
}
.legal-card h1 { margin-bottom: 2.5rem; font-size: clamp(3rem, 6vw, 5.5rem); }
.legal-card section { margin-top: 2.2rem; }
.legal-card h2 { margin: 0 0 .6rem; font-family: Alata, sans-serif; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.legal-card p { max-width: 780px; margin: .5rem 0 0; line-height: 1.75; }
.legal-card a { color: #914b3e; font-weight: 600; }
.address-note { color: #8a746b; font-size: .88rem; font-weight: 500; }

@media (max-width: 760px) {
  .legal-card h1 {
    white-space: nowrap;
    font-size: clamp(1.4rem, 6.6vw, 2.4rem);
    letter-spacing: -.035em;
  }
}

/* Clear multi-page structure: the home page gives a concise overview. */
.page-overview {
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 8vw, 9rem);
  background: #f8f1e9;
}
.page-overview-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.page-overview-head h2 { font-size: clamp(2.7rem, 5vw, 5rem); }
.page-overview-head > p:last-child { margin-top: 1rem; font-size: 1.12rem; }
.page-overview-grid {
  width: min(100%, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.page-overview-grid > a {
  min-height: 250px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  color: #503830;
  text-decoration: none;
  background: rgba(255, 251, 246, .92);
  border-top: 4px solid #cb9480;
  border-radius: 2px 30px 2px 2px;
  box-shadow: 10px 12px 28px rgba(85, 57, 48, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.page-overview-grid > a:nth-child(2n) { border-top-color: #dda65f; }
.page-overview-grid > a:hover,
.page-overview-grid > a:focus-visible { transform: translateY(-4px); box-shadow: 12px 17px 34px rgba(85, 57, 48, .18); }
.page-overview-grid span { color: #ad5542; font-family: Alata, sans-serif; font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; }
.page-overview-grid h3 { margin: 1rem 0 .7rem; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.page-overview-grid p { margin: 0; line-height: 1.65; }
.page-overview-grid b { margin-top: auto; padding-top: 1.4rem; color: #a64e3b; font-weight: 700; }
.home-cta { padding: clamp(4.5rem, 8vw, 7rem) 1.5rem; text-align: center; background: #efddcf; }
.home-cta h2 { max-width: 900px; margin-inline: auto; font-size: clamp(2.6rem, 5vw, 5rem); }
.home-cta > p:not(.eyebrow) { max-width: 720px; margin: 1.3rem auto 2rem; font-size: 1.12rem; line-height: 1.75; }
.happiness-illustration {
  padding: clamp(2.5rem, 5vw, 4.75rem) clamp(1rem, 6vw, 5rem);
  background: #f8f1e9;
}
.happiness-illustration img {
  display: block;
  width: min(100%, 1180px);
  height: auto;
  margin: 0 auto;
  border-radius: 28px;
  box-shadow: 0 16px 38px rgba(82, 54, 45, .12);
  pointer-events: none;
  user-select: none;
}
.subpage-intro { padding-top: clamp(4rem, 7vw, 7rem); }
.subpage-topics { padding-top: clamp(5rem, 8vw, 8rem); }
.approach-page, .about-page, .steps-page, .contact-page { padding-top: clamp(4.5rem, 8vw, 8rem); }
.about-page-portrait { margin: 0 0 2rem; overflow: hidden; border-radius: 3px 40px 3px 3px; box-shadow: 14px -12px 0 rgba(163, 104, 89, .17), 18px 22px 45px rgba(74, 49, 42, .15); }
.about-page-portrait img { display: block; width: 100%; max-height: 620px; object-fit: cover; object-position: center 15%; }

@media (max-width: 980px) {
  .page-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .page-overview-grid { grid-template-columns: 1fr; }
  .page-overview-grid > a { min-height: 215px; }
  .knowledge-hero { min-height: auto; padding-top: 5.5rem; padding-bottom: 2.75rem; }
  .intro {
    padding-top: 13rem;
    padding-bottom: 12rem;
  }
  .offer-journey {
    display: block;
    top: 8.5rem;
    bottom: 8.5rem;
    width: min(92vw, 460px);
    height: calc(100% - 17rem);
    object-fit: fill;
    opacity: .15;
    clip-path: inset(4rem 45% 4rem 45%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .intro::before,
  .intro::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    width: 100%;
    background-image: url("images/angebot-weg-zur-sonne.png");
    background-repeat: no-repeat;
    background-size: min(92vw, 460px) auto;
    opacity: .62;
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  .intro::before {
    top: 1rem;
    height: 10rem;
    background-position: center top;
  }
  .intro::after {
    bottom: 0;
    height: 10.5rem;
    background-position: center bottom;
  }
  .happiness-illustration { padding: 2rem .85rem 2.5rem; }
  .happiness-illustration img { border-radius: 18px; }
}

/* Modern hamburger navigation on every screen size. */
.site-header .menu-toggle {
  position: relative;
  z-index: 12;
  width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #563a32;
  background: rgba(255, 250, 244, .82);
  border: 1px solid rgba(130, 78, 62, .28);
  border-radius: 50%;
  box-shadow: 0 7px 20px rgba(82, 54, 45, .1);
  cursor: pointer;
}
.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus-visible {
  background: #fffaf4;
  border-color: #a65b49;
}
.menu-icon {
  width: 23px;
  height: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-icon span {
  width: 100%;
  height: 2px;
  display: block;
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease;
}
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-header #main-nav {
  position: absolute;
  top: calc(100% + .7rem);
  right: clamp(1rem, 4vw, 5rem);
  left: auto;
  width: min(390px, calc(100vw - 2rem));
  padding: 1.15rem;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: .18rem;
  background: rgba(250, 241, 232, .98);
  border: 1px solid rgba(130, 78, 62, .2);
  border-radius: 26px 4px 26px 26px;
  box-shadow: 0 22px 55px rgba(72, 45, 37, .2);
}
.site-header #main-nav.open {
  display: flex;
  animation: menuReveal .2s ease-out;
}
.site-header #main-nav a {
  padding: .82rem 1rem;
  font-size: 1rem;
  border-radius: 12px;
}
.site-header #main-nav a:not(.nav-cta):hover,
.site-header #main-nav a:not(.nav-cta):focus-visible,
.site-header #main-nav a.active {
  background: rgba(201, 130, 111, .12);
}
.site-header #main-nav .nav-cta {
  margin-top: .45rem;
  text-align: center;
}
.site-header.is-compact .menu-toggle {
  width: 40px;
  height: 40px;
}
.site-header.is-compact #main-nav {
  top: calc(100% + .55rem);
}
@keyframes menuReveal {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
  .site-header .menu-toggle {
    width: 44px;
    height: 44px;
  }
  .site-header #main-nav {
    right: .75rem;
    width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header #main-nav.open { animation: none; }
  .menu-icon span { transition: none; }
}

/* Footer claim sits quietly and directly below the logo. */
footer {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto minmax(12rem, 1fr);
  grid-template-areas:
    "brand copyright links"
    "claim copyright links";
  column-gap: 2rem;
  row-gap: .35rem;
  align-items: center;
}
footer .footer-brand { grid-area: brand; justify-self: start; }
footer > p:not(.footer-claim) { grid-area: copyright; justify-self: center; margin: 0; }
footer nav { grid-area: links; justify-self: end; }
footer .footer-claim { grid-area: claim; justify-self: start; }

@media (max-width: 760px) {
  footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "claim"
      "copyright"
      "links";
    gap: .75rem;
    align-items: start;
  }
  footer > p:not(.footer-claim),
  footer nav { justify-self: start; }
}

/* Helle Testfassung: Inhalte und Aufbau bleiben unverändert. */
:root {
  --cream: #fffaf6;
  --blush: #f1ddd2;
  --vanilla: #fbefe5;
  --petal: #efd5ca;
  --greige: #eee4da;
  --line: rgba(83, 58, 49, .12);
}
body,
.knowledge-page { background: #fffaf6; }
.vt-page { background: #f1ddd2; }
.site-header {
  background: rgba(255, 252, 248, .96);
  border-bottom-color: rgba(86, 58, 50, .07);
  box-shadow: 0 8px 24px rgba(74, 47, 38, .025);
}
.site-header nav { background: var(--cream); }
.hero {
  background: linear-gradient(120deg, #fcf5ef 0%, #f2ded1 72%, #e6c3b1 100%);
}
.hero::before {
  background: linear-gradient(170deg, rgba(244, 195, 126, .15), rgba(255, 252, 248, 0));
}
.hero-image {
  background-image: linear-gradient(90deg, #f9eee7 0%, rgba(249, 238, 231, .27) 18%, rgba(255, 255, 255, 0) 43%), url("images/praxis-hero-olive-leaves.png");
}
.reassurance { background: #f2ddcf; }
.intro { background: #fffaf6; }
.topics {
  background: #f7e8de;
}
.topics::before {
  background: center bottom / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23f7e8de' d='M0 72C180 18 330 26 514 84c207 65 351 64 542-4 160-57 259-68 384-34v104H0Z'/%3E%3C/svg%3E");
}
.topics article,
.topics article:nth-child(n),
.topics article:nth-of-type(n) {
  background: #fff8f3;
  box-shadow: 6px -6px 0 rgba(145, 86, 66, .09), 12px -10px 24px rgba(102, 63, 49, .07);
}
.topics article:nth-of-type(2),
.topics article:nth-of-type(7) { background: #fff9ef; }
.topics article:nth-of-type(3),
.topics article:nth-of-type(8) { background: #fbf5ef; }
.topics article:nth-of-type(4),
.topics article:nth-of-type(9) { background: #fdf2ef; }
.topics article:nth-of-type(5),
.topics article:nth-of-type(10) { background: #fdf6ec; }
.life-stages {
  background: linear-gradient(135deg, #f7e6dc 0%, #f8eee3 55%, #efd8ca 100%);
}
.life-stage-grid article {
  background: #fff8f3;
  box-shadow: 6px -6px 0 rgba(145, 86, 66, .09), 12px -10px 24px rgba(102, 63, 49, .07);
}
.life-stage-adult { background: #fcf6f1 !important; }
.life-stage-older { background: #fff8ed !important; }
.approach { background: #f3dfd2; }
.therapy-path {
  background: linear-gradient(145deg, #c87966 0%, #ad6050 100%);
}
.approach-copy { background: #f5e4d8; }
.quote-path { background: linear-gradient(120deg, #f1dfd3, #e8cdbd); }
.quote-future { background: linear-gradient(120deg, #efd6c7, #e4bdad); }
.quote-growth { background: #f6e6dc; }
.about { background: #f8e9de; }
.guidance {
  background: linear-gradient(135deg, #f4dfd2 0%, #f8e9df 68%, #eccfbe 100%);
}
.guidance-card {
  background: rgba(255, 252, 248, .94);
  box-shadow: 0 18px 40px rgba(83, 52, 42, .07);
}
.steps { background: #f8e9de; }
.step-grid article,
.step-grid article:nth-child(1),
.step-grid article:nth-child(2),
.step-grid article:nth-child(3) {
  background: #fffdfa;
  box-shadow: 0 14px 30px rgba(91, 62, 48, .055);
}
.framework { background: #fbefe6; }
.confidentiality { background: #faf0e7; }
.knowledge-hero {
  background: radial-gradient(circle at 82% 20%, rgba(236, 183, 97, .22), transparent 28%), linear-gradient(135deg, #faeee5, #f7ead3);
}
.knowledge-section { background: linear-gradient(145deg, #fbefe7, #f2ded2); }
.knowledge-section.confidentiality-section { background: linear-gradient(135deg, #f9efd8, #f8e8dd); }
.faq-section { background: #f6e5da; }
.faq-list details { background: #fffdfa; }
.knowledge-cta { background: #efd8c9; }
.contact {
  color: var(--ink);
  background: linear-gradient(125deg, #f4dfd3 0%, #efd3c3 58%, #e4b6a2 100%);
}
.contact h2,
.contact .eyebrow { color: var(--plum-dark); }
.contact-panel {
  background: rgba(255, 252, 248, .96);
  box-shadow: 0 18px 42px rgba(91, 62, 48, .09);
}
.vt-hero-copy,
.vt-hero-statement { background: transparent; }
.vt-hero {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1.25rem;
  padding: 0;
  background: linear-gradient(105deg, #b76350 0%, #c47b66 100%);
  border-radius: 28px;
  overflow: hidden;
}
.vt-hero-copy,
.vt-hero-statement {
  border-radius: 0;
  overflow: hidden;
}
.vt-explainer {
  margin: 0 1.25rem 1.25rem;
  padding: 0;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  background: transparent;
  border-radius: 28px;
  overflow: hidden;
}
.vt-explainer .vt-text {
  max-width: none;
  padding: clamp(2.5rem, 4vw, 4rem);
  color: var(--ink);
  background: linear-gradient(110deg, #fff4ec 0%, #f3dbce 100%);
  border-radius: 0;
  clip-path: none;
  overflow: hidden;
}
.vt-explainer .vt-text h2,
.vt-explainer .vt-text > p { color: var(--muted); }
.vt-explainer .vt-text h2 { color: var(--plum-dark); }
.vt-explainer .vt-text > p {
  font-size: clamp(1.12rem, 1.25vw, 1.28rem);
  line-height: 1.72;
}
.vt-explainer .vt-focus {
  color: var(--ink);
  padding: 0;
  background: linear-gradient(to bottom, #aa6658 0%, #b97867 20%, #d39b8b 34%, #ecd0c3 43%, #f8e9df 51%, #fff7ef 60%, #fff7ef 100%);
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
}
.vt-focus-content {
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
}
.vt-focus-head {
  position: relative;
  overflow: hidden;
  padding: clamp(2.35rem, 3.5vw, 3.4rem) clamp(2.5rem, 4vw, 4rem) clamp(2.7rem, 4vw, 3.8rem);
  background: transparent;
}
.vt-focus-head::after {
  content: none;
}
.vt-focus-body {
  position: relative;
  margin-top: 0;
  padding: clamp(1.25rem, 2vw, 1.8rem) clamp(2.5rem, 4vw, 4rem) clamp(2.1rem, 3vw, 2.8rem);
  background: transparent;
}
.vt-focus-sun {
  position: absolute;
  right: 3.5%;
  bottom: -2.1rem;
  width: clamp(10rem, 15vw, 15rem);
  opacity: .72;
  pointer-events: none;
  z-index: 2;
}
.vt-explainer .vt-focus h3,
.vt-explainer .vt-focus-intro { color: #fffaf5; }
.vt-step-note {
  width: max-content;
  margin: .15rem 0 1.1rem .15rem;
  color: #fff;
  font-family: "Yuyu", cursive;
  font-size: clamp(2.25rem, 3.4vw, 3.15rem);
  line-height: 1;
  transform: rotate(-6deg);
  transform-origin: left center;
  text-shadow: 0 2px 12px rgba(74, 35, 28, .18);
}
.vt-explainer .vt-focus h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.55rem, 2.15vw, 1.95rem);
  font-weight: 600;
  line-height: 1.25;
}
.vt-explainer .vt-focus-intro {
  margin-bottom: 1rem;
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.08rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}
.vt-explainer .vt-focus ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  column-gap: clamp(2rem, 3vw, 3.5rem);
}
.vt-explainer .vt-focus li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: .8rem;
  padding: 0;
  font-size: clamp(1.2rem, 1.35vw, 1.34rem);
  line-height: 1.42;
  color: #5f4038;
}
.vt-explainer .vt-focus li::before { content: none; }
.vt-focus-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  color: #a65e4e;
  background: rgba(185,120,103,.1);
  border: 1px solid rgba(166,94,78,.24);
  border-radius: 50%;
}
.vt-focus-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vt-focus-closing {
  margin: 2cm 0 2.2rem;
  color: #744a40;
  font-family: "Yuyu", cursive;
  font-size: clamp(1.95rem, 2.4vw, 2.35rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
.vt-explainer .vt-focus::before,
.vt-explainer .vt-focus::after { display: none; }
.vt-suitable { background: #fffdfa; }
.vt-focus,
.vt-concerns { background: linear-gradient(135deg, #faece6, #fdf5f0); }
.vt-history { background: linear-gradient(130deg, #f8e8df, #f1dacb); }
.vt-process { background: linear-gradient(135deg, #f4e2d7 0%, #f9eee7 55%, #edcfbf 100%); }
.vt-science { background: linear-gradient(145deg, #f7e6df, #fdf3ee); }
.vt-closing-quote { background: linear-gradient(110deg, #edd4c4, #f7e7dd); }
.home-cta { background: #f8e9df; }
.happiness-illustration { background: #fdf8f3; }
.page-overview { background: #fffaf6; }
.page-overview-grid > a {
  background: rgba(255, 253, 250, .96);
  box-shadow: 8px 10px 24px rgba(85, 57, 48, .075);
}
.legal-page { background: linear-gradient(145deg, #fbf1e9 0%, #f3dfd3 100%); }
footer { background: #e8cbbb; }

.vt-intro-line {
  margin: clamp(1.6rem, 3vw, 2.6rem) 1.25rem;
  text-align: center;
}
.vt-intro-line p {
  margin: 0;
  color: #9a4d3d;
  font-family: "Yuyu", cursive;
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  line-height: 1.25;
}

@media (max-width: 920px) {
  .vt-intro-line {
    margin: 1.35rem 1rem 1.15rem;
  }
  .vt-intro-line p {
    font-size: 1.65rem;
  }
  .vt-hero {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 1rem;
    padding: 0;
    background: linear-gradient(180deg, #b76350 0%, #c47b66 100%);
    border-radius: 24px;
  }
  .vt-hero-copy,
  .vt-hero-statement { border-radius: 0; }
  .vt-explainer {
    margin: 0 1rem 1rem;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 0;
    background: linear-gradient(180deg, #fff4ec 0%, #f3dbce 30%, #dfa691 52%, #c67c66 72%, #aa5c4b 100%);
    border-radius: 24px;
  }
  .vt-explainer .vt-text {
    max-width: none;
    margin: 0;
    padding: 2.4rem 1.8rem;
    background: transparent;
    border-radius: 0;
    clip-path: none;
  }
  .vt-explainer .vt-focus {
    padding: 0;
    border-radius: 0;
    clip-path: none;
  }
  .vt-focus-head,
  .vt-focus-body {
    padding-left: 1.55rem;
    padding-right: 1.55rem;
  }
  .vt-focus-sun {
    position: static;
    display: block;
    margin: 1.6rem 0 0 auto;
    width: 8.5rem;
    height: auto;
    object-fit: contain;
    transform: none;
    opacity: .58;
  }
  .vt-explainer .vt-focus ul {
    grid-template-columns: 1fr;
  }
  .vt-explainer .vt-focus li {
    grid-template-columns: 2.8rem 1fr;
    gap: .75rem;
    font-size: 1.08rem;
  }
  .vt-focus-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
}

/* Let the Glück illustration flow into the surrounding homepage colors. */
.happiness-illustration {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(
    to bottom,
    #f8e9df 0%,
    #fdf8f3 18%,
    #fdf8f3 78%,
    #e8cbbb 100%
  );
}
.happiness-illustration::before,
.happiness-illustration::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  height: clamp(2rem, 7vw, 6rem);
  pointer-events: none;
}
.happiness-illustration::before {
  top: 0;
  background: linear-gradient(to bottom, #f8e9df, rgba(248, 233, 223, 0));
}
.happiness-illustration::after {
  bottom: 0;
  background: linear-gradient(to top, #e8cbbb, rgba(232, 203, 187, 0));
}
.happiness-illustration img {
  width: min(100%, 1280px);
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
}
@media (max-width: 640px) {
  .happiness-illustration {
    padding: 0;
  }
  .happiness-illustration img {
    width: 100%;
    border-radius: 0;
  }
}

/* Etwas großzügigerer mobiler Kopfbereich für bessere Erkennbarkeit */
@media (max-width: 920px) {
  body { padding-top: 110px; }
  .site-header { height: 110px; }
  .site-header .brand-lockup {
    width: min(22rem, 68vw);
    max-height: 5.35rem;
  }
}

@media (max-width: 640px) {
  .site-header .brand-lockup {
    width: min(19rem, calc(100vw - 7.6rem));
    max-height: 5rem;
  }
  .site-header .menu-toggle {
    width: 56px;
    height: 56px;
  }
  .site-header .menu-icon {
    width: 27px;
    height: 20px;
  }
  .site-header .menu-icon span { height: 2.5px; }
  .site-header.is-compact .menu-toggle {
    width: 46px;
    height: 46px;
  }
  .site-header.is-compact .menu-icon {
    width: 23px;
    height: 17px;
  }
}

/* Glücksbild bewusst zurückhaltender als ruhiger Abschluss. */
.happiness-illustration {
  padding: clamp(.75rem, 2vw, 1.5rem) 0;
}
.happiness-illustration img {
  width: min(82%, 920px);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 640px) {
  .happiness-illustration {
    padding: .65rem 0 1rem;
  }
  .happiness-illustration img {
    width: 90%;
    max-width: 620px;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%);
  }
}

/* Ausgewogenes Verhältnis von Logo und Menü auf Desktop und Mobil */
@media (min-width: 921px) {
  body { padding-top: 132px; }
  .site-header {
    height: 132px;
    padding-inline: clamp(2rem, 4vw, 5rem);
  }
  .site-header .brand-lockup {
    width: clamp(26rem, 30vw, 32rem);
    max-height: 7rem;
  }
  .site-header nav {
    gap: clamp(1rem, 1.8vw, 2rem);
  }
  .site-header nav a {
    font-size: .96rem;
  }
  .site-header .menu-toggle {
    width: 46px;
    height: 46px;
  }
  .site-header .menu-icon {
    width: 21px;
    height: 16px;
  }
  .site-header.is-compact {
    height: 58px;
  }
  .site-header.is-compact .brand-lockup {
    width: clamp(11rem, 14vw, 14rem);
    max-height: 3.25rem;
  }
}

@media (max-width: 640px) {
  .site-header .brand-lockup {
    width: min(20rem, calc(100vw - 7.2rem));
    max-height: 5.2rem;
  }
  .site-header .menu-toggle {
    width: 50px;
    height: 50px;
  }
  .site-header .menu-icon {
    width: 24px;
    height: 18px;
  }
  .site-header.is-compact .menu-toggle {
    width: 42px;
    height: 42px;
  }
  .site-header.is-compact .menu-icon {
    width: 21px;
    height: 16px;
  }
}

/* Klare Beschriftung neben dem Burger-Menü */
@media (max-width: 920px) {
  .site-header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: .55rem;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-header .menu-toggle:hover,
  .site-header .menu-toggle:focus-visible {
    background: transparent;
    border-color: transparent;
  }
  .site-header .menu-label {
    display: inline-block;
    color: #71483e;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
  }
  .site-header.is-compact .menu-toggle {
    width: auto;
  }
  .site-header.is-compact .menu-label {
    font-size: .72rem;
  }
}

/* Am Desktop stehen alle Seiten direkt im Kopfbereich; Burger nur mobil. */
@media (min-width: 921px) {
  .site-header .menu-toggle {
    display: none;
  }
  .site-header #main-nav,
  .site-header #main-nav.open,
  .site-header.is-compact #main-nav {
    position: static;
    width: auto;
    max-height: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(.75rem, 1.2vw, 1.4rem);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .site-header #main-nav a {
    padding: .5rem .12rem;
    font-size: clamp(.95rem, 1vw, 1.08rem);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
  }
  .site-header #main-nav a.active {
    background: transparent;
    border-radius: 0;
  }
  .site-header #main-nav .nav-cta {
    margin-top: 0;
    padding-inline: .85rem;
  }
}

@media (min-width: 921px) and (max-width: 1180px) {
  .site-header {
    gap: .8rem;
    padding-inline: 1.5rem;
  }
  .site-header .brand-lockup {
    width: 18rem;
  }
  .site-header #main-nav {
    gap: .55rem;
  }
  .site-header #main-nav a {
    font-size: .88rem;
  }
}

/* Ruhiger, kompakter Abschluss: Marke links, Rechtliches rechts gebündelt. */
footer {
  min-height: 165px;
  padding: 1.55rem max(2rem, calc((100vw - 880px) / 2)) 1.35rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand brand"
    "claim claim"
    "copyright links";
  column-gap: 2rem;
  row-gap: .18rem;
}
footer .footer-brand,
footer .footer-claim {
  justify-self: center;
}
footer > p:not(.footer-claim),
footer nav {
  margin-top: .85rem;
}
footer > p:not(.footer-claim) { justify-self: start; }
footer nav { justify-self: end; }
footer nav {
  gap: 1.35rem;
}

@media (max-width: 760px) {
  footer {
    min-height: auto;
    padding: 1.8rem 1.25rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "claim"
      "copyright"
      "links";
    gap: .65rem;
    text-align: center;
  }
  footer .footer-brand,
  footer .footer-claim,
  footer > p:not(.footer-claim),
  footer nav {
    justify-self: center;
  }
}

/* Größeres HoffnungsRaum-Logo im Desktopkopf, Mobilansicht bleibt unverändert. */
@media (min-width: 921px) and (max-width: 1180px) {
  .site-header {
    padding-inline: 2.5rem;
    gap: .55rem;
  }
  .site-header .brand-lockup {
    width: 19.5rem;
    max-height: 7rem;
  }
}

/* Mobiler Fußbereich: deutlich kompaktere vertikale Abstände. */
@media (max-width: 760px) {
  footer {
    padding: 1.1rem 1.1rem 1.25rem;
    gap: .22rem;
    row-gap: .22rem;
  }
  footer .footer-brand .brand-lockup {
    width: min(15rem, 68vw);
    max-height: 4.5rem;
  }
  footer .footer-claim {
    margin: 0 0 .3rem;
    line-height: 1.35;
  }
  footer > p:not(.footer-claim) {
    margin: .35rem 0 .15rem;
  }
  footer nav {
    margin: 0;
    gap: 1.1rem;
  }
}

/* Name und Rechtliches bilden mobil einen klar abgesetzten unteren Block. */
@media (max-width: 760px) {
  footer > p:not(.footer-claim) {
    margin: 1.35rem 0 .15rem;
  }
  footer nav {
    margin-top: .3rem;
  }
}

/* Beratung: Der Inhaltsblock greift den hellen Eichenrahmen des Porträts auf. */
.guidance-page .guidance-card {
  border: 4px solid transparent;
  border-image: linear-gradient(115deg, #d8bd98 0%, #bb956d 48%, #dcc5a4 100%) 1;
  border-radius: 0;
  box-shadow: 0 9px 22px rgba(93, 63, 48, .09);
}

/* Der Biografieabschnitt ist eine zusammenhängende Illustration. */
.vt-history-image {
  width: auto;
  margin: 2rem clamp(1.5rem, 6vw, 7rem) clamp(3rem, 6vw, 5.5rem);
  background: #f8e9e3;
  border-radius: 24px;
  overflow: hidden;
}
.vt-history-image picture {
  display: block;
}
.vt-history-image img {
  display: block;
  width: min(1450px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 560px) {
  .vt-history-image {
    width: auto;
    margin: 1.5rem 1rem 2rem;
    border-radius: 22px;
  }
  .vt-history-image picture {
    aspect-ratio: 820 / 1680;
    overflow: hidden;
  }
  .vt-history-image img { width: 100%; }
}

/* Wissenschaftsblock: mobil vollständig und ruhig innerhalb des Rahmens. */
@media (max-width: 560px) {
  .vt-page .vt-science-standalone {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 2rem 1rem;
    padding: 1.75rem 1.15rem;
  }
  .vt-page .vt-science-standalone h2 {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -.015em;
    overflow-wrap: normal;
    hyphens: auto;
  }
  .vt-page .vt-science-standalone > p:not(.eyebrow) {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Verhaltenstherapie: alle inhaltlichen Abschnitte als große, ruhige Kacheln. */
.vt-page .vt-explainer,
.vt-page .vt-process,
.vt-page .vt-closing-quote,
.vt-page .vt-history-image,
.vt-page .vt-science-standalone {
  box-sizing: border-box;
  width: auto;
  margin: 0 1.25rem 1.25rem;
  border-radius: 28px;
  overflow: hidden;
}

.vt-page .vt-science-standalone {
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* Einheitliche Stärke für sämtliche Fließtexte; Überschriften und Sprüche bleiben eigenständig. */
.vt-page .vt-text > p,
.vt-page .vt-focus-intro,
.vt-page .vt-focus li,
.vt-page .vt-process-grid p,
.vt-page .vt-science-standalone > p:not(.eyebrow) {
  font-weight: 400;
}

.vt-process-quote {
  margin: clamp(3rem, 5vw, 4.5rem) 0 0;
  padding: clamp(1rem, 2vw, 1.6rem) 1rem 0;
  text-align: center;
}

.vt-process-quote blockquote {
  margin: 0;
  color: #6f4439;
  font-family: "Yuyu", cursive;
  font-size: clamp(2rem, 3.2vw, 3.15rem);
  font-weight: 400;
  line-height: 1.25;
}

@media (max-width: 560px) {
  .vt-explainer .vt-text > p {
    font-size: 1.08rem;
    line-height: 1.68;
  }

  .vt-page .vt-explainer,
  .vt-page .vt-process,
  .vt-page .vt-closing-quote,
  .vt-page .vt-history-image,
  .vt-page .vt-science-standalone {
    width: auto;
    margin: 0 1rem 1rem;
    border-radius: 22px;
  }

  .vt-page .vt-science-standalone {
    margin-bottom: 2rem;
  }

  .vt-process-quote {
    margin-top: 2.25rem;
    padding-top: .75rem;
  }
}

/* Biografieblock: echte Seitentypografie auf einer vollständig ruhigen Fläche. */
.vt-page .vt-history-image {
  position: relative;
  min-height: 620px;
  padding: clamp(3.5rem, 6vw, 6.5rem);
  background: #f4ddd5;
  isolation: isolate;
}

.vt-history-content {
  position: relative;
  z-index: 2;
  width: min(58%, 820px);
}

.vt-history-eyebrow {
  margin: 0 0 1.35rem;
  color: #b45d4a;
  font-family: "Alata", Arial, sans-serif;
  font-size: clamp(.9rem, 1.15vw, 1.08rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vt-history-content h2 {
  max-width: 760px;
  font-size: clamp(3rem, 4.7vw, 5.2rem);
  line-height: 1.08;
}

.vt-history-content > p:not(.vt-history-eyebrow) {
  margin: clamp(2rem, 3vw, 3rem) 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 400;
  line-height: 1.72;
}

.vt-history-content blockquote {
  width: min(110%, 920px);
  margin: clamp(.75rem, 1.4vw, 1.4rem) 0 0;
  color: #3f2f2a;
  font-family: "Yuyu", cursive;
  font-size: clamp(2rem, 3vw, 3.3rem);
  font-weight: 400;
  line-height: 1.25;
}

.vt-history-quote-line {
  display: block;
}

.vt-history-quote-line-second {
  width: max-content;
  margin-left: clamp(20rem, 31vw, 36rem);
  white-space: nowrap;
}

.vt-history-tree {
  position: absolute;
  z-index: 1;
  top: 1.5rem;
  right: -3rem;
  width: min(68%, 1060px) !important;
  height: calc(100% - 3rem) !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: right center;
  opacity: .68;
  pointer-events: none;
}

@media (max-width: 760px) {
  .vt-page .vt-history-image {
    min-height: 0;
    padding: 2rem 1.45rem 2.15rem;
    overflow: hidden;
  }

  .vt-history-content {
    width: 100%;
  }

  .vt-history-eyebrow {
    max-width: 82%;
    margin-bottom: 1.15rem;
    font-size: .86rem;
  }

  .vt-history-content h2 {
    max-width: 92%;
    font-size: clamp(2.7rem, 12vw, 4rem);
  }

  .vt-history-content > p:not(.vt-history-eyebrow) {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin-top: 1.75rem;
    font-size: 1.04rem;
    line-height: 1.62;
  }

  .vt-history-content blockquote {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin: 1.15rem 0 0;
    font-size: clamp(1.65rem, 6.6vw, 2rem);
    line-height: 1.22;
  }

  .vt-history-quote-line-second {
    width: auto;
    margin-top: .35rem;
    margin-left: 1.5rem;
    white-space: normal;
  }

  .vt-history-tree {
    top: 1rem;
    right: 3rem;
    width: auto !important;
    height: calc(100% - 2rem) !important;
    object-fit: contain;
    object-position: right center;
    opacity: .24;
  }
}

/* Verhaltenstherapie – mobile Prozessdarstellung ohne Worttrennungen. */
@media (max-width: 560px) {
  .vt-page .vt-process {
    padding: 3.25rem 1.25rem 3.75rem;
  }

  .vt-page .vt-process > h2 {
    max-width: 100%;
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.12;
    letter-spacing: -.025em;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }

  .vt-page .vt-process-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.7rem;
    margin-top: 2.75rem;
  }

  .vt-page .vt-process-grid article {
    min-width: 0;
    padding: 0 .35rem;
  }

  .vt-page .vt-process-grid h3,
  .vt-page .vt-process-grid p {
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }

  .vt-page .vt-process-grid p {
    max-width: 20rem;
    font-size: 1rem;
    line-height: 1.58;
  }
}

/* Beratung: Einleitung und Porträt bilden den oberen Teil; die Themenliste fließt breit darunter ein. */
.guidance-page .guidance-overview {
  width: min(100%, 1500px);
  margin: 0 auto 1rem;
  padding: clamp(3rem, 5vw, 5.25rem) clamp(3rem, 7vw, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255, 251, 246, .72) 0%, rgba(255, 251, 246, .3) 100%);
  box-shadow: 0 14px 36px rgba(93, 63, 48, .055);
}
.guidance-page-content .guidance-overview .guidance-intro {
  width: 100%;
  margin: 0;
  text-align: left;
}
.guidance-page-content .guidance-overview .guidance-intro p {
  margin-inline: 0;
}
.guidance-page-content .guidance-overview .guidance-intro h2 {
  max-width: 820px;
}
.guidance-page .guidance-layout {
  display: block;
  width: min(100%, 1500px);
  margin: 0 auto;
}
.guidance-page .guidance-card {
  display: block;
  height: auto;
  width: 100%;
  padding: clamp(3.5rem, 5vw, 5.5rem) clamp(3rem, 7vw, 8rem) clamp(3rem, 5vw, 5rem);
  border: 0;
  border-image: none;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255, 251, 246, .24) 0%, rgba(255, 251, 246, .82) 18%, rgba(255, 251, 246, .94) 100%);
  box-shadow: 0 18px 42px rgba(93, 63, 48, .07);
}
.guidance-page .guidance-card h3 {
  text-align: center;
  margin-bottom: clamp(1.7rem, 3vw, 2.8rem);
  font-size: clamp(2rem, 2.9vw, 3rem);
}
.guidance-page .guidance-card .guidance-list {
  width: min(100%, 920px);
  margin-inline: auto;
}
.guidance-page .guidance-card .guidance-list li {
  grid-template-columns: minmax(11rem, 13rem) 2.5rem minmax(0, 1fr);
  column-gap: .7rem;
  font-size: clamp(1.22rem, 1.45vw, 1.42rem);
  line-height: 1.55;
}
.guidance-page .guidance-portrait {
  box-sizing: border-box;
  width: 100%;
  max-width: 370px;
  aspect-ratio: 9 / 8;
  margin: 0;
  padding: 0;
  justify-self: end;
  position: relative;
  z-index: 2;
  transform: none;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-image: none;
  border-radius: 1.4rem;
  box-shadow: 0 16px 34px rgba(83, 52, 42, .12);
}
.guidance-page .guidance-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 1.4rem;
  box-shadow: none;
}

/* Startseite: Einleitungstext auch für ältere Leserinnen und Leser gut lesbar */
.hero-copy .lead {
  font-size: clamp(1.16rem, 1.48vw, 1.38rem);
  line-height: 1.75;
}

@media (max-width: 920px) {
  .guidance-page .guidance-overview {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .guidance-page-content .guidance-overview .guidance-intro {
    text-align: center;
  }
  .guidance-page-content .guidance-overview .guidance-intro p {
    margin-inline: auto;
  }
  .guidance-page .guidance-portrait {
    width: min(100%, 360px);
    max-width: 360px;
    justify-self: center;
    transform: none;
  }
}

@media (max-width: 560px) {
  .hero-copy .lead {
    font-size: 1.18rem;
    line-height: 1.78;
  }
  .guidance-page .guidance-overview {
    padding: 2.4rem 1.15rem;
    border-radius: 1.4rem;
  }
  .guidance-page .guidance-card {
    padding: 2.7rem 1.15rem 2rem;
    border-radius: 1.4rem;
  }
  .guidance-page .guidance-card h3 {
    font-size: 1.85rem;
  }
  .guidance-page .guidance-card .guidance-list li {
    grid-template-columns: 1.7rem minmax(0, 1fr);
    grid-template-areas:
      "term term"
      "arrow description";
    column-gap: .55rem;
    row-gap: .4rem;
    align-items: start;
    padding: 1rem 0;
    font-size: 1.08rem;
  }
  .guidance-page .guidance-card .guidance-term {
    grid-area: term;
    font-size: 1.13rem;
  }
  .guidance-page .guidance-card .guidance-arrow {
    grid-area: arrow;
    text-align: left;
  }
  .guidance-page .guidance-card .guidance-description {
    grid-area: description;
  }
  .guidance-page .guidance-card .guidance-term,
  .guidance-page .guidance-card .guidance-description {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .guidance-page .guidance-portrait {
    width: min(100%, 320px);
    max-width: 320px;
  }
}

/* Diese Angebotskacheln bleiben auf der Startseite zweispaltig. */
.section-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .section-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 1rem;
    gap: .75rem;
  }
}

/* Lange Kacheltexte bleiben auch auf schmalen Handys vollständig sichtbar. */
@media (max-width: 640px) {
  .section-directory .directory-card {
    min-width: 0;
    min-height: 100px;
    padding: .65rem;
    gap: .5rem;
    overflow: hidden;
  }
  .section-directory .directory-icon {
    width: 2.7rem;
    height: 2.7rem;
  }
  .section-directory .directory-icon svg {
    width: 1.55rem;
    height: 1.55rem;
  }
  .section-directory .directory-label {
    min-width: 0;
    font-size: .88rem;
    line-height: 1.18;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .section-directory .directory-card b {
    display: none;
  }
}

/* Kontaktbereich sichtbar um rund 1 cm an die Kacheln heranrücken. */
.home-cta {
  position: relative;
  margin-top: -38px;
}

/* Angebot mobil: Lebensphasen folgen dichter auf die Themenkacheln. */
@media (max-width: 760px) {
  .topics-unified {
    padding-bottom: 1.25rem;
  }
  .topics-unified + .life-stages {
    padding-top: 2rem;
  }
}

/* „Häufige Fragen“ als klare Abschnittsüberschrift hervorheben. */
.knowledge-page .faq-section > .eyebrow {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: .07em;
}

/* Honorar: zwei ruhige, klar zuordenbare Preisblöcke. */
.honorar-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  padding: 0 0 1rem;
}
.honorar-option {
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(169, 87, 70, .15);
  border-radius: 15px;
  background: #fbf1e9;
}
.honorar-option--praxis { background: #f7ede4; }
.honorar-option h3 {
  margin: 0 0 .75rem;
  color: var(--plum-dark);
  font-size: 1.04rem;
  line-height: 1.35;
}
.faq-list details .honorar-price {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: 0;
  color: var(--plum-dark);
  line-height: 1.2;
}
.honorar-price strong {
  color: #a95746;
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
}
.honorar-price span { font-size: .92rem; }
.faq-list details .honorar-meta {
  padding: .45rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}
.honorar-meta span { padding: 0 .18rem; color: #b56b58; }
.faq-list details .honorar-note {
  margin-top: .15rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(169, 87, 70, .14);
  font-size: .94rem;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .honorar-options { grid-template-columns: 1fr; gap: .65rem; }
  .honorar-option { padding: 1rem; }
  .honorar-option h3 { margin-bottom: .55rem; }
}

/* Angebot: Den Jung-Spruch optisch direkt an die Kacheln anbinden. */
.life-stages + .quote-growth {
  margin-top: -5rem;
}
@media (max-width: 760px) {
  .life-stages + .quote-growth {
    margin-top: -3.25rem;
  }
}

/* Über mich: zurückhaltende Bildgröße. */
.about-side-portrait { width: min(100%, 300px); }
@media (max-width: 760px) { .about-side-portrait { width: min(76vw, 260px); } }

/* Beratung & Begleitung: Fließtext auf der gesamten Seite besser lesbar. */
.guidance-page .knowledge-hero > p:not(.eyebrow) {
  max-width: min(100%, 1180px);
  font-size: clamp(1.18rem, 1.35vw, 1.3rem);
  line-height: 1.75;
}
.guidance-page-content .guidance-overview .guidance-intro > p:not(.eyebrow) {
  font-size: clamp(1.16rem, 1.28vw, 1.26rem);
  line-height: 1.78;
}
.guidance-page .guidance-card .guidance-list li {
  font-size: clamp(1.22rem, 1.45vw, 1.42rem);
}
.guidance-page .knowledge-cta p {
  font-size: 1.16rem;
}

@media (max-width: 560px) {
  .guidance-page .knowledge-hero > p:not(.eyebrow),
  .guidance-page-content .guidance-overview .guidance-intro > p:not(.eyebrow) {
    font-size: 1.12rem;
    line-height: 1.72;
  }
  .guidance-page .guidance-card .guidance-list li,
  .guidance-page .guidance-card .guidance-term {
    font-size: 1.12rem;
  }
}

/* Abschließende Lesbarkeitsregeln: bewusst nach allen Seitensonderregeln. */
main p:not(.eyebrow),
main li,
main address,
main .text-link,
footer p,
footer nav {
  font-weight: 500;
}
.topics p,
.values p,
.therapy-path li p,
.approach li p,
.training-note p,
.info-teaser span,
.framework span,
.framework-refined span:not(.framework-icon),
.cancellation-note,
.confidentiality p,
.faq-list details p,
.location-note,
.address-note,
.honorar-meta,
.honorar-note {
  font-size: 1rem;
}
footer p,
footer nav {
  font-size: .9rem;
}

/* Sonnenmotiv im freien Hero-Bereich von Beratung und Gut zu wissen. */
.guidance-page .knowledge-hero,
.knowledge-page .knowledge-hero { position: relative; overflow: hidden; }
.knowledge-page .knowledge-hero > :not(.guidance-hero-sun):not(.knowledge-hero-sun) { position: relative; z-index: 1; }
.guidance-hero-sun,
.knowledge-hero-sun {
  position: absolute;
  top: 4%;
  right: 2%;
  width: clamp(20rem, 32vw, 35rem);
  height: auto;
  opacity: .56;
  pointer-events: none;
}
@media (max-width: 1380px) {
  .guidance-hero-sun,
  .knowledge-hero-sun { right: -4%; opacity: .3; }
}
@media (max-width: 900px) {
  .guidance-hero-sun,
  .knowledge-hero-sun { display: none; }
}

/* Über mich: Sonnenmotiv oben rechts, Portrait mit Abstand darunter. */
.about-with-sun { position: relative; overflow: hidden; }
.about-with-sun > .about-copy,
.about-with-sun > .about-side { position: relative; z-index: 1; }
.about-hero-sun {
  position: absolute;
  top: 2rem;
  right: 2%;
  width: clamp(20rem, 32vw, 35rem);
  height: auto;
  opacity: .56;
  pointer-events: none;
}
.about-with-sun .about-side-portrait {
  width: min(100%, 280px);
  margin-top: clamp(14rem, 18vw, 20rem);
}
@media (max-width: 1380px) {
  .about-hero-sun { right: -4%; opacity: .3; }
}
@media (max-width: 920px) {
  .about-hero-sun { display: none; }
  .about-with-sun .about-copy > h1 { order: 2; }
  .about-with-sun .about-side-portrait {
    order: 4;
    width: min(76vw, 260px);
    margin: 1.5rem auto 2.2rem;
  }
}

/* Beratungsseite: übersichtlicher Einstieg in drei Themenblöcken. */
.guidance-summary {
  width: 100%;
  max-width: 68ch;
  margin-top: 2rem;
  display: grid;
  gap: 1.8rem;
  color: var(--muted);
  font-size: clamp(1.18rem, 1.35vw, 1.3rem);
  line-height: 1.75;
}
.guidance-summary .guidance-summary-block h2 {
  margin: 0 0 .65rem;
  color: var(--plum-dark);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
}
.guidance-summary p { margin: 0; font-size: inherit; line-height: inherit; }
.guidance-summary ul { margin: .8rem 0 0; padding-left: 1.25em; }
.guidance-summary li { padding-left: .25em; }
.guidance-summary li + li { margin-top: .45rem; }
.guidance-planning-note {
  padding: 1.3rem 1.5rem;
  border-radius: 14px;
  background: rgba(255, 248, 241, .6);
}
@media (max-width: 560px) {
  .guidance-summary { font-size: 1.12rem; line-height: 1.72; gap: 1.5rem; }
  .guidance-summary .guidance-summary-block h2 { font-size: 1.2rem; }
  .guidance-planning-note { padding: 1.15rem; }
}

/* Beratung: kurzer Einstieg, Porträt und Anliegen, gemeinsamer Abschluss. */
.guidance-page .guidance-overview {
  display: flex;
  justify-content: center;
  padding: 0;
  margin-bottom: 2rem;
  background: none;
  box-shadow: none;
}
.guidance-page .guidance-page-content { padding-top: 2rem; }
.guidance-page .guidance-card h2 {
  text-align: center;
  margin: 0 0 clamp(1.7rem, 3vw, 2.8rem);
  font-size: clamp(1.65rem, 2.9vw, 3rem);
}
.guidance-page .guidance-availability {
  max-width: 60ch;
  margin: 0 auto 2rem;
}
.guidance-page .guidance-availability h2 {
  margin: 0 0 .7rem;
  font-size: 1.35rem;
}
.guidance-page .guidance-availability p { line-height: 1.75; }

/* Kompakter Abschluss der Beratungsseite. */
.guidance-page .guidance-contact-compact {
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: left;
}
.guidance-page .guidance-contact-compact .guidance-availability { width: 100%; max-width: none; margin: 0; }
.guidance-page .guidance-contact-compact h2 {
  margin: 0 0 .85rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
}
.guidance-contact-compact h2 span { white-space: nowrap; }
.guidance-page .guidance-contact-compact p {
  margin: 0 0 1.25rem;
  font-size: 1.08rem;
  line-height: 1.65;
}
.guidance-contact-compact .button {
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Beratungsfoto direkt neben dem Einleitungstext, 30 Prozent kleiner. */
.guidance-page .guidance-summary-with-portrait {
  display: flow-root;
  max-width: 76ch;
}
.guidance-page .guidance-summary-with-portrait .guidance-portrait {
  float: right;
  width: 259px;
  max-width: 42%;
  margin: 0 0 1rem 1.5rem;
}
@media (max-width: 920px) {
  .guidance-page .guidance-summary-with-portrait .guidance-portrait { width: 252px; }
}
@media (max-width: 560px) {
  .guidance-page .guidance-summary-with-portrait .guidance-portrait {
    width: 224px;
    margin-left: 1rem;
  }
}

/* Portrait auf Höhe der Überschrift, Anliegen wieder ausführlicher. */
.guidance-page .guidance-hero-with-portrait { display: flow-root; }
.guidance-page .guidance-hero-with-portrait .guidance-portrait {
  float: right;
  width: 225px;
  max-width: 30%;
  margin: 0 0 1rem 1.5rem;
}
.guidance-hero-with-portrait .guidance-summary { display: block; }
@media (max-width: 920px) {
  .guidance-page .guidance-hero-with-portrait .guidance-portrait { width: 215px; }
}
@media (max-width: 560px) {
  .guidance-page .guidance-hero-with-portrait .guidance-portrait {
    width: 190px;
    margin-left: .85rem;
  }
  .guidance-page .guidance-hero-with-portrait h1 {
    font-size: clamp(1.85rem, 7.5vw, 2.65rem);
    line-height: 1.2;
  }
}

.guidance-page .guidance-contact-compact {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.guidance-page .guidance-contact-compact .guidance-availability p {
  width: 100%;
  max-width: none;
}

/* Sonne der Beratungsseite im freien rechten oberen Rand. */
.guidance-page .guidance-hero-sun {
  top: 0;
  right: 1rem;
  width: clamp(6rem, 12vw, 11rem);
  opacity: .56;
}

@media (min-width: 901px) {
  .guidance-page .guidance-hero-with-portrait .guidance-portrait { margin-top: 1.5rem; }
}

/* Lebensphasen: volle Kartenbreite auf Handys und schmalen Ansichten. */
@media (max-width: 1100px) {
  .life-stage-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .life-stage-grid article {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
  .life-stage-grid h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Gemeinsame Leseschrift, entsprechend dem vergrößerten Angebotstext. */
:root { --reading-size: 1.25rem; }
@media (max-width: 640px) {
  :root { --reading-size: 1.15rem; }
}
html body main p:not(.eyebrow, .vt-history-eyebrow, .vt-focus-intro, .vt-focus-closing, .vt-step-note, .quote-attribution, .honorar-price):not(.vt-intro-line p, blockquote p),
html body main :is(li, address, dt, dd, summary, small),
html body main :is(.info-teaser span, .framework span:not(.framework-icon), .fee-details, .address-note, .guidance-description, .guidance-term, .honorar-price span, .crisis-contacts strong, .contact-map-link span, .text-link, .button, .faq-controls button),
html body footer p:not(.footer-claim),
html body footer nav {
  font-size: var(--reading-size);
  line-height: 1.6;
}
/* Zeilen dürfen bei größerer Schrift innerhalb der Karten umbrechen. */
html body main :is(.framework span:not(.framework-icon), .guidance-description, .fee-details) {
  overflow-wrap: break-word;
}
html body .honorar-price { flex-wrap: wrap; }
html body footer nav { flex-wrap: wrap; }
@media (max-width: 640px) {
  html body .contact dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

html body .framework-refined :is(.fee-line, .audience-list span) { white-space: normal; }
html body .framework-refined .fee-line { flex-wrap: wrap; }
html body .framework-refined > div { min-width: 0; }

/* Themen am Handy: eine breite Karte je Zeile, Symbol links vom Text. */
@media (max-width: 760px) {
  .topics.topics-unified {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
    padding-inline: 1.25rem;
  }
  .topics.topics-unified article:nth-child(n) {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .75rem;
    row-gap: .5rem;
    align-content: start;
    align-items: start;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 1.15rem 1rem;
  }
  .topics.topics-unified article > .topic-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
  }
  .topics.topics-unified .topic-icon svg { width: 1.65rem; height: 1.65rem; }
  .topics.topics-unified article > h3,
  .topics.topics-unified article > p {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
  }
  .topics.topics-unified article > h3 {
    font-size: 1.15rem;
    line-height: 1.35;
  }
}

/* Fotogesten lokal begrenzen; Scrollen und Zoom außerhalb der Fotos bleiben möglich. */
html body img.static-photo,
html body .hero-image {
  pointer-events: auto;
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: default;
}

/* Die Sonne im Angebotsmotiv bleibt im natürlichen Seitenverhältnis rund. */
@media (min-width: 641px) {
  #angebot .offer-journey {
    width: auto;
    max-width: none;
    aspect-ratio: 2 / 3;
    object-fit: contain;
  }
}

/* Sonnenaufgang: Das Motiv sitzt tiefer hinter dem vorderen Wellenrand. */
@media (min-width: 641px) {
  #angebot .offer-journey { transform: translate(-50%, 4rem); }
}
@media (max-width: 640px) {
  #angebot::after { bottom: -1.75rem; }
}

/* Honorar: Überschrift und Detailverweis gemeinsam neben dem Symbol. */
.framework-refined > .fee-card {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 1rem .9rem;
}
.framework-refined .fee-card-title { margin: 0; }
.framework-refined .fee-card-content {
  grid-column: 2;
  display: grid;
  gap: .18rem;
  min-width: 0;
}
.framework-refined .fee-card-content p { margin: 0; }
.framework-refined .fee-card-content b { font-weight: 700; }
.framework-refined .fee-card-details a {
  display: inline-block;
  color: inherit;
  text-underline-offset: .18rem;
}