/* Chat-Sticker-Stil: Start, Quiz, Galerie, Kontakt, Erfolg. Grundlagen in chat.css. */

/* Collagen der Abschnitte laufen bis an den Bildschirmrand. */
.hero-collage,.say-collage,.end-collage{left:calc(50% - 50vw);right:calc(50% - 50vw)}

/* Start: Hero als Headline-Stapel mit Collage am unteren Rand */
.hero{position:relative;display:grid;place-items:center;min-height:calc(100svh - 76px);padding:var(--s8) 0 280px;text-align:center}
.hero-copy{position:relative;z-index:2;display:grid;justify-items:center;gap:var(--s4);width:100%;max-width:1040px;min-width:0}
.hero-title{font-size:clamp(32px,9.4vw,60px);position:relative;z-index:1}
.hero-title .ln{white-space:normal;max-width:100%}
.hero-sub{max-width:31em;font-size:17px;color:#2b303a}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 20px}
.occasions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--s2)}
.occasions-label{flex-basis:100%;font-size:14px;font-weight:600;color:var(--muted)}
.occasion{display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:4px 18px 4px 6px;border-radius:999px;background:var(--white);font:800 15px/1 var(--display);box-shadow:var(--hard);transform:rotate(var(--tilt));transition:transform .16s var(--ease-out),box-shadow .16s}
.occasion:hover{transform:rotate(0) translateY(-3px) scale(1.05);box-shadow:var(--hard-lg)}
.occasion .occasion-sticker{width:44px;height:44px}
@media(min-width:1101px){.hero{padding:var(--s6) 0 300px}.hero-title{font-size:clamp(60px,5.6vw,92px)}.hero-sub{font-size:19px}}

