/* neuroJourney – Clickdummy im Handy-Rahmen */
.phone{width:min(330px,100%);aspect-ratio:9/18.5;margin:2.5rem auto 0;border:10px solid var(--navy);border-radius:2.5rem;background:var(--white);overflow:hidden;display:flex;flex-direction:column;text-align:left;font-size:.9rem;line-height:1.5;box-shadow:0 20px 50px rgba(6,21,66,.15)}
.cd [hidden]{display:none!important}
.cd h3{font-size:1.25rem;margin:0 0 .75rem}
.cd p{margin:0 0 .9rem}
.cd button{font:inherit;color:inherit;cursor:pointer}

/* Kopfzeile */
.cd-bar{position:relative;display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:.6rem 1rem .4rem;border-bottom:1px solid #eceef5}
.cd-title{font-size:1rem;margin:0 auto}
.cd-back{border:0;background:none;font-size:1.3rem;line-height:1;padding:.2rem .4rem;margin-left:-.4rem;position:absolute;left:1rem}

/* Screens */
.cd-screen{flex:1;overflow-y:auto;padding:1.25rem 1.1rem;display:flex;flex-direction:column;animation:cd-in .25s ease}
.cd-screen:focus{outline:none}
.cd-center{align-items:center;justify-content:center;text-align:center}
@keyframes cd-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cd-screen{animation:none}}

.cd-logo{width:9rem;margin-bottom:1.5rem}
.cd-kicker{font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--lila)}
.cd-note{background:#f5f6fa;border-left:4px solid var(--orange);padding:.7rem .8rem;border-radius:.4rem}

/* Buttons */
.cd-btn{margin-top:auto;width:100%;border:0;border-radius:999px;background:var(--navy);color:var(--white)!important;padding:.8rem 1rem;font-weight:600}
.cd-center .cd-btn{margin-top:1rem}
.cd-btn:hover{background:var(--lila)}
.cd-btn-ghost{background:none;color:var(--navy)!important;border:2px solid var(--navy)}
.cd-btn-ghost:hover{background:#f5f6fa}

.cd-choice{display:flex;flex-direction:column;gap:.2rem;text-align:left;width:100%;margin-bottom:.8rem;padding:1rem;border:2px solid #e2e4ee;border-left:6px solid var(--c);border-radius:.8rem;background:var(--white)}
.cd-choice:hover{border-color:var(--c)}
.cd-choice span{font-size:.85rem;color:#5a6384}

/* Figuren */
.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.cd-card{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.7rem .5rem;border:2px solid #e2e4ee;border-radius:.8rem;background:var(--white);text-align:center}
.cd-card img,.cd-card svg{width:4.5rem;height:4.5rem;border-radius:50%;background:#efedf8;margin-bottom:.3rem}
.cd-card span{font-size:.75rem;color:#5a6384}
button.cd-card:hover{border-color:var(--lila)}
.cd-soon{opacity:.55;cursor:not-allowed}
.cd-soon span{font-style:italic}
.cd-card.cd-soon svg{background:#f2f2f2}

.cd-portrait{width:8rem;height:8rem;border-radius:50%;background:#efedf8;border:4px solid var(--lila);margin:.5rem 0 1rem}
.cd-profile{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.cd-profile .cd-portrait{width:5.5rem;height:5.5rem;margin:0;flex:none}
.cd-profile h3{margin-bottom:.2rem}
.cd-profile p{margin:0;font-size:.85rem;color:#5a6384}

/* Fragen */
.cd-chips{border:0;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cd-chips legend{font-weight:600;margin-bottom:.4rem;padding:0}
.cd-chips button{border:2px solid #e2e4ee;border-radius:999px;background:var(--white);padding:.3rem .8rem;font-size:.85rem}
.cd-chips button[aria-pressed="true"]{background:var(--blaugruen);border-color:var(--blaugruen);color:var(--white)}

/* Orte */
.cd-places{display:grid;gap:.6rem}
.cd-place{display:flex;align-items:center;gap:.8rem;width:100%;padding:.8rem 1rem;border:2px solid #e2e4ee;border-radius:.8rem;background:var(--white);text-align:left;color:var(--c,#999)}
.cd-place b{color:var(--navy)}
.cd-place span{margin-left:auto;font-size:.75rem;color:#5a6384}
.cd-place svg{width:2rem;height:2rem;flex:none}
button.cd-place{border-color:var(--c);color:var(--c)}
button.cd-place:hover{background:#eef8f8}

/* Büro-Szene mit klickbaren Stellen */
.cd-scene{position:relative;margin:0 -1.1rem 1rem}
.cd-scene img{width:100%}
.cd-hot{position:absolute;border:0;padding:0;background:none;border-radius:.5rem}
.cd-hot::after{content:"";position:absolute;right:-5px;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--orange);border:2px solid var(--white);animation:cd-pulse 1.6s infinite}
.cd-hot:hover,.cd-hot[aria-expanded="true"]{outline:3px solid var(--orange);outline-offset:2px}
.cd-hot.cd-seen::after{background:var(--hellgruen);animation:none}
@keyframes cd-pulse{0%{box-shadow:0 0 0 0 rgba(219,145,42,.7)}70%{box-shadow:0 0 0 10px rgba(219,145,42,0)}100%{box-shadow:0 0 0 0 rgba(219,145,42,0)}}
@media(prefers-reduced-motion:reduce){.cd-hot::after{animation:none}}

/* Chat: Marie und die App */
.cd-chat{position:relative;margin-bottom:1rem}
.cd-say{display:flex;gap:.6rem;align-items:flex-start;background:#efedf8;border-radius:1rem 1rem 1rem .3rem;padding:.8rem 2rem .8rem .8rem;margin:0 1.2rem .7rem 0;animation:cd-in .25s ease}
.cd-say img{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--white);flex:none}
.cd-say p{margin:.2rem 0 0;font-size:.85rem}
.cd-say ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.85rem}
.cd-say li{margin-bottom:.35rem}
.cd-say-app{flex-direction:row-reverse;background:#e6f4f4;border-radius:1rem 1rem .3rem 1rem;padding:.8rem;margin:0 0 0 1.2rem;animation-delay:.5s;animation-fill-mode:both}
.cd-say-app img{object-fit:contain;padding:.3rem;border:2px solid #d3e9e9}
.cd-say-close{position:absolute;top:.3rem;right:1.7rem;border:0;background:none;font-size:1.3rem;line-height:1}
@media(prefers-reduced-motion:reduce){.cd-say{animation:none}}