@font-face{font-family:Boska;src:url('boska.ttf')}@font-face{font-family:Montserrat;src:url('montserrat-regular.ttf')}
:root{--berry:#633b4d;--plum:#482d39;--cream:#f6eee5;--apricot:#e7b29b;--mint:#dce9dd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--plum);font-family:Montserrat,Arial,sans-serif}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,iframe:focus-visible{outline:3px solid #ae748c;outline-offset:4px}
.top{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 5vw}.top img{width:145px;display:block;filter:brightness(.25) sepia(.55) saturate(1.5) hue-rotate(285deg)}.top a:last-child{font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:6px}
.hero{position:relative;min-height:91svh;display:grid;grid-template-columns:54% 46%;overflow:hidden;background:radial-gradient(circle at 16% 23%,#f5d9ca 0,transparent 44%),#eae9dc}.hero-copy{position:relative;z-index:2;align-self:center;padding:125px 3vw 100px 7vw;max-width:820px}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#925d70;margin:0 0 23px}.hero h1,.quiz h2,.result h3,.form-heading{font-family:Boska,Georgia,serif;font-weight:500;letter-spacing:-.035em}.hero h1{font-size:clamp(55px,6vw,95px);line-height:1.01;margin:0 0 24px}.hero h1 em{font-weight:500;color:#87506a}.hero p:not(.eyebrow){font-size:clamp(15px,1.2vw,18px);line-height:1.68;max-width:570px}.hero-visual{position:relative;background:url('room-after-arch.png') center/cover;clip-path:ellipse(98% 92% at 96% 50%)}.hero-visual:after{content:'Hier entsteht etwas.';position:absolute;bottom:42px;right:42px;color:white;text-shadow:0 2px 13px #482d39;font:italic 26px Boska,Georgia,serif}.hero .button{margin-top:18px}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:57px;padding:14px 25px;border:1px solid var(--berry);border-radius:999px;background:var(--berry);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);background:#805069}.hero-note{font-size:11px!important;margin-top:19px;opacity:.78}
.quiz{position:relative;overflow:hidden;background:linear-gradient(135deg,#5e394a,#80516a 75%,#9d6871);color:#f9f2e9;padding:95px 6vw 110px}.quiz:before{content:'';position:absolute;top:-270px;right:-300px;width:850px;height:850px;border:1px solid #ffffff38;border-radius:50%;box-shadow:0 0 0 80px #ffffff08,0 0 0 155px #ffffff07;pointer-events:none}.quiz-wrap{position:relative;max-width:1160px;margin:auto}.quiz-head{display:grid;grid-template-columns:1fr 300px;gap:45px;align-items:end;margin-bottom:36px}.quiz .eyebrow{color:#f0c6b6}.quiz h2{font-size:clamp(45px,5vw,76px);line-height:1.05;max-width:760px;margin:0}.quiz-head>p{font-size:14px;line-height:1.7;opacity:.86;margin:0 0 5px}.quiz-card{background:#f8f1e9;color:var(--plum);border-radius:25px;padding:clamp(24px,4vw,54px);box-shadow:0 34px 80px #321c2d44;min-height:410px}.progress{display:flex;justify-content:space-between;gap:20px;color:#896772;text-transform:uppercase;letter-spacing:.1em;font-size:11px}.track{height:3px;background:#e3d6cf;margin:17px 0 35px}.bar{height:100%;width:12.5%;background:linear-gradient(90deg,#a96780,#d99b86);transition:width .35s}.question{font-family:Boska,Georgia,serif;font-size:clamp(36px,3.6vw,54px);line-height:1.12;letter-spacing:-.03em;font-weight:500;margin:0 0 12px}.help{font-size:13px;line-height:1.6;color:#715861;margin:0 0 25px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:77px;padding:16px 20px;border:1px solid #d7cac4;border-radius:14px;background:#fffaf4;color:var(--plum);text-align:left;font-size:14px;line-height:1.45;transition:transform .2s,background .2s,border-color .2s}.answer:after{content:'↗';color:#a5717d;font-size:20px}.answer:hover{transform:translateY(-2px);background:#e9f0e8;border-color:#97ad9d}.back{border:0;background:none;color:#76515e;font-size:12px;text-decoration:underline;text-underline-offset:5px;padding:8px 0;margin-top:24px}.back[hidden],#quiz-steps[hidden],#quiz-result[hidden]{display:none}.result h3{font-size:clamp(44px,4.5vw,65px);line-height:1.06;margin:0 0 14px}.result>p{font-size:15px;line-height:1.7;max-width:650px}.result-note{max-width:650px;background:#e8efe7;border-left:3px solid #94ac9b;padding:18px 22px;margin:24px 0;border-radius:0 13px 13px 0;font-size:13px;line-height:1.7}.status{font-size:11px;min-height:1.5em;color:#725662}.optin{border-top:1px solid #d4c6bd;margin-top:36px;padding-top:35px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,470px);gap:35px;align-items:start}.optin .eyebrow{color:#9a6877}.form-heading{font-size:clamp(34px,3.4vw,52px);line-height:1.1;margin:0 0 14px}.optin p{font-size:14px;line-height:1.7;max-width:480px}.optin small{display:block;line-height:1.6;color:#765963}.form-frame{border:1px solid #d8cac2;border-radius:18px;overflow:hidden;background:white;min-height:720px}.form-frame iframe{width:100%;height:720px;border:0;background:white}.quiz-foot{font-size:11px;line-height:1.6;opacity:.78;margin:20px 0 0}.bottom{background:#ece9dc;padding:44px 7vw;text-align:center}.bottom p{margin:0 auto;max-width:650px;line-height:1.7;font-size:13px}.bottom strong{font-family:Boska,Georgia,serif;font-size:29px;font-weight:500;display:block;margin-bottom:7px}footer{background:#e9dfd4;color:#765b64;padding:28px 7vw;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px}footer nav{display:flex;gap:20px}footer a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.top{position:relative;background:#eae9dc}.hero{display:flex;flex-direction:column;min-height:0}.hero-visual{order:1;height:42svh;min-height:0;clip-path:none}.hero-copy{order:2;padding:50px 6vw 80px}.quiz-head{grid-template-columns:1fr;gap:14px}.quiz-head>p{max-width:560px}.optin{grid-template-columns:1fr}}
@media(max-width:600px){.top{padding:17px 23px}.top img{width:133px}.top a:last-child{font-size:9px}.hero-visual{height:26svh}.hero-visual:after{font-size:18px;right:18px;bottom:15px}.hero-copy{padding:30px 24px 50px}.hero h1{font-size:clamp(49px,11.5vw,66px)}.hero p:not(.eyebrow){font-size:14px}.button{width:100%;gap:14px}.quiz{padding:70px 18px 75px}.quiz h2{font-size:48px}.quiz-card{padding:26px 18px}.answers{grid-template-columns:1fr;gap:9px}.answer{min-height:64px;padding:13px 15px;font-size:13px}.question{font-size:39px}.track{margin-bottom:28px}.progress{font-size:10px}.optin{gap:18px}.form-frame iframe{height:720px}.bottom{padding:40px 24px}footer{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Der Weg durch den entstehenden Raum */
.hero h1{max-width:740px}.quiz-head{align-items:center}.quiz-card{position:relative;overflow:hidden}.quiz-card:before{content:'';position:absolute;width:330px;height:330px;right:-185px;top:65px;border-radius:50%;background:radial-gradient(circle,#eabfac44,transparent 69%);pointer-events:none}.quiz-card>*{position:relative}
.journey-map{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;margin:0 0 31px}.journey-map:before{content:'';position:absolute;top:13px;left:11%;right:11%;height:1px;background:#c8a6a5}.journey-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;color:#9a8188;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.journey-stop i{display:block;width:27px;height:27px;border:1px solid #c8a6a5;border-radius:50%;background:#f8f1e9;box-shadow:0 0 0 7px #f8f1e9}.journey-stop.is-current{color:#633b4d;font-weight:700}.journey-stop.is-current i{background:#633b4d;border-color:#633b4d;box-shadow:0 0 0 7px #f8f1e9,0 0 0 8px #ba8997}.journey-stop.is-past i{background:#bd9aa3;border-color:#bd9aa3}
.chapter-intro{display:grid;grid-template-columns:minmax(170px,.65fr) 1fr;gap:22px;align-items:center;border-top:1px solid #e0d3ca;border-bottom:1px solid #e0d3ca;padding:18px 0;margin-bottom:28px}.chapter-intro span{font-family:Boska,Georgia,serif;font-size:27px;color:#815269}.chapter-intro p{font-size:13px;line-height:1.6;margin:0;color:#715861}.quiz .track{margin:14px 0 29px}.quiz .question{max-width:760px}.answer{position:relative}.answer.is-selected{background:#e8efe8;border-color:#7c9e89;box-shadow:0 0 0 2px #7c9e8938}.answer.is-selected:after{content:'✓';color:#446a50}.quiz-next{display:flex;justify-content:space-between;align-items:center;gap:30px;width:100%;margin-top:20px;min-height:59px;padding:15px 23px;border:0;border-radius:999px;background:#633b4d;color:white;text-align:left;font-size:13px;font-weight:700;transition:background .2s,transform .2s}.quiz-next:hover{background:#805269;transform:translateY(-2px)}.quiz-next:disabled{background:#baadb0;cursor:not-allowed;transform:none}.quiz-next[hidden]{display:none}.quiz-next span{font-size:20px}.quiz-next:focus-visible{outline:3px solid #ae748c;outline-offset:4px}
@media(max-width:900px){.chapter-intro{grid-template-columns:1fr;gap:5px}}
@media(max-width:600px){.journey-map{margin-bottom:25px}.journey-stop{font-size:9px;line-height:1.3}.chapter-intro span{font-size:25px}.chapter-intro p{font-size:12px}.quiz-card:before{right:-230px}.quiz .question{font-size:36px}.quiz-next{position:sticky;bottom:12px;z-index:2;box-shadow:0 10px 25px #45273540}}
/* Ein ruhiger Abschluss mit Platz für eigene Worte. */
.result>.eyebrow{color:#704153;margin-bottom:14px}.result h3{max-width:760px;color:#482d39;font-size:clamp(40px,4vw,58px)}.result>p:not(.eyebrow){max-width:790px}.result-note{max-width:790px;margin:21px 0 12px}.status{margin-bottom:26px}
.voice{position:relative;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:20px 34px;align-items:start;overflow:hidden;padding:clamp(23px,3vw,35px);border:1px solid #d5c1be;border-radius:23px;background:radial-gradient(circle at 0 100%,#e5ede6 0,transparent 36%),linear-gradient(120deg,#fffaf4,#f4e9e2);box-shadow:0 18px 48px #573a4c13}.voice:after{content:'';position:absolute;width:240px;height:240px;border:1px solid #bc94873d;border-radius:50%;top:-145px;right:-95px;pointer-events:none}.voice .eyebrow{color:#805168;margin-bottom:12px}.voice h4{font-family:Boska,Georgia,serif;font-size:clamp(31px,3vw,43px);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0 0 12px}.voice-intro>p:last-child{font-size:13px;line-height:1.65;margin:0;max-width:330px;color:#654f59}.voice form{position:relative;z-index:1}.voice label{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:#482d39;margin:2px 0 10px}.voice label span{font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:#806a72}.voice textarea{display:block;width:100%;min-height:122px;max-height:260px;resize:vertical;border:1px solid #c7b7b4;border-radius:15px;background:#fffdf9;padding:16px 18px;color:#482d39;font:14px/1.6 Montserrat,Arial,sans-serif}.voice textarea:focus{outline:2px solid #8a6274;outline-offset:2px}.voice textarea::placeholder{color:#927f83}.voice-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:13px}.voice-actions>span{font-size:10px;line-height:1.5;color:#775f6b;max-width:220px}.voice-actions button{flex:none;min-height:43px;padding:10px 17px;border:0;border-radius:99px;background:#633b4d;color:#fff;font-size:11px;font-weight:700;transition:transform .2s,background .2s}.voice-actions button:hover{transform:translateY(-2px);background:#805269}.voice-actions button:disabled{opacity:.6;cursor:wait}.voice-status{min-height:1.4em;margin:9px 0 0;font-size:11px;line-height:1.5;color:#633b4d}.voice-privacy{grid-column:1/-1;margin:0;border-top:1px solid #dacbc4;padding-top:12px;font-size:10px;line-height:1.55;color:#705966}
.optin{position:relative;margin-top:31px;padding:33px clamp(22px,3vw,35px);border:1px solid #d4c6bd;border-radius:23px;background:linear-gradient(115deg,#e8eee4,#f8f0e8 64%,#efdcd2);grid-template-columns:minmax(0,1fr) minmax(280px,460px);gap:23px 42px;align-items:center}.optin .eyebrow{color:#754658;margin-bottom:12px}.form-heading{max-width:450px;font-size:clamp(31px,3.1vw,42px);line-height:1.1}.optin p{margin:0 0 12px;color:#503942}.optin small{font-size:10px}.form-frame{height:388px;min-height:0;overflow:hidden;border:1px solid #d4c6bd;border-radius:17px;background:#fff9f3}.form-frame iframe{display:block;width:100%;height:388px;min-height:0;border:0;background:#fff9f3}.quiz-foot{max-width:790px}
@media(max-width:900px){.voice{grid-template-columns:1fr}.voice-intro>p:last-child{max-width:600px}.optin{grid-template-columns:1fr;gap:16px}.optin>div:first-child{max-width:630px}.form-frame{width:100%;max-width:520px}}
@media(max-width:600px){.result h3{font-size:clamp(37px,10vw,47px)}.result>p:not(.eyebrow){font-size:13px}.voice{padding:21px 18px;gap:19px}.voice h4{font-size:34px}.voice-actions{align-items:stretch;flex-direction:column;gap:10px}.voice-actions>span{max-width:none}.voice-actions button{width:100%}.optin{padding:24px 17px 18px}.form-heading{font-size:35px}.form-frame,.form-frame iframe{height:460px}.quiz-foot{opacity:1}}

/* Jede Frage erlaubt eine Antwort in eigenen Worten. */
.own-answer{margin-top:15px;padding:18px 21px;border:1px solid #a6baa9;border-radius:17px;background:linear-gradient(125deg,#e9f0e8,#fff9f2)}
.topic-retry[hidden]{display:none}
.own-answer label{display:block;margin-bottom:9px;font-size:13px;font-weight:700;color:#4b303e}
.own-answer textarea{display:block;width:100%;min-height:76px;resize:vertical;border:1px solid #b9c9bc;border-radius:12px;background:#fffdfa;padding:13px 15px;color:#482d39;font:14px/1.55 Montserrat,Arial,sans-serif}
.own-answer textarea:focus{outline:2px solid #795368;outline-offset:2px}
.own-answer textarea::placeholder{color:#8a797d}
.own-answer p{max-width:650px;margin:10px 0 0;color:#6a5861;font-size:11px;line-height:1.55}
.topic-retry{margin:0 0 24px;padding:10px 0;border:0;background:transparent;color:#633b4d;text-decoration:underline;text-underline-offset:4px;font-size:12px;font-weight:700}
.topic-retry:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){.own-answer{padding:16px}.own-answer textarea{font-size:13px}}

/* Give the embedded Rapidmail form the width it needs on phones. */
@media(max-width:600px){
  .quiz:has(#quiz-result:not([hidden])){padding-inline:8px}
  .quiz-card:has(#quiz-result:not([hidden])){overflow:visible}
  .result .optin{margin-inline:-26px;padding:24px 8px;border-radius:18px}
  .result .form-frame,.result .form-frame iframe{height:435px}
}