/* Start: „Zeigt …“ wächst entlang einer Kurve wie „Say Say Say“, endet mit Marker-Unterstrich. */
.say{position:relative;padding:var(--s8) 0 var(--s7)}
.say-pin{position:relative}
.say-stage{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;max-width:760px;margin:0 auto;padding:0 0 var(--s6)}
.say-echo{position:relative;display:block;height:clamp(170px,40vw,260px)}
.say-e{position:absolute;left:calc(var(--i) * 12%);top:calc(var(--i) * var(--i) * 1.4% + var(--i) * 4%);font-size:calc(14px + var(--i) * 5px);rotate:calc(-34deg + var(--i) * 6.5deg);z-index:var(--i)}
@media(min-width:721px){.say-e{font-size:calc(18px + var(--i) * 7px)}}
.say-under{left:8%;width:84%;bottom:.1em;height:.42em;color:#c9d6ff}
.say-rays{right:-.7em;bottom:-.9em;width:.9em;height:.9em}
.say-heart{width:clamp(40px,8vw,60px);height:auto;position:relative;align-self:center;margin-top:-4px}
@media(min-width:1101px){.say{padding:var(--s8) 0}.say-pin{min-height:100dvh;display:grid;align-content:center}.say-echo{height:300px}.say-e{font-size:calc(20px + var(--i) * 8px)}}

/* Start: Pixel-Sprechblasen und „Ihr!“-Stapel */
.styles{position:relative;padding:var(--s7) 0;display:grid;justify-items:center;text-align:center;gap:var(--s4)}
.px-stack{display:flex;flex-direction:column;align-items:center;gap:18px;--px-size:18px;font-weight:400}
.px-stack .px-bubble:nth-child(1){translate:18% 0}.px-stack .px-bubble:nth-child(2){translate:8% 0}
@media(min-width:721px){.px-stack{--px-size:26px;gap:24px}.px-stack .px-bubble{--p:4px;padding:14px 22px}}
.pile{position:relative;width:100%;max-width:900px;height:clamp(420px,112vw,580px);margin:var(--s4) 0 0;font-size:clamp(30px,8.4vw,60px)}
.pile-item{filter:var(--diecut);position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);translate:-50% -50%;rotate:var(--r);z-index:var(--z);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-family:var(--display);line-height:1;padding:.14em .42em .2em;white-space:nowrap;user-select:none;-webkit-user-select:none;cursor:grab;touch-action:manipulation}
.pile-item:active{cursor:grabbing}
.pile-item.is-top{z-index:40}
.look-red{background:var(--red);color:var(--white);border-radius:.18em;box-shadow:0 0 0 .07em var(--white);font-size:1.25em}
.look-black{background:var(--ink);color:var(--white);text-transform:uppercase;padding:.16em .5em;font-size:1.3em}
.look-sun{background:var(--sun);color:var(--ink);border-radius:46% 54% 50% 50%/60% 56% 44% 40%;box-shadow:0 0 0 .07em var(--ink);padding:.3em .6em}
.look-blue{background:var(--blue);color:var(--white);border-radius:.7em;font-weight:800;font-size:1em;font-family:var(--text)}
.look-blue::after,.look-yellow::after{content:'';position:absolute;left:-.2em;bottom:0;width:.52em;height:.46em;background:inherit;-webkit-mask:radial-gradient(circle at 0 0,transparent .44em,#000 .455em);mask:radial-gradient(circle at 0 0,transparent .44em,#000 .455em)}
.look-lime{background:radial-gradient(120% 90% at 28% 18%,#f4ff9a 0 16%,var(--lime) 46%,#b9dc1c 100%);color:#2c4a00;border-radius:999px;font-weight:500;font-size:1em;font-family:var(--text);padding:.24em .7em;box-shadow:inset 0 -.06em .12em rgba(80,110,0,.35)}
.look-checker{background:repeating-conic-gradient(#ff7fc4 0 25%,#ff9ed3 0 50%) 0 0/.7em .7em;color:var(--white);border-radius:999px;font-weight:600;font-size:1.1em;font-family:var(--text);padding:.24em .7em}
.look-orange{background:var(--orange);color:var(--ink);font-size:.8em;padding:.2em .5em}
.look-orange>span{display:inline-block;transform:skewX(-10deg)}
.look-white{background:var(--white);color:var(--ink);border-radius:.6em;font-weight:400;font-size:1em;font-family:var(--text);text-transform:lowercase}
.look-green{background:#7be0a2;color:#0b4d27;border-radius:.16em;font-weight:500;font-size:.9em;font-family:var(--text)}
.look-pixel{--p:3px;--px-size:22px;background:var(--white);padding:10px 14px;box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),3px 9px 0 0 rgba(11,13,18,.12)}
.look-biscuit{background:#f1c27d radial-gradient(circle,rgba(150,90,20,.35) 0 .05em,transparent .06em) 0 0/.5em .5em;color:#5a3305;border-radius:.2em;font-weight:700;font-size:.8em;font-family:var(--text);box-shadow:inset 0 0 0 .06em rgba(150,90,20,.4)}
.look-chip{background:var(--blue);color:var(--white);font-size:.46em;padding:.3em .6em;border-radius:.3em;box-shadow:inset 0 0 0 .14em var(--blue),inset 0 0 0 .24em var(--white)}
.look-sel{padding:0;font-size:.5em}.look-sel .sel{font-weight:800;font-size:1em;font-family:var(--display);padding:.4em .7em}
.look-cream{background:#fff4dc;color:var(--ink);font-weight:800;font-size:.8em;font-family:var(--display)}
.look-cream>span{display:inline-block;transform:skewX(-12deg)}
.look-sky{background:var(--blue-sky);color:var(--white);-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill;border-radius:.2em;font-size:.6em}
.look-yellow{background:var(--sun);color:var(--ink);border-radius:.7em;font-weight:500;font-size:1.15em;font-family:var(--text);padding:.24em .6em}
.pile-hint{max-width:28em;color:var(--muted);font-size:16px}

/* Start: Beispiele als Linkvorschauen im Chatverlauf */
.teaser{position:relative;padding:var(--s7) 0;display:grid;justify-items:center;gap:var(--s5)}
@media(min-width:1101px){.teaser{padding:var(--s8) 0}.thread{gap:var(--s4)}.preview{width:min(100%,560px)}}

/* Start: Abschluss mit Nachrichtenfeld */
.end{position:relative;padding:var(--s7) 0 300px;display:grid;justify-items:center;gap:var(--s4);text-align:center}
.end .kinetic,.end .msg-pill,.end .quiet-link{position:relative;z-index:2}
.msg-pill{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line),var(--hard);min-width:0}
.big-pill{width:min(100%,560px);min-height:64px;font-size:17px;color:var(--muted);justify-content:space-between;text-align:left;transition:transform .16s var(--ease-out),box-shadow .16s}
.big-pill:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--blue),var(--hard-lg)}
.send-dot{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--blue);color:var(--white)}
.send-dot svg{width:20px;height:20px}
.big-pill .send-dot{width:52px;height:52px}
@media(min-width:1101px){.end{padding:var(--s9) 0 340px}}
.sticky-cta{position:fixed;left:var(--s3);right:var(--s3);bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));z-index:20;transform:translateY(160%);transition:transform .24s var(--ease-out)}
.sticky-cta.is-on{transform:none}
.sticky-cta .btn{width:100%;box-shadow:var(--hard-lg)}
.sticky-cta .btn::after{display:none}
@media(min-width:721px){.sticky-cta{display:none}}

/* Galerie */
.gallery-page{padding-bottom:var(--s7)}
.page-head{padding:var(--s4) 0 var(--s5)}
.page-head p{margin-top:var(--s3);font-size:18px;color:#2b303a}
.gallery-cats{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 var(--s6)}
.gallery-cat{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--white);box-shadow:var(--hard);font-size:15px;font-weight:700;transition:transform .14s var(--ease-out)}
.gallery-cat:hover{transform:translateY(-2px)}
.gallery-cat small{font-size:12px;font-weight:700;color:var(--muted)}
.gallery-cat[aria-pressed=true]{background:none;box-shadow:none;padding:0 4px}
.gallery-cat[aria-pressed=true] .sel{padding:9px 14px;gap:8px;font-size:15px}
.gallery.preview-msg.from-them{justify-self:start}.preview-msg.preview-msg .preview-msg.from-them .preview-msg.tag-sticker.look-red{background:#d4190f;color:var(--white)}.tag-sticker.look-lime{background:var(--lime);color:var(--ink)}.tag-sticker.look-sun{background:var(--sun);color:var(--ink)}.tag-sticker.look-green{background:var(--green);color:var(--white)}
.gallery-return{margin-top:var(--s3)}
.section-links{display:flex;flex-wrap:wrap;gap:16px 20px;margin-top:var(--s8)}
@media(min-width:1101px){.page-head{padding:var(--s6) 0 var(--s5)}.gallery.thread{gap:var(--s5)}.preview-msg{width:min(100%,600px)}}

/* Quiz: Kopf wie die Chatleiste der Referenz */
.quiz-top{position:relative;z-index:10;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px;padding:12px 0 6px}
.quiz-title{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.step-chip{font-size:14px;max-width:100%}
.step-chip span:not(.sel-h){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress{position:relative;width:min(220px,70%);height:4px;border-radius:4px;background:var(--grey)}
.progress-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--blue)}
.quiz-main{position:relative}
.quiz-collage{position:fixed;inset:0;z-index:-1}
.milestone{display:block;position:relative;z-index:2;margin:6px 0 4px 14px;--px-size:9px}
.milestone .px-bubble{--p:2px;padding:7px 10px}
.question-head{position:relative;z-index:2;padding:var(--s2) 0 var(--s3)}
.question-head>p{margin-top:12px;font-size:15px;line-height:1.45;color:#2b303a}
.step-lead{font-weight:700;color:var(--ink)}
.step-extra{position:relative;z-index:2}

/* Antworten: weiße Blasen; gewählt wird die Blase blau mit Schwanz und Haken. */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.choice{position:relative;text-align:center}
.choices:not(.compact-choices) .choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0;padding:10px 12px 14px;border-radius:26px;background:var(--white);color:var(--ink);box-shadow:var(--hard);transform:rotate(calc(var(--tilt,0deg) * .4));transition:transform .16s var(--ease-out),background-color .16s,color .16s,box-shadow .16s,border-radius .16s}
.choices:not(.compact-choices) .choice{box-shadow:inset 0 0 0 1.5px rgba(11,13,18,.08),var(--hard)}
.choices:not(.compact-choices) .choice:hover{transform:rotate(0) translate(-1px,-3px);box-shadow:inset 0 0 0 1.5px rgba(11,13,18,.08),var(--hard-lg)}
.choices:not(.compact-choices) .choice:active{transform:translate(2px,3px);box-shadow:var(--hard-press)}
.choices:not(.compact-choices) .choice[aria-pressed=true]{box-shadow:var(--hard)}
.choices:not(.compact-choices) .choice{border-bottom-left-radius:8px}
.choices:not(.compact-choices) .choice::after{content:'';position:absolute;left:-7px;bottom:0;width:20px;height:18px;background:var(--white);-webkit-mask:radial-gradient(circle at 0 0,transparent 16px,#000 17px);mask:radial-gradient(circle at 0 0,transparent 16px,#000 17px)}
.choices:not(.compact-choices) .choice[aria-pressed=true]{background:var(--blue);color:var(--white);border-bottom-right-radius:8px;border-bottom-left-radius:26px}
.choices:not(.compact-choices) .choice[aria-pressed=true]::after{content:'';position:absolute;left:auto;right:-7px;bottom:0;width:20px;height:18px;background:var(--blue);-webkit-mask:radial-gradient(circle at 100% 0,transparent 16px,#000 17px);mask:radial-gradient(circle at 100% 0,transparent 16px,#000 17px)}
.choice:disabled{opacity:.6}
.choice-art{display:flex;align-items:center;justify-content:center;width:100%;flex:1 1 0;min-height:40px;max-height:clamp(44px,10dvh,112px);pointer-events:none}
.choice-label,.choice-hint{flex:none}
.choice-art .sticker{height:100%;width:auto;max-width:100%;transform:rotate(var(--tilt,0deg)) scale(1.18) translateY(-6%);transition:transform .18s var(--ease-out)}
.choice:hover .choice-art .sticker{transform:rotate(0) scale(1.28) translateY(-10%)}
.choice[aria-pressed=true] .choice-art .sticker{transform:rotate(calc(var(--tilt,0deg) * -2)) scale(1.24) translateY(-8%)}
.choice-label{font:800 15px/1.2 var(--display);overflow-wrap:anywhere;hyphens:auto}
.choice-hint{font-size:12px;line-height:1.35;color:var(--muted)}
.choice[aria-pressed=true] .choice-hint{color:rgba(255,255,255,.88)}
.choice-check{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800}
.choice.multi:not([aria-pressed=true]) .choice-check{background:var(--paper);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.choice[aria-pressed=true] .choice-check{background:var(--white);color:var(--blue)}
.choice:not(.multi):not([aria-pressed=true]) .choice-check{display:none}
.text-choice .choice-label{font-size:16px}

/* Zeitlineal und Stilvorschauen */
.time-art{max-height:clamp(28px,6dvh,56px)}
.ruler{position:relative;display:block;width:82%;height:10px;border-radius:10px;background:var(--grey)}
.ruler::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(11,13,18,.2) calc(25% - 2px) 25%);border-radius:10px}
.ruler-fill{position:absolute;left:0;top:0;bottom:0;width:var(--at);border-radius:10px;background:var(--blue)}
.ruler-mark{position:absolute;left:var(--at);top:50%;width:22px;height:22px;border-radius:50%;background:var(--sun);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--white),var(--hard)}
.choice[aria-pressed=true] .ruler{background:rgba(255,255,255,.3)}.choice[aria-pressed=true] .ruler-fill{background:var(--white)}
.type-sticker{font:900 28px var(--display);padding:4px 12px;border-radius:12px;background:var(--sun);color:var(--ink)}
.style-art{max-height:clamp(64px,13dvh,128px);min-height:52px}
.mini-phone{position:relative;display:block;height:100%;aspect-ratio:10/17;border-radius:14%/8%;border:3px solid var(--ink);background:var(--white);overflow:hidden;transform:rotate(var(--tilt,0deg));text-align:left}
.mini-bar{position:absolute;left:30%;right:30%;top:4%;height:5%;border-radius:8px;background:var(--ink)}
.mini-title{position:absolute;left:10%;top:16%;font:900 clamp(9px,1.6dvh,15px)/1 var(--display);color:var(--ink)}
.mini-phone .mini-sticker{position:absolute;right:6%;bottom:22%;width:46%;height:auto}
.mini-line{position:absolute;left:10%;right:30%;bottom:16%;height:4%;border-radius:4px;background:var(--line)}
.mini-cta{position:absolute;left:10%;width:38%;bottom:6%;height:7%;border-radius:6px;background:var(--blue)}
.style-calm .mini-phone{background:var(--paper)}.style-calm .mini-phone .mini-sticker{width:34%}
.style-photo .mini-phone{background:linear-gradient(160deg,#ffb36b,#ff4d00 55%,#0b0d12)}.style-photo .mini-phone .mini-sticker{width:70%;right:15%;bottom:28%}.style-photo .mini-line{background:rgba(255,255,255,.6)}.style-photo .mini-cta{background:var(--white)}
.style-type .mini-phone{background:var(--sun)}.style-type .mini-title{font-size:clamp(12px,2.4dvh,22px);top:14%}.style-type .mini-phone .mini-sticker{width:28%;bottom:40%}
.style-play .mini-phone{background:var(--blue)}.style-play .mini-title{color:var(--white)}.style-play .mini-cta{background:var(--lime)}
.style-game .mini-phone{background:var(--lime)}.style-game .mini-title{transform:rotate(-8deg);font-size:clamp(14px,2.6dvh,24px)}
.motion-arrow{position:absolute;right:10%;top:12%;font:800 clamp(12px,2dvh,18px) var(--text);color:var(--white)}
.game-target{position:absolute;right:12%;top:12%;width:18%;aspect-ratio:1;border-radius:50%;border:3px solid var(--ink)}
.choice[aria-pressed=true] .mini-phone{border-color:var(--white)}
.choice:hover .style-play .motion-arrow{animation:hint-down .9s var(--ease-out)}
.choice:hover .style-game .game-target{animation:hint-hop .7s var(--ease-out)}
@keyframes hint-down{50%{transform:translateY(8px)}}
@keyframes hint-hop{50%{transform:translate(-8px,6px) scale(.8)}}


/* Steuerleiste als Nachrichtenfeld: Zurück, gesammelte Sticker mit Status, blauer Senden-Knopf. */
.quiz-controls{position:relative;z-index:5;padding:8px 0}
.pill-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;max-width:780px;margin:0 auto}
.quiz-controls .msg-pill{padding:6px 18px 6px 8px}
.selection-status{font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:720px){.board-stickers .board-sticker:nth-child(n+3){display:none}.quiz-controls .msg-pill{padding-right:12px}}
.send{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--blue);color:var(--white);font:800 16px/1 var(--display);box-shadow:var(--hard);transition:transform .14s var(--ease-out),background-color .16s,color .16s}
.send .send-dot{background:rgba(255,255,255,.2)}
.send:hover:not(:disabled){transform:translateY(-2px)}
.send:active:not(:disabled){transform:scale(.97)}
.send:disabled{background:var(--grey);color:var(--muted);box-shadow:none}
.send:disabled .send-dot{background:var(--white);color:var(--muted)}

/* Feste Fragebühne: nichts scrollt, Formulare und Zoom behalten erreichbaren Überlauf. */
@media(min-height:600px){
 body:has(#app[data-view=quiz] .choice-screen){overflow:hidden}
 #app[data-view=quiz]:has(.choice-screen) .wrap{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
 #app[data-view=quiz]:has(.choice-screen) .view{min-height:0}
 #app[data-view=quiz] .choice-screen{height:100%;display:flex;flex-direction:column;min-height:0}
 .choice-screen .field-group{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:2}
 .choice-screen .choices{flex:1;min-height:0;grid-template-rows:repeat(var(--choice-rows),minmax(0,190px));align-content:center}
 .choice-screen .choices .choice{height:100%}
 #app[data-view=quiz]:has(.choice-screen) .footer{padding:2px 0 calc(4px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:720px) and (max-height:780px){
 .choice-screen .kinetic>span{flex-direction:row;flex-wrap:wrap;gap:4px 2px}
 .choice-screen .kinetic{font-size:clamp(26px,7.6vw,32px)}
 .choice-screen .question-head{padding:4px 0 10px}
 .choice-screen .question-head p{margin-top:8px;font-size:14px}
 .choice-screen .choice-hint{display:none}
 .milestone{display:none}
}
@media(max-width:720px){
 .quiz-controls .send{padding-left:16px;font-size:15px}
 #app[data-view=quiz] .footer{font-size:12px;gap:8px}
 .quiz-top{padding-top:8px}
}
/* Niedrige Phones (z. B. iPhone SE in Safari): Karten behalten bedienbare Höhe, die Frage scrollt, Weiter bleibt unten angeheftet. */
@media(max-height:599px){
 .choice-screen .kinetic>span{flex-direction:row;flex-wrap:wrap;gap:4px 2px}
 .choice-screen .kinetic{font-size:26px}
 .choice-screen .choices{grid-auto-rows:minmax(104px,auto)}
 .choice-screen .choice-art{flex:none;height:52px}
 .choice-screen .quiz-controls{position:sticky;bottom:0;background:var(--paper);padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
 .milestone{display:none}
}
@media(min-width:721px){.choices{gap:16px}.choice-label{font-size:17px}.choice-hint{font-size:13px}}
@media(min-width:1101px) and (min-height:600px){
 #app[data-view=quiz] .choice-screen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr auto auto;column-gap:var(--s7);align-items:start}
 .choice-screen .milestone{grid-column:1;grid-row:1;align-self:end;margin-top:var(--s4);--px-size:11px}
 .choice-screen .question-head{grid-column:1;grid-row:2;padding-top:var(--s4)}
 .choice-screen .kinetic{font-size:clamp(46px,4.6vw,72px)}
 .choice-screen .question-head>p{font-size:17px;margin-top:var(--s3);max-width:26em}
 .choice-screen .step-extra{grid-column:1;grid-row:3;align-self:start}
 .choice-screen .field-group{grid-column:2;grid-row:1/5;height:100%;padding:var(--s4) 0}
 .choice-screen .choices{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--choice-rows),minmax(0,220px))}
 .choice-screen>.error{grid-column:1;grid-row:4}
 .choice-screen .quiz-controls{grid-column:1/-1;grid-row:5}
 .choice-art{max-height:clamp(56px,11dvh,124px)}
 .choice-screen .choices:has(>.choice:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}

/* Kontaktschritt: Projektstapel als Wert vor dem Formular */
.contact-screen{padding-bottom:var(--s6)}
.contact-screen .kinetic{font-size:clamp(36px,10vw,64px)}
.contact-screen .question-head p{margin-top:var(--s3)}
.contact-layout{position:relative;z-index:2;display:grid;gap:var(--s5);align-items:start}
@media(min-width:1001px){.contact-layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s6)}.contact-layout .poster{position:sticky;top:var(--s4)}}
.poster{position:relative;padding:var(--s4);transform:rotate(-1deg)}
.poster-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.poster-title{font:900 30px/1.05 var(--display);letter-spacing:-.02em}
.poster-chip{font-size:13px}
.poster-pile{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:var(--s3) 0 var(--s4);margin:0 -6px}
.poster-pile{font-size:clamp(20px,5.4vw,28px)}
.poster-pile .pile-item{position:relative;left:auto;top:auto;translate:none;z-index:2;margin:-2px -1px;cursor:default}
.poster-pile .look-pixel{--px-size:14px;padding:8px 10px}
.poster-sticker{display:block;width:clamp(52px,13vw,92px);margin:-6px 2px;rotate:var(--r);position:relative;z-index:1}
.poster-sticker .sticker{width:100%;height:auto}
.poster-row{display:grid;gap:8px;padding:12px 0;border-top:1.5px solid var(--line)}
.poster-label{font-size:13px;font-weight:800}
.poster-value{font-size:15px;line-height:1.45}
.mix-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--grey)}
.mix-bar i{flex:0 0 var(--w);border-right:2px solid var(--white)}.mix-bar i:last-child{border-right:0;flex-grow:1}
.mix-0{background:var(--red)}.mix-1{background:var(--lime)}.mix-2{background:var(--blue)}.mix-3{background:var(--sun)}
.mix-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600}
.mix-legend span{display:inline-flex;align-items:center;gap:6px}
.mix-legend i{width:12px;height:12px;border-radius:50%}
.ruler.small{width:100%}
.poster-edit{margin-top:var(--s2)}
.stamp{position:absolute;right:-10px;top:-22px;width:112px;transform:rotate(14deg)}
.stamp .sticker{width:100%;height:auto}
@media(min-width:721px){.poster{padding:var(--s5)}}

/* Kurzkontakt und Erfolg */
.quick{max-width:760px;padding-bottom:var(--s7)}
.quick .question-head{padding:var(--s4) 0 var(--s5)}
.success{max-width:880px;margin:auto;padding:var(--s5) 0 var(--s7);display:grid;gap:var(--s5);justify-items:start}
.success-copy p{margin-top:var(--s3);max-width:36em}
.success .poster{width:min(100%,560px)}
.reference{font-size:13px;color:var(--muted);word-break:break-all}

@media(prefers-reduced-motion:reduce){
 .choice-art .sticker,.preview,.occasion,.send,.big-pill,.gallery-cat,.sticky-cta{transition:none}
 .choice:hover .motion-arrow,.choice:hover .game-target{animation:none}
 .choices:not(.compact-choices) .choice:hover{transform:rotate(calc(var(--tilt,0deg) * .4))}
}

/* Schmale Phones: Status im Nachrichtenfeld bleibt lesbar. Weiter behält seinen Namen, ab 350 px nur noch als Pfeil sichtbar. */
@media(max-width:400px){
  .pill-row{gap:8px;grid-template-columns:44px minmax(0,1fr) auto}
 .pill-row .round{width:44px;height:44px}
 .quiz-controls .send{padding:4px 4px 4px 14px;gap:8px}
 .quiz-controls .send-dot{width:36px;height:36px}
 .selection-status{font-size:14px}
 .footer{font-size:12px;gap:8px}.footer button,.footer a{white-space:nowrap}
}
@media(max-width:350px){.quiz-controls .send>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.quiz-controls .send{padding:4px}}
@media(max-width:720px){.preview-msg{width:94%}}
@media(min-width:721px) and (max-width:1100px) and (min-height:900px){.choice-screen .kinetic{font-size:60px}.choice-screen .question-head{padding-top:var(--s4)}}

/* Zweiter Durchgang 19.10.2026: echte Chatblasen, Varianten oben, Sticker-Chips, Ablage, Türszene, Claim. */
.say-e{font-weight:600;padding:.28em .6em .34em;border-radius:.9em;white-space:nowrap}
.say-chat{margin:var(--s3) auto 0;max-width:640px}
.say-chat .imsg{font-size:clamp(20px,5.4vw,30px);line-height:1.25;padding:.28em .62em .34em;border-radius:.92em}
.say-chat .say-last{position:relative;font-size:clamp(26px,7vw,44px);font-weight:600}
.say-heart{width:clamp(40px,8vw,60px);height:auto;position:relative;display:block;margin:6px auto 0}
.say-stage{gap:0}

/* Quiz: Kopf als Chat */
.question-head .chat{width:auto}
.quiz-prev{margin:0 0 8px}
.quiz-prev .imsg{font-size:15px;line-height:20px}
.quiz-prev .imsg-meta{margin-top:2px}
.quiz-lead{margin-top:14px}
.question-head .quiz-lead .imsg{margin:0;font-size:16px;line-height:21px;color:#000}
.lead-typing{display:none}
.lead-hint{align-self:flex-start;margin-left:40px}
@media(max-height:820px){.quiz-prev{display:none}}
@media(max-width:720px) and (max-height:780px){.quiz-lead{margin-top:8px}.question-head .quiz-lead .imsg{font-size:15px;line-height:19px;padding:6px 11px 7px}.lead-hint{display:none}.quiz-lead .kp-avatar{width:26px;height:26px}}
@media(min-width:1101px){.question-head .quiz-lead .imsg{font-size:17px;line-height:22px}}

/* Varianten der Frage */
.kinetic.v-bubbles>span{gap:3px}
.ln-imsg{position:relative;display:block;width:fit-content;max-width:100%;padding:.12em .5em .2em;border-radius:.62em;font-weight:800;white-space:nowrap;filter:var(--diecut)}
.ln-imsg.them{background:var(--imsg-grey);color:var(--ink);align-self:flex-start}
.ln-imsg.us{background:var(--blue);color:var(--white);align-self:flex-start;margin-left:.5em}
.ln-imsg.tail::after,.ln-big::after{content:'';position:absolute;z-index:-1;bottom:0;width:.62em;height:.62em;background:inherit;-webkit-mask:var(--tail) no-repeat 0 0/100% 100%;mask:var(--tail) no-repeat 0 0/100% 100%}
.ln-imsg.us.tail::after,.ln-big::after{right:-.22em}.ln-imsg.them.tail::after{left:-.22em;transform:scaleX(-1)}
.ln-imsg.them+.ln-imsg.us,.ln-imsg.us+.ln-imsg.them{margin-top:.14em}
.kinetic.v-pixel>span{gap:14px;--px-size:clamp(15px,4.2vw,26px)}
.kinetic.v-pixel .px-bubble{translate:calc((2 - var(--i)) * 14px) 0}
.kinetic.v-pixel .px-bubble:first-child{margin-left:12px}
.kinetic.v-pile>span{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.06em .04em;max-width:13em}
.ln-word{position:relative;display:inline-flex;align-items:center;padding:.06em .3em .12em;rotate:var(--r);filter:var(--diecut);white-space:nowrap;line-height:1}
.v-pile .look-black,.v-pile .look-red{font-size:1.06em}.v-pile .look-white,.v-pile .look-lime{font-size:.92em}
.ln-big{position:relative;isolation:isolate;display:block;width:fit-content;max-width:100%;padding:.2em .55em .28em;border-radius:.6em;background:var(--blue);color:var(--white);filter:var(--diecut);line-height:1.04}
.ln-big em{position:relative;font-style:normal}
.ln-big .tapback{top:-18px;left:auto;right:18px;width:46px;height:40px;border-radius:20px}
.ln-big .tapback svg{width:24px;height:24px}.ln-big .tapback .tb-bang{font-size:20px}
.ln-big .ln-under{bottom:-.16em;height:.3em}.ln-imsg .ln-under{bottom:-.02em}
.ln-imsg .ln-under,.ln-big .ln-under{color:#c9d6ff}

/* Viele Antworten: Sticker-Chips, alle auf einem Bildschirm */
.choices.chips{gap:8px}
.choice-screen .choices.chips{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--choice-rows),minmax(44px,60px));align-content:center;overflow:auto;padding:4px 8px 8px 4px;margin:-4px -8px -8px -4px}
@media(min-width:721px){.choice-screen .choices.chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.choices.chips .choice{flex-direction:row;justify-content:flex-start;gap:8px;padding:4px 34px 4px 6px;border-radius:22px;text-align:left;height:100%;min-height:44px}
.choices.chips .choice::after{display:none}
.choices:not(.compact-choices).chips .choice[aria-pressed=true]{border-radius:22px}
.choices.chips .chip-art{flex:none;width:40px;height:40px;max-height:none;min-height:0}
.choices.chips .chip-art .sticker{height:100%;transform:rotate(var(--tilt,0deg)) scale(1.12)}
.choices.chips .text-choice{padding-left:14px}
.choices.chips .choice-label{flex:1 1 0;min-width:0;font-size:14px;line-height:1.12;white-space:normal;overflow-wrap:normal;hyphens:auto}
.choices.chips .choice-check{top:50%;right:8px;transform:translateY(-50%);width:24px;height:24px;font-size:13px}
@media(min-width:1101px){.choices.chips .choice-label{font-size:15px}.choices.chips .chip-art{width:46px;height:46px}}

/* Sticker-Ablage im Nachrichtenfeld */
.quiz-controls .msg-pill{padding:5px 16px 5px 6px;gap:10px;overflow:hidden}
.drawer{display:flex;flex:0 1 auto;min-width:0;max-width:62%;overflow:hidden;justify-content:flex-end;padding:4px 3px 6px}
.drawer-track{display:flex;align-items:center;flex:none}
.drawer-sticker{display:block;width:34px;height:34px;margin-left:-10px;filter:var(--sticker-shadow)}
.drawer-track>.drawer-sticker:first-child{margin-left:0}
.drawer-track>.drawer-sticker:nth-child(odd){rotate:-8deg}.drawer-track>.drawer-sticker:nth-child(even){rotate:7deg}
.drawer-slot{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;margin-left:6px;border-radius:19px;border:2px dashed rgba(11,13,18,.22);padding:0 2px}
.drawer-slot.is-filled{border:2px solid var(--blue);background:var(--blue-soft)}
.drawer-slot .drawer-sticker{width:32px;height:32px;margin-left:-14px}.drawer-slot .drawer-sticker:first-child{margin-left:0}
@media(max-width:400px){.drawer-track>.drawer-sticker:nth-last-child(n+3){display:none}}
.send .handle-icon{transition:transform .25s var(--ease-out);transform-origin:30% 45%}
.send.to-contact:hover .handle-icon{transform:rotate(32deg)}
.confetti-bit{position:fixed;z-index:70;width:10px;height:14px;border-radius:2px;pointer-events:none}
.leaving{position:fixed!important;z-index:5;pointer-events:none;margin:0!important}

/* Start: Claim mit Requisiten */
.hero-claim{position:relative;width:100%}
.claim-props{position:absolute;inset:0;pointer-events:none}
.prop{position:absolute;display:block}
.prop .cl-img{width:100%;height:auto}
.prop-pdf{width:clamp(64px,15vw,140px);left:-2%;top:-14%;rotate:-14deg;z-index:0}
.prop-ball{width:clamp(40px,9vw,84px);left:4%;top:0;z-index:3;opacity:0}
.prop-bin{width:clamp(60px,13vw,124px);left:-3%;bottom:-16%;z-index:0}
.prop-web{width:clamp(80px,18vw,170px);right:-4%;top:40%;rotate:10deg;z-index:2}
@media(max-width:1100px){.hero-claim{padding-top:clamp(56px,14vw,96px)}.prop-pdf{top:0;left:2%;width:clamp(56px,14vw,96px)}.prop-ball{top:4%;left:8%;width:clamp(36px,9vw,56px)}.prop-bin{bottom:auto;top:0;left:auto;right:30%;width:clamp(48px,12vw,80px)}.prop-web{top:-2%;right:2%;width:clamp(64px,17vw,110px)}}
@media(min-width:1101px){.prop-pdf{left:2%}.prop-bin{left:4%}.prop-web{right:-9%;top:66%}}

/* Start: „Klopf, klopf.“ mit Tür */
.knock{position:relative;padding:var(--s7) 0}
.knock-pin{position:relative;display:grid;gap:var(--s6);align-items:center;justify-items:center;max-width:1100px;margin:0 auto}
.knock-chat{position:relative;z-index:2;width:100%;max-width:440px}
.knock-chat .imsg{font-size:19px;line-height:24px}
.k-typing{position:absolute;top:0;left:36px;visibility:hidden}
.k3-wrap{position:relative;display:block;width:fit-content;max-width:min(78%,440px)}
.k3-wrap .imsg{max-width:none}
.door-scene{position:relative;z-index:1;width:min(64vw,260px);perspective:1100px}
.door-frame{position:relative;display:block;aspect-ratio:1/1.9;background:#fff;border-radius:16px 16px 4px 4px;box-shadow:inset 0 0 0 1.5px rgba(11,13,18,.1),var(--hard-lg)}
.door-behind,.door-leaf{position:absolute;inset:10px 10px 0}
.door-behind{overflow:hidden;background:#111;border-radius:4px 4px 0 0}
.door-behind img{width:100%;height:100%;object-fit:cover;object-position:30% top}
.door-leaf{transform-origin:left center;background:linear-gradient(90deg,#ff6a2a,#ff4d00 55%,#e64400);border-radius:4px 4px 0 0;box-shadow:inset 0 0 0 3px rgba(11,13,18,.1);backface-visibility:hidden}
.door-panel{position:absolute;left:15%;right:15%;border-radius:6px;box-shadow:inset 3px 4px 0 rgba(11,13,18,.16),inset -2px -2px 0 rgba(255,255,255,.28)}
.door-panel.p1{top:7%;height:30%}.door-panel.p2{top:56%;height:36%}
.door-sign{position:absolute;left:12%;right:22%;top:40%;display:block;padding:6px 7px;background:#fff;border-radius:3px;box-shadow:var(--hard)}
.door-sign .px{width:100%;height:auto}
.door-knob{position:absolute;right:2%;top:60%;width:40%;translate:0 -50%}
.door-knob .cl-img{filter:drop-shadow(2px 3px 0 rgba(11,13,18,.25))}
.door-mat{position:absolute;left:50%;bottom:-11%;width:118%;translate:-50% 0;z-index:-1}
@media(min-width:1101px){.knock{padding:var(--s8) 0}.knock-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh}.door-scene{width:320px}.knock-chat{max-width:520px}.knock-chat .imsg{font-size:28px;line-height:34px;padding:9px 16px 10px;border-radius:24px}}

/* Start: „Ihr!“ mit Kontext und Mischen */
.styles-pin{display:grid;justify-items:center;gap:var(--s4);width:100%}
.pile-cap{position:absolute;left:50%;bottom:-.95em;translate:-50% 0;padding:3px 7px;border-radius:6px;background:var(--ink);color:#fff;font:700 11px/1 var(--text);letter-spacing:.02em;white-space:nowrap;text-transform:none;-webkit-text-stroke:0}
.pile-actions{display:flex;flex-wrap:wrap;gap:16px 20px;justify-content:center}

/* Start: Beispiele als iMessage-Verlauf */
.teaser-chat{max-width:560px;margin:0 auto}
.teaser-chat .imsg-link{width:min(86%,400px)}
.teaser-chat .imsg-link+.imsg-link{margin-top:6px}
@media(min-width:1101px){.teaser-chat{max-width:640px}.teaser-chat .imsg-link{width:440px}}
.pill-type::after{content:'';display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--blue);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* Galerie als Chatverlauf mit Rich Links */
.page-chat{margin-top:var(--s3);max-width:520px}
.gallery-chat{max-width:900px;margin:0 auto;gap:var(--s5)}
.gallery-msg{display:flex;flex-direction:column}
.gallery-msg.us{align-items:flex-end}
.gallery-msg .imsg-link{width:min(92%,560px)}
.gallery-msg .imsg-link-meta h2{font-size:17px;line-height:22px}
.imsg-link .tag-sticker{top:-14px;left:16px}
.imsg-link.us .tag-sticker{left:auto;right:16px}

/* Erfolg: die Tür geht auf */
.success-door{width:min(52vw,190px);justify-self:start}
.success-door .door-mat{display:none}

@media(prefers-reduced-motion:reduce){.pill-type::after{animation:none}.send .handle-icon{transition:none}}

/* Blasen wie im Original (Emilio, 19.10.2026: „Die nachrichten bubbles sehen noch nicht gut aus bitte besser hinbekommen mehr wie das Orginal“).
   Referenz chat-2-blasen: kräftiges iOS-Blau mit leichtem Verlauf und Glanz, weicher Tiefenschatten unter der Blase, kräftiger Schwanz, halbfette Schrift.
   Sticker (Bilder, Zeilen-Sticker) behalten ihre harte Kante; Blasen schweben wie in der Referenz. */
:root{
 --b-top:#47a3ff;--b-mid:#1a86ff;--b-bot:#0a70f0;
 --g-top:#fbfbfd;--g-bot:#e8e8ed;
 --tail2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 1H9C9 9.6 12.6 16.4 20 19.7C14.6 21 8.6 19.9 5.4 17.4C3.8 18.9 2 19.7 0 20Z'/%3E%3C/svg%3E");
 --float:drop-shadow(0 7px 10px rgba(14,52,140,.2)) drop-shadow(0 1.5px 1.5px rgba(14,52,140,.2));
 --float-grey:drop-shadow(0 6px 9px rgba(16,20,36,.11)) drop-shadow(0 1px 1.5px rgba(16,20,36,.14));
 --gloss:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -.25em .5em rgba(0,36,130,.16);
 --gloss-grey:inset 0 1.5px 0 #fff,inset 0 -.25em .5em rgba(10,14,40,.05)
}
.imsg{padding:.42em .78em .48em;border-radius:1.1em;font-weight:500;letter-spacing:-.016em}
.imsg.us{--tc:var(--b-bot);background:linear-gradient(180deg,var(--b-top),var(--b-mid) 48%,var(--b-bot));box-shadow:var(--gloss);filter:var(--float)}
.imsg.them{--tc:var(--g-bot);background:linear-gradient(180deg,var(--g-top),var(--g-bot));color:#0b0d12;box-shadow:var(--gloss-grey);filter:var(--float-grey)}
.imsg.tail::after{width:1.2em;height:1.2em;background:var(--tc);-webkit-mask:var(--tail2) no-repeat 0 0/100% 100%;mask:var(--tail2) no-repeat 0 0/100% 100%}
.imsg.us.tail::after{right:-.5em}.imsg.them.tail::after{left:-.5em}
.imsg.typing{gap:.3em;padding:.78em .9em}
.imsg.typing i{width:.48em;height:.48em}
.imsg-meta{margin-top:5px}
/* In den Szenen gekippt und gestaffelt wie in der Referenz. */
.knock-chat .imsg,.say-chat .imsg,.teaser-chat>.imsg{rotate:var(--rt,0deg)}
.knock-chat .k1 .imsg{--rt:-3deg}.knock-chat .k2{--rt:2.5deg}.knock-chat .k3 .imsg{--rt:-2deg}
.say-chat .say-b:nth-child(1){--rt:-3deg}.say-chat .say-b:nth-child(2){--rt:2deg}.say-chat .say-b:nth-child(3){--rt:-1.5deg}.say-chat .say-b:nth-child(4){--rt:3deg}.say-chat .say-b:nth-child(5){--rt:-2.5deg}.say-chat .say-last{--rt:-4deg}
.teaser-chat>.imsg:first-child{--rt:-2deg}.teaser-chat>.imsg.us{--rt:3deg}
.knock-chat .imsg{font-size:clamp(22px,6.2vw,30px);line-height:1.22;font-weight:600}
.knock-chat{gap:6px}.knock-chat .from-kp{gap:8px}
.say-chat .imsg{font-weight:600}
.say-e{box-shadow:var(--gloss);filter:var(--float)}
.quiz-lead .imsg,.quiz-prev .imsg{font-weight:500}
.quiz-prev .imsg.us{filter:drop-shadow(0 3px 5px rgba(14,52,140,.18))}
/* Rich Links schweben wie Blasen. */
.imsg-link{border-radius:20px;filter:var(--float-grey);background:linear-gradient(180deg,#f3f3f6,var(--g-bot))}
.imsg-link.tail::after{width:24px;height:24px;background:var(--g-bot);-webkit-mask:var(--tail2) no-repeat 0 0/100% 100%;mask:var(--tail2) no-repeat 0 0/100% 100%}
.imsg-link.us.tail::after{right:-11px}.imsg-link.them.tail::after{left:-11px}
.imsg-link-img{border-radius:20px 20px 0 0}
.imsg-link .tag-sticker{top:auto;bottom:auto;left:auto;right:12px;top:-12px}
.imsg-link.us .tag-sticker{right:auto;left:12px}
/* Zeilen-Sticker in Blasenform bekommen denselben Glanz und den neuen Schwanz. */
.ln-bubble,.ln-imsg.us,.ln-big{background:linear-gradient(180deg,var(--b-top),var(--b-mid) 50%,var(--b-bot));box-shadow:var(--gloss)}
.ln-bubble::after{left:-.3em;width:.62em;height:.62em;background:var(--b-bot);transform:scaleX(-1);-webkit-mask:var(--tail2) no-repeat 0 0/100% 100%;mask:var(--tail2) no-repeat 0 0/100% 100%}
.ln-imsg.us.tail::after,.ln-big::after{background:var(--b-bot);-webkit-mask-image:var(--tail2);mask-image:var(--tail2);right:-.28em}
.ln-imsg.them{background:linear-gradient(180deg,var(--g-top),var(--g-bot));box-shadow:var(--gloss-grey)}
.ln-imsg.them.tail::after{background:var(--g-bot);-webkit-mask-image:var(--tail2);mask-image:var(--tail2);left:-.28em}

/* Antworten als Chatblasen: weiß schwebend mit Schwanz links, gewählt blau mit Schwanz rechts. Keine harte Platte mehr. */
.choices:not(.compact-choices) .choice{border-radius:26px;background:linear-gradient(180deg,#fff,#f3f4f7);box-shadow:var(--gloss-grey),inset 0 0 0 1px rgba(11,13,18,.05);filter:var(--float-grey);transform:rotate(calc(var(--tilt,0deg) * .35));transition:transform .2s var(--ease-out),filter .2s}
.choices:not(.compact-choices) .choice::after{content:'';position:absolute;left:-10px;right:auto;bottom:0;width:26px;height:26px;background:#f3f4f7;transform:scaleX(-1);-webkit-mask:var(--tail2) no-repeat 0 0/100% 100%;mask:var(--tail2) no-repeat 0 0/100% 100%}
.choices:not(.compact-choices) .choice:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--gloss-grey),inset 0 0 0 1px rgba(11,13,18,.05);filter:drop-shadow(0 12px 16px rgba(16,20,36,.14)) drop-shadow(0 2px 2px rgba(16,20,36,.12))}
.choices:not(.compact-choices) .choice:active{transform:scale(.97);box-shadow:var(--gloss-grey);filter:var(--float-grey)}
.choices:not(.compact-choices) .choice[aria-pressed=true]{border-radius:26px;background:linear-gradient(180deg,var(--b-top),var(--b-mid) 50%,var(--b-bot));color:#fff;box-shadow:var(--gloss);filter:var(--float)}
.choices:not(.compact-choices) .choice[aria-pressed=true]::after{left:auto;right:-10px;background:var(--b-bot);transform:none}
.choices.chips .choice::after{display:none}
.choice-art .sticker,.chip-art .sticker{filter:drop-shadow(0 3px 2px rgba(11,13,18,.2)) drop-shadow(0 8px 10px rgba(11,13,18,.1))}
.choice-screen .choice-art{max-height:clamp(48px,13dvh,150px)}
.choice.multi:not([aria-pressed=true]) .choice-check{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,13,18,.14)}

/* Beispiele: Filter als Blasen in einer ruhigen Reihe, gewählt blau. */
.gallery-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 var(--s5)}
@media(min-width:721px){.gallery-cats{display:flex;flex-wrap:wrap;gap:12px}}
.gallery-cat,.gallery-cat[aria-pressed=true]{justify-content:space-between;gap:10px;min-height:48px;padding:10px 16px 11px;border-radius:24px;font:600 15px/1.2 var(--text);letter-spacing:-.01em;background:linear-gradient(180deg,var(--g-top),var(--g-bot));color:var(--ink);box-shadow:var(--gloss-grey);filter:var(--float-grey);text-align:left}
.gallery-cat small{flex:none;min-width:24px;padding:2px 7px;border-radius:12px;background:rgba(11,13,18,.07);color:var(--muted);font:700 12px/1.3 var(--text);text-align:center}
.gallery-cat[aria-pressed=true]{background:linear-gradient(180deg,var(--b-top),var(--b-mid) 50%,var(--b-bot));color:#fff;box-shadow:var(--gloss);filter:var(--float)}
.gallery-cat[aria-pressed=true] small{background:rgba(255,255,255,.22);color:#fff}
.gallery-cat:hover{transform:translateY(-2px)}.gallery-cat:active{transform:scale(.97)}

/* Kein Springen beim Seitenwechsel: Tippen liegt über der Blase. */
.quiz-lead .from-kp{position:relative}
.quiz-lead .lead-typing{position:absolute;left:36px;bottom:0;margin:0}

.send .l-short{display:none}
@media(max-width:720px){.send.to-contact .l-long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.send.to-contact .l-short{display:inline}}
@media(min-width:721px){.quiz-controls .send{min-width:184px;justify-content:space-between}}

.imsg-link .tag-sticker{position:absolute;z-index:3}
/* Die Leiste „Projekt starten“ schwebt als Blase und verschwindet vor dem Abschluss mit eigenem Feld. */
.sticky-cta .btn{background:linear-gradient(180deg,var(--b-top),var(--b-mid) 50%,var(--b-bot));box-shadow:var(--gloss);filter:var(--float)}
@media(max-width:720px){.end{padding-bottom:var(--s7)}}

/* Mini-Telefone der Stilfrage: echte kleine Bildschirme statt abgeschnittener Wörter. Maße relativ zum Telefon (Container-Einheiten). */
.style-art{max-height:clamp(70px,15dvh,150px);min-height:58px}
.mini-phone{container-type:size;position:relative;display:block;height:100%;aspect-ratio:10/18;border-radius:16%/9%;border:0;background:#fff;overflow:hidden;transform:rotate(var(--tilt,0deg));box-shadow:0 0 0 2.5px #0b0d12,0 0 0 4.5px #fff,0 6px 10px -2px rgba(11,13,18,.28)}
.choice[aria-pressed=true] .mini-phone{box-shadow:0 0 0 2.5px #0b0d12,0 0 0 4.5px #fff,0 8px 14px -2px rgba(0,30,100,.4)}
.mini-bar{left:36%;right:36%;top:3.5%;height:4.5%;z-index:3}
.mini-phone>*{position:absolute}
.ms-nav{left:10%;right:10%;top:13%;display:flex;gap:6%;justify-content:flex-end}.ms-nav i{width:12%;height:1.4cqh;border-radius:2cqh;background:rgba(11,13,18,.18)}.ms-nav i:first-child{margin-right:auto;width:20%;background:rgba(11,13,18,.5)}
.ms-h{left:10%;right:10%;display:grid;gap:3cqh}.ms-h i{display:block;width:var(--w,100%);height:4.2cqh;border-radius:1cqh;background:#0b0d12}
.ms-lines{left:10%;right:10%;display:grid;gap:2.6cqh}.ms-lines i{display:block;width:var(--w,100%);height:1.6cqh;border-radius:1cqh;background:rgba(11,13,18,.16)}
.ms-btn{left:10%;width:42%;height:7cqh;border-radius:4cqh}
.style-calm .mini-phone{background:#f7f6f2}
.style-calm .ms-h{top:30%}.style-calm .ms-h i{height:2.6cqh;background:rgba(11,13,18,.62)}
.style-calm .ms-sun{right:12%;top:27%;width:18%;aspect-ratio:1;border-radius:50%;background:#e9e2d2}
.style-calm .ms-lines{top:52%}.style-calm .ms-btn{bottom:12%}.ms-outline{box-shadow:inset 0 0 0 .5cqh rgba(11,13,18,.55)}
.ms-photo{inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;transition:transform .6s var(--ease-out)}
.choice:hover .ms-photo{transform:scale(1.08)}
.ms-shade{inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.ms-light{top:auto;bottom:22%}.ms-light i{background:#fff}.style-photo .ms-btn{bottom:9%}.ms-white{background:#fff}
.style-type .mini-phone{background:var(--sun)}
.ms-aa{left:9%;top:12%;font:900 33cqh/.9 var(--display);letter-spacing:-.06em;color:#0b0d12}
.ms-mark{left:10%;width:62%;top:60%;height:4cqh;border-radius:2cqh;background:var(--marker);rotate:-3deg}
.style-type .ms-lines{top:72%}.ms-ink i{background:rgba(11,13,18,.55)}
.style-play .mini-phone{background:linear-gradient(180deg,#1a86ff,#0a5ed8)}
.ms-orb{border-radius:50%}.o1{left:12%;top:14%;width:34%;aspect-ratio:1;background:var(--lime)}.o2{right:10%;top:24%;width:22%;aspect-ratio:1;background:var(--sun)}.o3{left:44%;top:38%;width:14%;aspect-ratio:1;background:#ff8fc8}
.ms-cards{left:10%;right:10%;bottom:16%;display:flex;gap:6%}.ms-cards i{flex:1;height:16cqh;border-radius:2cqh;background:rgba(255,255,255,.9)}.ms-cards i:nth-child(2){translate:0 -3cqh}
.ms-scroll{right:8%;top:16%;bottom:44%;width:3%;border-radius:2cqh;background:rgba(255,255,255,.3)}.ms-scroll i{position:absolute;left:0;right:0;top:0;height:35%;border-radius:2cqh;background:#fff}
.style-game .mini-phone{background:var(--lime)}
.ms-st{width:42%;height:auto;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}.s1{left:4%;top:12%;rotate:-14deg}.s2{right:2%;top:36%;width:34%;rotate:10deg}
.ms-target{left:16%;bottom:24%;width:30%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.4cqh var(--red)}.ms-target i{position:absolute;inset:34%;border-radius:50%;background:var(--red)}
.ms-go{right:8%;bottom:8%;padding:1.5cqh 4cqh;border-radius:4cqh;background:#0b0d12;color:#fff;font:900 8cqh/1 var(--display);rotate:-6deg}
@media(prefers-reduced-motion:no-preference){
 .style-play .o1{animation:ms-float 3.2s ease-in-out infinite}.style-play .o2{animation:ms-float 2.6s ease-in-out -1s infinite reverse}.style-play .o3{animation:ms-float 2.2s ease-in-out -.5s infinite}
 .style-play .ms-scroll i{animation:ms-scroll 2.4s var(--ease-out) infinite}
 .choice:hover .style-game .ms-target{animation:hint-hop .7s var(--ease-out)}
}
@keyframes ms-float{50%{translate:0 -6cqh}}
@keyframes ms-scroll{0%{top:0}60%,100%{top:65%}}

/* Sticker-Band mit echten Projekt-Etiketten, läuft quer und reagiert auf Scrolltempo. */
.band{position:relative;overflow:hidden;padding:var(--s4) 0;margin:var(--s5) 0;rotate:-3deg;width:110vw;left:50%;translate:-50% 0}
.band-track{display:flex;gap:14px;width:max-content;will-change:transform}
.band-tag{position:relative!important;flex:none;rotate:var(--tilt);font-size:clamp(16px,4.4vw,22px)!important;padding:.3em .7em .36em!important}
.look-blue{background:var(--blue);color:#fff}
@media(min-width:1101px){.knock-chat{max-width:600px}.knock-chat .imsg{font-size:40px;line-height:1.18}.knock-chat .kp-avatar{width:40px;height:40px}.knock-chat .k-typing{left:48px}}
.ln-big .tapback{top:-22px;right:-14px;left:auto}

/* Ein Schwanz für alle Blasen (Korrektur 19.10.2026, Screenshots Emilio: sichtbare Naht und Kerbe am Schwanz).
   Der Schwanz liegt nur außerhalb der Blase (1 px Überlappung), die Ecke an der Schwanzseite ist fast eckig,
   und die Farbe entspricht exakt der Unterkante der Blase, deren Verlauf unten flach ausläuft. Kein Block mehr innen. */
:root{
 --tail3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 13 20'%3E%3Cpath d='M-1 2.5H0C0 10.5 3.6 16.7 12 19.6C7 20.9 2.6 20.5 -1 20Z'/%3E%3C/svg%3E");
 --gloss:inset 0 1.5px 0 rgba(255,255,255,.5);
 --gloss-grey:inset 0 1.5px 0 #fff;
 --blue-fill:linear-gradient(180deg,var(--b-top),var(--b-mid) 30%,var(--b-bot) 52%,var(--b-bot));
 --grey-fill:linear-gradient(180deg,var(--g-top),var(--g-bot) 52%,var(--g-bot))
}
.imsg.us,.ln-imsg.us,.ln-bubble,.ln-big,.choices:not(.compact-choices) .choice[aria-pressed=true],.gallery-cat[aria-pressed=true],.sticky-cta .btn{background:var(--blue-fill);--tc:var(--b-bot)}
.imsg.them,.ln-imsg.them,.gallery-cat:not([aria-pressed=true]){background:var(--grey-fill);--tc:var(--g-bot)}
.imsg-link{background:var(--grey-fill);--tc:var(--g-bot)}
.choices:not(.compact-choices) .choice:not([aria-pressed=true]){background:linear-gradient(180deg,#fff,#f3f4f7 52%,#f3f4f7);--tc:#f3f4f7}
.look-blue{--tc:var(--blue)}.look-yellow{--tc:var(--sun)}
.btn.primary{--tc:var(--blue)}.btn.tail-left{--tc:var(--white)}

/* Schwanzseite: rechts bei gesendet, links bei empfangen. --ts ist die Schwanzhöhe. */
.imsg.tail::after,.imsg-link.tail::after,.ln-imsg.tail::after,.ln-big::after,.ln-bubble::after,.look-blue::after,.look-yellow::after,.btn.primary::after,.btn.tail-left::after,.choices:not(.compact-choices) .choice::after{
 content:'';position:absolute;z-index:-1;bottom:0;top:auto;width:calc(var(--ts) * .65);height:var(--ts);background:var(--tc);transform:none;
 -webkit-mask:var(--tail3) no-repeat 0 0/100% 100%;mask:var(--tail3) no-repeat 0 0/100% 100%}
/* gesendet: rechts */
.imsg.us.tail::after,.imsg-link.us.tail::after,.ln-imsg.us.tail::after,.ln-big::after,.btn.primary::after,.choices:not(.compact-choices) .choice[aria-pressed=true]::after{left:auto;right:calc(var(--ts) * -.6)}
/* empfangen und Zeilen-Blasen der Überschrift: links, gespiegelt */
.imsg.them.tail::after,.imsg-link.them.tail::after,.ln-imsg.them.tail::after,.ln-bubble::after,.look-blue::after,.look-yellow::after,.btn.tail-left::after,.choices:not(.compact-choices) .choice:not([aria-pressed=true])::after{right:auto;left:calc(var(--ts) * -.6);transform:scaleX(-1)}
/* Fast eckige Ecke an der Schwanzseite, damit der Schwanz ohne Kerbe anschließt. */
.imsg.us.tail,.imsg-link.us.tail,.ln-imsg.us.tail,.ln-big,.btn.primary,.choices:not(.compact-choices) .choice[aria-pressed=true]{border-bottom-right-radius:calc(var(--ts) * .22)}
.imsg.them.tail,.imsg-link.them.tail,.ln-imsg.them.tail,.ln-bubble,.look-blue,.look-yellow,.btn.tail-left,.choices:not(.compact-choices) .choice:not([aria-pressed=true]){border-bottom-left-radius:calc(var(--ts) * .22)}
.choices:not(.compact-choices) .choice[aria-pressed=true]{border-bottom-left-radius:26px}.choices:not(.compact-choices) .choice:not([aria-pressed=true]){border-bottom-right-radius:26px}
/* Schwanzgrößen */
.imsg,.ln-imsg,.ln-big,.ln-bubble,.look-blue,.look-yellow{--ts:.95em}
.imsg-link{--ts:22px}.btn.primary,.btn.tail-left{--ts:20px}.choices:not(.compact-choices) .choice{--ts:24px}
.choices.chips .choice::after,.sticky-cta .btn::after,.msg-pill::after{display:none}
.choices.chips .choice{border-radius:22px!important}
/* Rand und Schatten als Filter, damit der Schwanz dieselbe Kontur und denselben Schatten bekommt (Screenshot „Beispiele ansehen“). */
:root{--edge:drop-shadow(1px 0 0 rgba(11,13,18,.12)) drop-shadow(-1px 0 0 rgba(11,13,18,.12)) drop-shadow(0 1px 0 rgba(11,13,18,.12)) drop-shadow(0 -1px 0 rgba(11,13,18,.12))}
.btn.primary,.btn.tail-left{box-shadow:none;filter:drop-shadow(var(--hard))}
.btn.tail-left{filter:var(--edge) drop-shadow(var(--hard))}
.btn.primary:hover,.btn.tail-left:hover{box-shadow:none;filter:drop-shadow(var(--hard-lg))}.btn.tail-left:hover{filter:var(--edge) drop-shadow(var(--hard-lg))}
.btn.primary:active,.btn.tail-left:active{box-shadow:none;filter:drop-shadow(var(--hard-press))}.btn.tail-left:active{filter:var(--edge) drop-shadow(var(--hard-press))}
.btn.primary,.btn.tail-left{transition:transform .12s var(--ease-out),filter .12s var(--ease-out),background-color .14s}
.sticky-cta .btn.primary{filter:drop-shadow(var(--hard-lg))}
.choices:not(.compact-choices) .choice:not([aria-pressed=true]){box-shadow:var(--gloss-grey);filter:drop-shadow(0 0 .6px rgba(11,13,18,.28)) var(--float-grey)}
.choices:not(.compact-choices) .choice:not([aria-pressed=true]):hover{box-shadow:var(--gloss-grey);filter:drop-shadow(0 0 .6px rgba(11,13,18,.28)) drop-shadow(0 12px 16px rgba(16,20,36,.14)) drop-shadow(0 2px 2px rgba(16,20,36,.12))}

/* Tür (Korrektur 19.10.2026): Klinke zeigt zum Scharnier, dahinter eine echte Handy-Startseite, durchschaltbar. */
.door-knob{right:3%;scale:-1 1}
.door-knob .cl-img{filter:drop-shadow(-2px 3px 0 rgba(11,13,18,.25))}
.door-behind{background:#fff}
.door-sites{position:absolute;inset:0;display:block}
.door-site{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transform:translateY(6%) scale(1.03);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.door-site.is-on{opacity:1;transform:none}
.door-island{position:absolute;left:50%;top:7px;width:30%;height:12px;translate:-50% 0;border-radius:999px;background:#0b0d12;z-index:1}
.door-col{display:grid;justify-items:center;gap:var(--s5)}
.door-switch{position:relative;z-index:2;display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.door-name{font:700 15px/1.2 var(--text);color:var(--muted)}
.door-next{min-height:44px;padding:10px 18px}
@media(prefers-reduced-motion:reduce){.door-site{transition:none}}

/* Neu dabei: die neuesten Seiten als Handys oben in den Beispielen. Auf Phones seitlich wischbar, ab Desktop eine Reihe. */
.new-sites{margin:var(--s5) 0 var(--s6)}
.new-sites-chat .imsg{font:700 19px/24px var(--text)}
.new-row{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s3) var(--s3) var(--s4);margin:0 calc(var(--s3) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.new-row::-webkit-scrollbar{display:none}
.new-phone{flex:0 0 auto;width:168px;scroll-snap-align:center;display:grid;gap:4px;color:var(--ink);text-decoration:none;transform:rotate(var(--tilt));transition:transform .2s var(--ease-out)}
.new-phone:hover{transform:rotate(0) translateY(-6px)}
.new-phone:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:28px}
.np-body{position:relative;display:block;aspect-ratio:9/18.5;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 0 0 5px #0b0d12,0 0 0 7px #fff;filter:drop-shadow(4px 7px 0 rgba(11,13,18,.2));margin:7px 7px 10px}
.np-body img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position 2.4s var(--ease-out)}
.new-phone:hover .np-body img{object-position:50% 100%}
.np-island{position:absolute;left:50%;top:7px;width:34%;height:14px;translate:-50% 0;border-radius:999px;background:#0b0d12;z-index:1}
.np-name{font:800 16px/1.2 var(--display);margin-top:6px;padding:0 7px}
.new-phone small{font:500 13px/1.3 var(--text);color:var(--muted);padding:0 7px}
@media(min-width:1101px){.new-row{gap:var(--s5);justify-content:space-between;overflow:visible;margin:0;padding:var(--s3) 0 var(--s4)}.new-phone{width:auto;flex:1 1 0;max-width:180px}}
@media(prefers-reduced-motion:reduce){.new-phone,.np-body img{transition:none}.new-phone:hover .np-body img{object-position:50% 0}}
/* Schwanz neu aufgebaut (Emilio: „Bitte einfach jede Text sprachblase korrekt neu aufbauen“): 40 % der Form liegen innen
   auf der Blase und decken die abgerundete Ecke vollständig, der Rest schwingt hinaus. Unterkante bündig, keine Kerbe, keine Naht. */
:root{--tail3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0H8C8 9 11.5 15.8 20 19.6V20H0Z'/%3E%3C/svg%3E")}
.imsg.tail::after,.imsg-link.tail::after,.ln-imsg.tail::after,.ln-big::after,.ln-bubble::after,.look-blue::after,.look-yellow::after,.btn.primary::after,.btn.tail-left::after,.choices:not(.compact-choices) .choice::after{width:var(--ts)}
.door-behind{isolation:isolate}
.contact-solo{max-width:640px;margin-inline:auto;justify-items:stretch}
@media(min-width:1001px){.contact-solo{grid-template-columns:minmax(0,1fr)}}
.contact-summary{justify-self:center}

/* ===== Chatblasen 1:1 nach Referenz und iMessage (Neuaufbau 19.10.2026) =====
   Emilio: „Baue bitte die Chatblasen 1:1 so nach wie eine Referenz und dann jede einzelne Chatblase soll bitte überarbeitet werden.“
   Gemessen an chat-1-hero („yours“) und chat-2-blasen: flaches iMessage-Blau ohne Verlauf, ohne Glanz, ohne weiße Kante,
   nur ein weicher, heller Schein. Pillenform (Radius = halbe Höhe einer Zeile), alle Ecken rund. Der Schwanz wächst aus der
   runden unteren Ecke: Außenkante fällt fast senkrecht und schwingt zur Spitze, Unterkante steigt flach zurück in die Rundung.
   Geometrie relativ zum Eckradius --r (Box .6r × .72r, .1r außerhalb der Kante). Ohne Spiegelung zeigt der Schwanz nach links. */
:root{
 --im-blue:#0a7cff;--im-grey:#e9e9eb;--im-ink:#0b0d12;
 --im-halo:drop-shadow(0 8px 18px rgba(10,86,210,.16)) drop-shadow(0 1px 2px rgba(10,60,160,.14));
 --im-halo-grey:drop-shadow(0 8px 18px rgba(20,26,44,.1)) drop-shadow(0 1px 2px rgba(20,26,44,.1));
 --im-halo-up:drop-shadow(0 14px 24px rgba(10,86,210,.2)) drop-shadow(0 2px 3px rgba(10,60,160,.14));
 --tail5:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 72'%3E%3Cpath d='M15.3 4C15 30 11 48 3 58C20 60 40 57 57 53L60 20L40 0Z'/%3E%3C/svg%3E")
}
/* Flächen */
#app .imsg.imsg.us,#app .ln-imsg.ln-imsg.us,#app .ln-bubble.ln-bubble,#app .ln-big.ln-big,#app .say-e.say-e,#app .btn.btn.primary,#app .choices:not(.compact-choices) .choice.choice[aria-pressed=true],#app .gallery-cat.gallery-cat[aria-pressed=true]{background:var(--im-blue);color:#fff;--tc:var(--im-blue);box-shadow:none;filter:var(--im-halo)}
#app .imsg.imsg.them,#app .ln-imsg.ln-imsg.them,#app .imsg-link.imsg-link,#app .gallery-cat.gallery-cat:not([aria-pressed=true]){background:var(--im-grey);color:var(--im-ink);--tc:var(--im-grey);box-shadow:none;filter:var(--im-halo-grey)}
#app .btn.btn.tail-left,#app .choices:not(.compact-choices) .choice.choice:not([aria-pressed=true]){background:#fff;color:var(--im-ink);--tc:#fff;box-shadow:none;filter:var(--im-halo-grey)}
#app .look-blue{--tc:var(--blue)}#app .look-yellow{--tc:var(--sun)}
/* Echte Nachrichten: Text wie iMessage, Maße in em, damit Radius und Schwanz bei jeder Größe passen. */
#app .imsg.imsg{font-weight:400;line-height:1.29;padding:.4em .72em .45em;--r:1.07em;border-radius:var(--r);isolation:isolate}
#app .imsg.typing{padding:.62em .8em}
#app .imsg-link.imsg-link{--r:20px;border-radius:var(--r);isolation:isolate}
#app .say-e.say-e{font-weight:500}
/* Überschriften-Blasen: Pille, flach, ohne Stanzkante */
#app .ln-bubble.ln-bubble{--r:.63em;border-radius:var(--r);isolation:isolate}
#app .ln-imsg.ln-imsg{--r:.64em;border-radius:var(--r);isolation:isolate}
#app .ln-big.ln-big{--r:.72em;border-radius:var(--r);isolation:isolate}
#app .look-blue,#app .look-yellow{--r:.66em;border-radius:var(--r);isolation:isolate}
/* Knöpfe und Antwortkarten als Blasen */
#app .btn.btn.primary,#app .btn.btn.tail-left{--r:26px;border-radius:var(--r);isolation:isolate;transition:transform .16s var(--ease-out),filter .16s var(--ease-out)}
#app .btn.btn.big.primary,#app .btn.btn.big.tail-left{--r:30px}
#app .btn.btn.primary:hover{filter:var(--im-halo-up)}#app .btn.btn.tail-left:hover{filter:drop-shadow(0 14px 24px rgba(20,26,44,.14)) drop-shadow(0 2px 3px rgba(20,26,44,.1))}
#app .btn.btn.primary:active,#app .btn.btn.tail-left:active{transform:scale(.97)}
#app .btn.btn.primary:disabled{background:#9cc6ff;--tc:#9cc6ff}
#app .choices:not(.compact-choices) .choice.choice{--r:26px;border-radius:var(--r);isolation:isolate}
#app .choices:not(.compact-choices) .choice.choice:hover{filter:drop-shadow(0 14px 24px rgba(20,26,44,.14)) drop-shadow(0 2px 3px rgba(20,26,44,.1))}
#app .choices:not(.compact-choices) .choice.choice[aria-pressed=true]:hover{filter:var(--im-halo-up)}
#app .choices.chips .choice.choice{border-radius:22px}
/* Ein Schwanz für alle */
#app .imsg.tail::after,#app .imsg-link.tail::after,#app .ln-imsg.tail::after,#app .ln-big::after,#app .ln-bubble::after,#app .look-blue::after,#app .look-yellow::after,#app .btn.primary::after,#app .btn.tail-left::after,#app .choices:not(.compact-choices) .choice::after{
 content:'';position:absolute;z-index:-1;top:auto;bottom:0;right:auto;left:calc(var(--r) * -.1);width:calc(var(--r) * .6);height:calc(var(--r) * .72);
 background:var(--tc);transform:none;-webkit-mask:var(--tail5) no-repeat 0 0/100% 100%;mask:var(--tail5) no-repeat 0 0/100% 100%;display:block}
/* gesendet: Schwanz rechts (gespiegelt) */
#app .imsg.us.tail::after,#app .imsg-link.us.tail::after,#app .ln-imsg.us.tail::after,#app .ln-big::after,#app .btn.primary::after,#app .choices:not(.compact-choices) .choice[aria-pressed=true]::after{left:auto;right:calc(var(--r) * -.1);transform:scaleX(-1)}
/* alle Ecken rund lassen: der Schwanz sitzt an der Rundung */
#app .imsg.tail,#app .imsg-link.tail,#app .ln-imsg.tail,#app .ln-big,#app .ln-bubble,#app .look-blue,#app .look-yellow,#app .btn.primary,#app .btn.tail-left,#app .choices:not(.compact-choices) .choice{border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
#app .choices.chips .choice::after,#app .sticky-cta .btn::after,#app .msg-pill::after{display:none}
#app .sticky-cta .btn.btn.primary{filter:var(--im-halo-up)}
@media(prefers-reduced-motion:reduce){#app .btn.btn.primary,#app .btn.btn.tail-left,#app .choices:not(.compact-choices) .choice.choice{transition:none}}

/* Collage am Rand: Objekte bleiben ganz im Bild statt am Bildschirmrand angeschnitten zu werden, Schatten weich statt treppig
   (Emilio: „an den Seiten sowas abgehakt … Schatten, der so abgehakt ist … dass das alles smoother ist“). Gras und Wolken dürfen weiter überlaufen. */
.cl:not([data-kind=grass]):not([data-kind=cloud]){left:clamp(calc(var(--w) * var(--cl-scale) * .62px + 6px),calc(var(--x) * 1%),calc(100% - var(--w) * var(--cl-scale) * .62px - 6px))}
.cl-img{filter:drop-shadow(3px 7px 4px rgba(11,13,18,.13))}
#app .ln-bubble::before{display:none}

/* Prüfbefunde unabhängiger Prüfungen 19.10.2026 */
/* Bedienleiste liegt über der hinausgleitenden alten Frage */
.quiz-controls{z-index:7}.leaving{z-index:4}
/* Quiz-Collage darf am Rand anschneiden wie bisher (sonst rückt sie unter die Antwortblase) */
.quiz-collage .cl{left:calc(var(--x) * 1%)!important}
/* Kopf, Frage und Fußzeile über der Collage */
.footer{position:relative;z-index:3;flex-wrap:wrap}
.quiz-top{z-index:10}.question-head{z-index:3}
.end-collage,.hero-collage{z-index:0}
/* Heldenzeilen berühren sich, überdecken aber keinen Text */
.hero-title .ln{margin:.035em 0}
/* „HA HA“ verdeckt nicht mehr „Zugestellt“ */
.knock-chat .k3{margin-top:14px}
/* Strahlen der letzten Zeigt-Blase bleiben im Bild */
@media(max-width:720px){.say-rays{right:-.15em}}
/* 320 px: Funktionen ohne Silbentrennung, Bild weicht dem Text */
@media(max-width:350px){.choices.chips .choice .choice-art{display:none}.choices.chips .choice{padding-left:12px}.choices.chips .choice-label{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;font-size:13.5px}}
/* Neu dabei: drittes Handy blitzt an, gleicher Rand wie überall */
@media(max-width:1100px){.new-row{padding-inline:16px;margin-inline:-16px;scroll-padding-inline:16px}.new-phone{width:148px}}
@media(min-width:721px) and (max-width:1100px){.new-row{overflow-x:auto}}

/* Schwanz Fassung 2 (Prüfung: zu klein, Knick an der Außenkante): ragt rund 10 % der Höhe hinaus, beginnt tangential auf der Rundung
   und schwingt in einem Zug zur Spitze; Unterkante steigt zurück in die Ecke wie bei iMessage. Box .8 × .9 des Schwanzradius --tr. */
:root{--tail6:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 90'%3E%3Cpath d='M26.1 5C30.6 34.7 16 74 5 84C24 87 52 86 77.5 78L80 40L50 0Z'/%3E%3C/svg%3E");
 --im-halo:drop-shadow(0 4px 14px rgba(10,86,210,.15)) drop-shadow(0 1px 1.5px rgba(10,60,160,.14));
 --im-halo-grey:drop-shadow(0 4px 14px rgba(20,26,44,.09)) drop-shadow(0 1px 1.5px rgba(20,26,44,.16));
 --im-halo-up:drop-shadow(0 10px 22px rgba(10,86,210,.2)) drop-shadow(0 2px 3px rgba(10,60,160,.14))}
#app .imsg.tail::after,#app .imsg-link.tail::after,#app .ln-imsg.tail::after,#app .ln-big::after,#app .ln-bubble::after,#app .look-blue::after,#app .look-yellow::after,#app .btn.primary::after,#app .btn.tail-left::after,#app .choices:not(.compact-choices) .choice::after{
 --t:var(--tr,var(--r));left:calc(var(--t) * -.25);width:calc(var(--t) * .8);height:calc(var(--t) * .9);-webkit-mask:var(--tail6) no-repeat 0 0/100% 100%;mask:var(--tail6) no-repeat 0 0/100% 100%}
#app .imsg.us.tail::after,#app .imsg-link.us.tail::after,#app .ln-imsg.us.tail::after,#app .ln-big::after,#app .btn.primary::after,#app .choices:not(.compact-choices) .choice[aria-pressed=true]::after{left:auto;right:calc(var(--t) * -.25)}
/* Linkvorschau: Ecke 20 px, Schwanz in Blasengröße */
#app .imsg-link{--tr:36px}
/* Antwortkarten: kleinerer Schwanz, damit er die Nachbarkarte nicht berührt */
#app .choices:not(.compact-choices) .choice{--tr:22px}
/* Etiketten als Pillen */
#app .tag-sticker.look-blue,#app .tag-sticker.look-yellow,#app .band-tag.look-blue,#app .band-tag.look-yellow{--r:1.3em}
/* Überschriften-Blasen leichter, näher an „yours“ */
#app .ln-bubble,#app .ln-imsg,#app .ln-big{font-weight:700}
#app .ln-big{text-wrap:balance}
/* Herz am großen Fragebubble links, nicht über der vorigen Antwort */
#app .ln-big .tapback{left:-14px;right:auto}
#app .occasion{box-shadow:none;filter:var(--im-halo-grey)}#app .occasion:hover{box-shadow:none;filter:drop-shadow(0 10px 20px rgba(20,26,44,.14)) drop-shadow(0 2px 3px rgba(20,26,44,.12))}
/* Prüfrunde 2 */
@media(max-width:365px){.choices.chips .choice .choice-art{display:none}.choices.chips .choice{padding-left:12px}.choices.chips .choice-label{font-size:12.5px;hyphens:manual;-webkit-hyphens:manual}}
#app .ln-big .tapback{display:none}
@media(min-width:721px) and (max-width:1100px){.new-row{margin-inline:-32px;padding-inline:32px;scroll-padding-inline:32px}}
@media(max-width:360px){.new-phone{width:126px}}
@media(max-width:340px){.gallery-page .page-head h1{font-size:32px}}
.drawer{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px);mask-image:linear-gradient(90deg,transparent,#000 22px)}
/* Prüfrunde 2, Blasen: Schwanz beginnt knapp innerhalb der Rundung, damit keine doppelte Kantenglättung als Knick sichtbar wird */
:root{--tail6:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 90'%3E%3Cpath d='M31 3C33.5 34 16.5 73.5 5 84C24 87 52 86 77.5 78L80 40L52 0Z'/%3E%3C/svg%3E")}
#app .imsg-link{--tr:46px}#app .choices:not(.compact-choices) .choice{--tr:26px}
.gallery-msg .tapback{top:auto;bottom:-12px}
.tag-sticker{padding:.32em .75em .38em}
@media(min-width:1101px){.knock-chat .k3{margin-top:24px}.say-rays{right:-1.1em}}
/* Bedienelemente im Chat-Look: weicher Schein statt harter Versatzschatten */
#app .msg-pill,#app .round,#app .motion-toggle,#app .contact-card,#app dialog,#app .btn:not(.primary):not(.tail-left){box-shadow:none;filter:var(--im-halo-grey)}
#app .contact-card{box-shadow:inset 0 0 0 1px rgba(11,13,18,.05)}
/* Prüfrunde 2, Bewegung */
@media(max-width:720px){.say-rays{right:-.1em;bottom:auto;top:-.95em}}
.knock-door .door-mat{display:none}
.door-leaf{backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media(min-width:1101px){.knock{padding-bottom:0}.say{padding-top:var(--s5)}.say-echo{height:230px}.say-stage{padding-bottom:var(--s4)}}
/* Prüfrunde 3 */
@media(min-width:1101px){.cl.mob{display:none}.prop-bin{left:0}}
@media(max-width:365px){.choices.chips .choice{padding-right:28px}.choices.chips .choice-label{font-size:12px;letter-spacing:-.01em}}
@media(max-width:340px){.gallery-cat{padding:8px 11px;font-size:13.5px;gap:6px}}
@media(max-width:360px){.new-phone{width:116px}}
.np-body{aspect-ratio:400/769}
.gallery-msg .tag-sticker{translate:0 -38%}

/* Schwanz: Fassung 2 aus Prüfrunde 2 bleibt (Emilio 20.10.2026: „Ich fand es so eigentlich am besten.“) */
/* Weiter-Taste im Blasenblau mit weichem Schein */
#app .send{background:var(--im-blue);box-shadow:none;filter:var(--im-halo)}
#app .send:disabled{background:var(--grey);filter:none}
/* Handy-Mockups weich statt Schattenplatte */
.np-body{filter:drop-shadow(0 8px 16px rgba(11,13,18,.16)) drop-shadow(0 1px 2px rgba(11,13,18,.12))}
@media(min-width:1101px){.quiz-collage .cl:nth-child(5){display:none}}
/* Prüfrunde 4 */
/* Fragebubble steht links: Schwanz links wie bei „Website?“ */
#app .ln-big::after{right:auto;left:calc(var(--t) * -.25);transform:none}
/* Antwortkarte behält den Schwanz links, wird nur blau: kein Seitenwechsel, keine Berührung mit der Nachbarkarte */
#app .choices:not(.compact-choices) .choice[aria-pressed=true]::after{right:auto;left:calc(var(--t) * -.25);transform:none}
/* Ein Blau für alle Blasen */
:root{--imsg-blue:#0a7cff}
#app .look-blue,#app .compact-choices .choice[aria-pressed=true]{background:var(--im-blue)}#app .look-blue{--tc:var(--im-blue)}
/* „Eure neue Website.“ auf Desktop in einer Zeile */
@media(min-width:1101px){.k3-wrap{max-width:min(92%,560px)}}
/* Steuerleiste schmal: Status ohne Abschneiden */
@media(max-width:420px){.quiz-controls .msg-pill{gap:6px}.quiz-controls .drawer{max-width:54px}.selection-status{font-size:13px;letter-spacing:-.01em}}
/* 320 px: Platz für das Plus-Zeichen */
@media(max-width:340px){.choices.chips .choice{padding-right:34px}.choices.chips .choice-check{right:6px;width:22px;height:22px}}
/* Niedriger Desktop: Collage weicht der Steuerleiste */
@media(min-width:1101px) and (max-height:800px){.quiz-collage .cl:nth-child(3),.quiz-collage .cl:nth-child(4){display:none}.quiz-collage .cl:nth-child(2){--w:160!important;--x:5!important}}
/* Ruhiger und geordneter (Emilio, 20.10.2026: „vom Overall Look so ein bisschen ruhiger und geordneter“) */
.knock-chat .k1 .imsg{--rt:-1.5deg}.knock-chat .k2{--rt:1.2deg}.knock-chat .k3 .imsg{--rt:-1deg}
.say-chat .say-b:nth-child(1){--rt:-1.5deg}.say-chat .say-b:nth-child(2){--rt:1deg}.say-chat .say-b:nth-child(3){--rt:-.8deg}.say-chat .say-b:nth-child(4){--rt:1.5deg}.say-chat .say-b:nth-child(5){--rt:-1.2deg}.say-chat .say-last{--rt:-2deg}
.teaser-chat>.imsg:first-child{--rt:-1deg}.teaser-chat>.imsg.us{--rt:1.5deg}
#app .choices:not(.compact-choices) .choice{--tilt:0deg}
.drawer-track>.drawer-sticker:nth-child(odd){rotate:-4deg}.drawer-track>.drawer-sticker:nth-child(even){rotate:3deg}
@media(min-width:1101px){.quiz-collage .cl:nth-child(3),.quiz-collage .cl:nth-child(4){display:none}}
/* Hero-Blase „die keiner vergisst.“: auf Phones in einer Zeile, Proportionen wie eine iMessage-Blase
   (Emilio, 20.10.2026: „auf Mobile in eine Zeile … Schriftgröße etwas kleiner, aber dafür auch dann die Sprechblase deutlich schöner“) */
#app .hero-title .ln-bubble{white-space:nowrap;line-height:1.12;padding:.3em .7em .4em;--r:.92em;margin-top:.12em}
#app .hero-title .ln-bubble .ln-under{bottom:.08em;height:.26em;opacity:.85}
@media(max-width:720px){#app .hero-title .ln-bubble{font-size:.8em}}
@media(min-width:721px){#app .hero-title .ln-bubble{padding:.16em .6em .26em;--r:.74em;font-size:.92em}}
@media(max-width:420px){#app .selection-status{white-space:normal;line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;hyphens:auto}}
/* Prüfrunde 5 */
/* Andere Seite: neue Seite blendet über der alten ein, die alte verschwindet erst danach (keine Doppelbelichtung) */
.door-site{z-index:0;transition:opacity 0s linear .6s,transform 0s linear .6s}
.door-site.is-on{z-index:1;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
@media(prefers-reduced-motion:reduce){.door-site,.door-site.is-on{transition:none}}
/* 320 px: größte „Zeigt“-Blase bleibt im Bild */
@media(max-width:350px){.say-e{left:calc(var(--i) * 9.5%)}}
/* Hero-Blase: Abstand zum Schatten der Zeile darüber, Strich nicht am Rand */
#app .hero-title .ln-bubble{margin-top:.22em}
#app .hero-title .ln-bubble .ln-under{bottom:.16em}
@media(max-width:720px){#app .hero-title .ln-bubble{padding-bottom:.46em}}
.teaser-chat>.imsg{text-wrap:balance}
/* Startseite ohne Collage-Objekte (Emilio, 20.10.2026): kein Polster mehr für sie */
.hero{padding-bottom:var(--s7)}
.hero-claim{padding-top:0}
@media(min-width:1101px){.hero{padding:var(--s6) 0 var(--s7)}}
/* Projektansicht auf unserer Seite (21.10.2026): Linkvorschau und Handys sind Buttons, keine Links. */
button.imsg-link{text-align:left;cursor:pointer;font:inherit}
button.imsg-link .imsg-link-meta{display:grid}
.gallery-msg .imsg-link-meta b{font-size:17px;line-height:22px}
button.new-phone{text-align:left;cursor:pointer;font:inherit}
button.new-phone:focus-visible,button.imsg-link:focus-visible{outline:3px solid var(--select);outline-offset:4px}
#app dialog.site-view,dialog.site-view{display:flex;flex-direction:column;width:min(1280px,calc(100% - 48px));max-width:none;height:min(860px,calc(100dvh - 48px));max-height:none;padding:0;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(20,26,44,.28),0 2px 6px rgba(20,26,44,.12)}
.site-view .site-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:56px;padding:6px 10px 6px 18px;background:#f1f1f3;border-bottom:1px solid rgba(11,13,18,.08)}
.site-view .browser-dots{display:flex;gap:7px}
.site-view .browser-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.site-view .browser-dots i:nth-child(2){background:#febc2e}.site-view .browser-dots i:nth-child(3){background:#28c840}
.site-view .site-name{display:grid;justify-items:center;gap:1px;min-width:0;padding:5px 16px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,13,18,.06);text-align:center}
.site-view .site-name h2{margin:0;font:800 15px/1.2 var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.site-view .site-name small{font:500 12px/1.3 var(--text);color:var(--muted);white-space:nowrap}
.site-view .site-close{justify-self:end;width:40px;height:40px;box-shadow:inset 0 0 0 1.5px rgba(11,13,18,.08)}
.site-view .site-body{position:relative;flex:1 1 auto;min-height:0;background:#fff}
.site-view .site-frame{display:block;width:100%;height:100%;border:0}
.site-view .site-loading{position:absolute;left:50%;top:40%;translate:-50% -50%;pointer-events:none}
.site-view .site-shots{height:100%;overflow:auto;overscroll-behavior:contain}
.site-view .site-shots img{display:block;width:100%;height:auto}
@media(max-width:720px){
 #app dialog.site-view,dialog.site-view{width:100%;height:100dvh;margin:0;border-radius:0}
 .site-view .site-bar{grid-template-columns:1fr auto;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px 12px}
 .site-view .browser-dots{display:none}
 .site-view .site-name{justify-items:start;text-align:left;background:none;box-shadow:none;padding:0}
}