
body.web-butler{background:#081a1c;color:#f5eee5}.butler-hero{position:relative;min-height:510px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;overflow:hidden;background:radial-gradient(circle at 80% 50%,rgba(233,164,106,.25),transparent 48%),radial-gradient(circle at 65% 70%,rgba(95,211,193,.2),transparent 56%),linear-gradient(160deg,#081a1c,#05100f);border-bottom:1px solid rgba(224,175,124,.25)}.butler-hero-copy{padding:80px max(32px,calc((100vw - 1280px)/2)) 80px max(32px,calc((100vw - 1280px)/2));padding-right:0;z-index:1}.butler-hero h1{font:400 clamp(62px,7vw,105px)/.94 var(--web-serif);letter-spacing:-.06em;margin:20px 0}.butler-hero h1 em{background:linear-gradient(95deg,#f2b27a,#e58a5c 40%,#5fd3c1);-webkit-background-clip:text;background-clip:text;color:transparent}.butler-hero p:not(.web-kicker){font:20px/1.5 var(--web-serif);color:#b6cdc8;max-width:36ch}.butler-hero img{width:min(70%,180px);justify-self:center;filter:drop-shadow(0 40px 45px #090604)}.butler-main{width:min(100% - 48px,900px);margin:0 auto;padding:80px 0 110px}.butler-note{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#b6cdc8;margin:0 0 30px}.butler-main h2{font:400 clamp(35px,4vw,52px)/1.1 var(--web-serif);margin:0 0 20px}.butler-prompts{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}.butler-prompts button{padding:10px 15px;border:1px solid rgba(224,175,124,.34);background:#10282a;color:#c5e8e1;border-radius:2px;cursor:pointer;font:13px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}.butler-prompts button:hover{border-color:#e0a978;background:#18393a}#conversation{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:26px 0}.message{padding:20px 24px;border:1px solid rgba(224,175,124,.3);white-space:pre-wrap;overflow-wrap:anywhere;background:#10282a}.message.user{background:#193235}.message strong{display:block;font:600 11px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:.17em;color:#7fe0d1;margin-bottom:8px}label{display:block;color:#7fe0d1;margin-bottom:9px;font-size:13px;letter-spacing:.07em}textarea{width:100%;min-height:120px;resize:vertical;padding:17px;border:1px solid rgba(224,175,124,.4);border-radius:2px;background:#10282a;color:#f5eee5;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}textarea:focus{outline:2px solid #d4a071;outline-offset:2px}.butler-send{margin-top:13px;border:1px solid #d4a071;border-radius:2px;padding:14px 24px;background:#e9a46a;color:#211208;font:600 14px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;cursor:pointer}.butler-send:disabled{opacity:.55;cursor:wait}#status{min-height:1.5em;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;margin-top:12px}#status.error{color:#efb69d}@media(max-width:700px){.butler-hero{display:flex;min-height:0;flex-direction:column-reverse;align-items:flex-start}.butler-hero img{width:150px;margin:25px 25px 0;align-self:flex-end}.butler-hero-copy{padding:0 22px 50px}.butler-hero h1{font-size:60px}.butler-main{padding-top:55px}}
.message div strong{display:inline;font:inherit;font-weight:700;letter-spacing:normal;color:inherit;margin:0}.message p{margin:0 0 .7em}.message p:last-child{margin-bottom:0}.message ul,.message ol{margin:.2em 0 .7em 1.3em;padding:0}.message{min-width:0;max-width:100%}.message .table-scroll{max-width:100%;overflow-x:auto;margin:.3em 0 .8em;white-space:normal;-webkit-overflow-scrolling:touch}.message table{border-collapse:collapse;min-width:100%;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}.message th,.message td{padding:8px 12px;border:1px solid rgba(224,175,124,.28);text-align:left;vertical-align:top;overflow-wrap:normal}.message th{background:#193235;color:#f2b27a;font-weight:600;white-space:nowrap}.message td{min-width:6ch}.message h4{font:600 15px/1.4 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#f2b27a;margin:.9em 0 .4em}.message hr{border:0;border-top:1px solid rgba(224,175,124,.3);margin:1em 0}.message em{font-style:italic}.message.pending{color:#b6cdc8}.message.pending .dots::after{content:"";animation:bdots 1.4s steps(4,end) infinite}@keyframes bdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@media(prefers-reduced-motion:reduce){.message.pending .dots::after{animation:none;content:"\2026"}}.message.assistant{scroll-margin-top:96px}@media(max-width:1000px){.message.assistant{scroll-margin-top:175px}}

/* The guide page keeps conversation as the main action. */
body.web-butler{background:#071914;color:#f1e9db}
.butler-hero{min-height:410px;grid-template-columns:1.3fr .7fr;background:linear-gradient(90deg,rgba(5,20,16,.97),rgba(5,20,16,.86) 55%,rgba(5,20,16,.38)),url('../img/room-materialregie.jpg') 60% center/cover;border-bottom:1px solid rgba(233,164,106,.25)}
.butler-hero-copy{padding-block:70px;padding-left:max(32px,calc((100vw - 1200px)/2))}
.butler-hero h1{font-size:clamp(54px,6vw,86px);letter-spacing:-.035em;line-height:1.02;max-width:12ch;margin:16px 0 22px}
.butler-hero h1 em{background:none;color:#e5ae7d;-webkit-text-fill-color:currentColor}
.butler-hero p:not(.web-kicker){font:400 19px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#d6dfd1;max-width:36ch}
.butler-hero img{width:min(48%,175px);filter:drop-shadow(0 24px 27px rgba(0,0,0,.45))}
.butler-main{width:min(100% - 48px,1200px);display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr);column-gap:clamp(50px,8vw,130px);padding:85px 0 120px;align-items:start}
.butler-main>.web-kicker,.butler-main>h2,.butler-main>.butler-note,.butler-main>.butler-prompts{grid-column:1}
.butler-main>.web-kicker{grid-row:1;margin:0 0 13px;color:#deb084}
.butler-main>h2{grid-row:2;font-size:clamp(40px,4vw,56px);line-height:1.08;letter-spacing:-.025em;margin:0 0 18px}
.butler-main>.butler-note{grid-row:3;color:#c3d0c2;line-height:1.65;font-size:15px;margin:0 0 24px}
.butler-main>.butler-prompts{grid-row:4;display:grid;gap:9px;margin:0}
.butler-prompts button{width:100%;text-align:left;min-height:51px;padding:12px 17px;background:#153126;border:1px solid rgba(226,171,116,.3);border-radius:6px;color:#eee6d9;font-size:14px;line-height:1.3;transition:background .2s ease,transform .2s ease}
.butler-prompts button::after{content:'↗';float:right;color:#dda87a;margin-left:10px}
.butler-prompts button:hover{background:#224b35;transform:translateX(3px);border-color:#e0ac7b}
#conversation{grid-column:2;grid-row:5;align-self:start;margin:18px 0 0;display:grid;gap:12px}
#conversation:empty{display:none}
#question-form{grid-column:2;grid-row:1 / span 4;border:1px solid rgba(225,172,120,.24);border-radius:8px;background:#10261e;padding:27px;box-shadow:0 22px 42px rgba(0,0,0,.16)}
#question-form label{font-size:11px;font-weight:700;letter-spacing:.16em;color:#e4ad7d;margin:0 0 14px}
#question-form textarea{min-height:175px;background:#0b2019;border-color:rgba(225,172,120,.28);border-radius:5px;padding:18px;color:#f3ede3;line-height:1.55}
#question-form textarea::placeholder{color:#a6b9a9}
#question-form textarea:focus{outline:2px solid #e0a978}
.butler-send{border-radius:5px;padding:14px 21px;min-height:49px;background:#dba879;color:#172019;font-weight:700;transition:background .2s ease,transform .2s ease}
.butler-send:hover:not(:disabled){background:#edbd91;transform:translateY(-2px)}
#status{color:#bfcebf}
.message{background:#173126;border:0;border-radius:7px;padding:22px 24px;line-height:1.65;color:#e9e8de}
.message.user{background:#e8dfd0;color:#1d3025;margin-left:12%}
.message strong{color:#e5ac78}
.message.user>strong{color:#7c512d}
.message.assistant{margin-right:5%}
.message.pending{border:1px solid rgba(226,172,122,.25)}
@media(max-width:800px){
 .butler-hero{min-height:350px;grid-template-columns:1fr 140px}
 .butler-hero-copy{padding:45px 0 50px 25px}
 .butler-hero h1{font-size:52px}
 .butler-hero img{width:110px}
 .butler-main{grid-template-columns:1fr;padding:56px 0 90px}
 .butler-main>.web-kicker,.butler-main>h2,.butler-main>.butler-note,.butler-main>.butler-prompts,#conversation,#question-form{grid-column:1;grid-row:auto}
 .butler-main>.butler-prompts{margin-bottom:28px}
 #conversation{margin-bottom:18px}
}
@media(max-width:700px){
 .butler-hero{display:grid;grid-template-columns:1fr 75px;min-height:330px;align-items:center}
 .butler-hero-copy{padding:45px 0 45px 21px}
 .butler-hero h1{font-size:clamp(44px,11vw,58px);max-width:10ch}
 .butler-hero p:not(.web-kicker){font-size:15px;max-width:30ch}
 .butler-hero img{width:76px;margin:0;align-self:center;justify-self:start}
 .butler-main{width:calc(100% - 40px);padding-top:52px}
 #question-form{padding:20px}
 .message.user{margin-left:6%}
}
@media(prefers-reduced-motion:reduce){.butler-prompts button,.butler-send{transition:none}.butler-prompts button:hover,.butler-send:hover:not(:disabled){transform:none}}
