/* Eigene kleine Szenen statt gleichförmiger Kippbewegungen. */
.mood-controls { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:8px; }
.mood-controls > p { margin:0; }
.motion-switch { display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer;font-size:.7rem;color:var(--primary); }
.motion-switch input { position:absolute;opacity:0;width:1px;height:1px; }
.switch-track { display:block;width:44px;height:26px;border:1px solid var(--border);border-radius:20px;background:var(--surface-soft);padding:3px;transition:background 200ms; }
.switch-track > span { display:block;width:18px;height:18px;border-radius:50%;background:var(--muted);box-shadow:0 2px 4px #0002;transition:translate 250ms cubic-bezier(.2,1.3,.4,1),background 200ms; }
.motion-switch input:checked + .switch-track { background:var(--primary);border-color:var(--primary); }
.motion-switch input:checked + .switch-track > span { translate:18px 0;background:var(--surface); }
.motion-switch input:focus-visible + .switch-track { outline:3px solid var(--primary);outline-offset:4px; }
.preference-status { min-height:1.6em;margin:6px 0 16px; }
.preference-status.is-error { color:var(--danger); }
.preference-retry { margin-bottom:16px; }
/* Der Knopf entfällt; der Platz oberhalb der Seiten wird wieder dem Inhalt gegeben. */
@media(max-width:760px) { .app-body .main-content,.learning-page .main-content { padding-top:30px; }.auth-body .auth-main { padding-top:15px; } }

/* Ein geerdeter Garten: der Topf liegt im unteren Drittel, die Blüte hat Luft. */
.plant-scene { color:var(--primary);pointer-events:none; }
.welcome-panel > .plant-scene { position:absolute;width:clamp(250px,26%,350px);height:100%;right:3.5%;top:0;display:flex;align-items:center;padding-top:28px; }
.welcome-panel > .plant-scene .plant-art { position:static;inset:auto;width:100%;height:auto;opacity:1; }
.auth-story .plant-scene { position:relative;width:80%;max-width:330px;margin:20px auto 0; }
.auth-story .plant-scene .plant-art { position:static;width:100%;height:auto;opacity:1; }
.motion-ready .plant-scene .plant-art { transform:none;filter:drop-shadow(0 16px 14px color-mix(in srgb,var(--primary) 12%,transparent)); }
.flower-petal { transform-box:fill-box;transform-origin:center bottom; }
.plant-bee,.plant-dew { opacity:0; }
.motion-ready .plant-scene.is-growing .plant-leaf { animation:leaf-unfurl 1100ms cubic-bezier(.2,.8,.3,1.18) both;animation-delay:calc(180ms + var(--leaf-order) * 130ms); }
.motion-ready .is-growing .plant-stem,.motion-ready .is-growing .flower-stem { stroke-dasharray:1;animation:stem-grow 1600ms ease-out both; }
.motion-ready .is-growing .flower-stem { animation-delay:600ms; }
.motion-ready .is-growing .flower-crown { animation:flower-open 1700ms cubic-bezier(.2,.7,.25,1.2) 1100ms both;transform-box:fill-box;transform-origin:50% 50%; }
.motion-ready .is-growing .flower-petal { animation:petal-open 1200ms cubic-bezier(.22,.6,.3,1.2) 1300ms both; }
.motion-ready .is-growing .petal-2 { animation-delay:1400ms; }.motion-ready .is-growing .petal-3 { animation-delay:1500ms; }.motion-ready .is-growing .petal-4 { animation-delay:1600ms; }.motion-ready .is-growing .petal-5 { animation-delay:1700ms; }.motion-ready .is-growing .petal-6 { animation-delay:1800ms; }
.motion-ready :is(.is-growing,.is-pollinating) .plant-bee { animation:bee-visit 6s ease-in-out both;transform-origin:264px 67px; }
.motion-ready :is(.is-growing,.is-pollinating) .bee-wings { animation:wing-buzz 100ms linear infinite alternate;transform-origin:0 -3px; }
.motion-ready .is-watered .plant-dew { animation:dew-fall 2s ease-in 2; }
.motion-ready .is-pollinating .flower-crown { animation:flower-nod 1.4s ease-in-out 2;transform-origin:236px 77px; }
@keyframes leaf-unfurl { 0% { transform:scale(0) rotate(-45deg); } 70% { transform:scale(1.08) rotate(5deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes stem-grow { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes flower-open { from { opacity:0;scale:.05;rotate:-65deg; } to { opacity:1;scale:1;rotate:0deg; } }
@keyframes petal-open { from { scale:.25 .05; } to { scale:1 1; } }
@keyframes bee-visit { 0% { opacity:0;translate:85px -30px;rotate:-20deg; } 15% { opacity:1;translate:20px -12px; } 40%,65% { opacity:1;translate:-22px 3px;rotate:8deg; } 80% { opacity:1;translate:26px -25px;rotate:-12deg; } 100% { opacity:0;translate:100px -65px; } }
@keyframes wing-buzz { to { scale:1 .25; } }
@keyframes dew-fall { 0% { opacity:0;translate:0 -20px; } 20% { opacity:.7; } 80% { opacity:.7; } 100% { opacity:0;translate:0 80px; } }
@keyframes flower-nod { 50% { rotate:8deg; } }

/* Der kleine Mitbewohner läuft wirklich auf der Trennlinie. */
.page-footer { position:relative;margin-top:82px; }
.companion-runway { position:absolute;left:0;right:0;bottom:100%;height:65px;color:var(--primary);pointer-events:none;overflow:hidden;contain:layout paint; }
.companion-traveller { position:absolute;left:0;bottom:-1px;width:86px;height:59px;will-change:transform; }
.companion-cat { display:block;width:100%;height:100%;overflow:visible; }
.cat-head { transform-origin:74px 36px; }
.cat-tail { transform-origin:31px 40px; }
.cat-legs-back,.cat-legs-front { transform-origin:52px 44px; }
.cat-wave,.cat-snores { opacity:0; }
.cat-wave { transform-origin:64px 48px; }
.companion-toy { position:absolute;left:0;bottom:0;width:32px;height:32px;opacity:0; }
.toy-yarn,.toy-butterfly { display:none; }
.companion-spark { position:absolute;bottom:37px;left:50%;font-size:15px;opacity:0;color:var(--primary); }
.companion-spark.spark-two { left:70%;bottom:18px; }
.motion-ready .companion-runway[data-vignette] .cat-tail { animation:cat-tail 3s ease-in-out infinite; }
.motion-ready .companion-runway[data-vignette] .cat-eyes { animation:cat-blink 5.5s linear infinite;transform-origin:74px 31px; }
.motion-ready .companion-runway:is([data-vignette="stroll"],[data-vignette="butterfly"],[data-vignette="yarn"],[data-vignette="firefly"]) .cat-legs-front { animation:cat-step 480ms ease-in-out infinite alternate; }
.motion-ready .companion-runway:is([data-vignette="stroll"],[data-vignette="butterfly"],[data-vignette="yarn"],[data-vignette="firefly"]) .cat-legs-back { animation:cat-step 480ms ease-in-out -480ms infinite alternate-reverse; }
.motion-ready .companion-runway:is([data-vignette="stroll"],[data-vignette="butterfly"],[data-vignette="yarn"],[data-vignette="firefly"]) .cat-head { animation:cat-head-bob 960ms ease-in-out infinite; }
.motion-ready .companion-runway[data-vignette="stretch"] .cat-pose { animation:cat-stretch 4s ease-in-out infinite;transform-origin:50px 62px; }
.motion-ready .companion-runway[data-vignette="pounce"] .cat-legs-front { animation:cat-paw 1100ms ease-in-out 2; }
.motion-ready .companion-runway[data-vignette="nap"] .cat-pose { transform:translateY(13px) scaleY(.78);transform-origin:50px 62px; }
.motion-ready .companion-runway[data-vignette="nap"] .cat-eyes { transform:scaleY(.15);animation:none; }
.motion-ready .companion-runway[data-vignette="nap"] .cat-snores { animation:cat-snore 3s ease-out infinite; }
.motion-ready .companion-runway[data-vignette="greet"] .cat-wave,.motion-ready.scene-farewell .cat-wave { opacity:1;animation:cat-wave 550ms ease-in-out 6 alternate; }
.motion-ready .companion-runway[data-vignette="greet"] .cat-legs-front { opacity:0; }
.motion-ready .companion-runway:is([data-vignette="yarn"],[data-vignette="butterfly"],[data-vignette="pounce"],[data-vignette="firefly"]) .companion-toy { opacity:1; }
.companion-runway:is([data-vignette="yarn"],[data-vignette="pounce"]) .toy-yarn,.companion-runway:is([data-vignette="butterfly"],[data-vignette="firefly"]) .toy-butterfly { display:block; }
.motion-ready .companion-runway:is([data-vignette="butterfly"],[data-vignette="firefly"]) .toy-butterfly { animation:butterfly-wing 350ms ease-in-out infinite alternate;transform-origin:20px 20px; }
.motion-ready .companion-runway[data-vignette="firefly"] .companion-spark { animation:firefly 3s ease-in-out infinite alternate; }
.motion-ready .companion-runway[data-vignette="firefly"] .spark-two { animation-delay:1.5s; }
.auth-runway { position:relative;width:min(960px,100%);margin:82px auto 8px;border-bottom:1px solid var(--border); }
.study-companion { position:relative;height:48px; }
.study-companion .companion-runway { bottom:0; }
.motion-ready.scene-secret .auth-runway .cat-head { transform:rotate(-18deg); }
.motion-ready.scene-secret .auth-runway .cat-eyes { transform:scaleY(.1);animation:none!important; }
.motion-ready.scene-secret .auth-runway .cat-wave { opacity:1;transform:translate(8px,-9px) rotate(-50deg);animation:none; }
.motion-ready.scene-working .cat-tail { animation:cat-tail 300ms ease-in-out infinite!important; }
@keyframes cat-step { from { transform:skewX(-13deg); } to { transform:skewX(13deg); } }
@keyframes cat-head-bob { 50% { translate:0 -1.5px; } }
@keyframes cat-tail { 50% { rotate:18deg; } }
@keyframes cat-blink { 0%,44%,48%,100% { scale:1 1; } 46% { scale:1 .08; } }
@keyframes cat-stretch { 0%,100% { scale:1; } 40%,65% { scale:1.13 .7; } }
@keyframes cat-paw { 40%,70% { rotate:-30deg; } }
@keyframes cat-snore { from { opacity:0;translate:0 5px; } 50% { opacity:.7; } to { opacity:0;translate:0 -8px; } }
@keyframes cat-wave { from { rotate:-16deg; } to { rotate:18deg; } }
@keyframes butterfly-wing { to { scale:.3 1; } }
@keyframes firefly { to { opacity:.75;translate:15px -12px; } }

/* Anatomie statt Drehen des gesamten Symbols. */
.icon { overflow:visible; }
.motion-ready .nav-link.is-near > .icon { transform:none!important; }
.person-arm { transform-origin:17px 17px; }
.person-smile,.person-eyes { opacity:0; }
.motion-ready :is(.is-near,:hover,:focus-visible,:focus-within) > .icon-user .person-arm,.motion-ready .icon-user.scene-icon-live .person-arm { animation:person-wave 650ms ease-in-out 3 alternate; }
.motion-ready :is(.is-near,:hover,:focus-visible,:focus-within) > .icon-user :is(.person-smile,.person-eyes),.motion-ready .icon-user.scene-icon-live :is(.person-smile,.person-eyes) { opacity:1; }
.motion-ready .icon-heart.scene-icon-live { animation:heart-beat 4.8s ease-in-out infinite;transform-origin:center; }
.motion-ready :is(:hover,:focus-visible) > .icon-heart { animation:heart-beat 1.2s ease-in-out infinite; }
.motion-ready .nav-link.is-near .icon-sun > path { animation:sun-rays 2s ease-in-out infinite;transform-origin:12px 12px; }
.motion-ready .nav-link.is-near .icon-cards .cards-front { animation:cards-fan 1.2s ease-in-out 2;transform-origin:5px 20px; }
.motion-ready .nav-link.is-near .icon-chart .chart-bar { animation:bar-grow 950ms ease-in-out 2;transform-origin:bottom;transform-box:fill-box; }
.motion-ready .nav-link.is-near .bar-two { animation-delay:120ms!important; }.motion-ready .nav-link.is-near .bar-three { animation-delay:240ms!important; }
.motion-ready :is(:hover,:focus-visible) > .icon-logout .logout-door { animation:door-open 900ms ease-in-out infinite alternate;transform-origin:3px 12px; }
.motion-ready :is(:hover,:focus-visible) > .icon-logout .logout-arrow { animation:walk-out 1.4s ease-in-out infinite; }
.motion-ready :is(:hover,:focus-within) > .icon-eye > circle { animation:eye-look 2.2s ease-in-out infinite; }
.motion-ready .section-heading > .icon-shield.scene-icon-live > path:last-child { stroke-dasharray:24;animation:check-draw 2s ease-out; }
.motion-ready .empty-state > .icon-folder.scene-icon-live { animation:folder-peek 4s ease-in-out 2;transform-origin:center bottom; }
.motion-ready :is(.folder-group,.admin-menu)[open] > summary .icon-folder { animation:folder-peek 500ms ease-out; }
.motion-ready .editor-toolbar > button:hover .icon,.motion-ready .editor-toolbar > button:focus-visible .icon { animation:tool-sketch 500ms ease-out; }
.motion-ready :is(.pagination,.admin-tabs) > a:hover { text-decoration:underline;text-underline-offset:5px; }
.motion-ready .notice.error .icon { animation:thoughtful-no 500ms ease-in-out 2; }
.motion-ready .confirm-dialog[open] .button-primary .icon { animation:check-draw 600ms ease-out; }
.motion-ready .preview-panel.has-preview::after { content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 25%,color-mix(in srgb,var(--primary-soft) 40%,transparent) 50%,transparent 75%);background-size:200% 100%;animation:preview-sweep 700ms ease-out; }
@keyframes person-wave { from { rotate:-8deg; } to { rotate:-38deg; } }
@keyframes heart-beat { 0%,20%,100% { scale:1; } 5%,13% { scale:1.25; } 9%,17% { scale:1.04; } }
@keyframes sun-rays { 50% { scale:1.14;rotate:15deg; } }
@keyframes cards-fan { 50% { rotate:12deg;translate:2px -1px; } }
@keyframes bar-grow { 0%,100% { scale:1 1; } 45% { scale:1 .3; } }
@keyframes door-open { to { transform:perspective(70px) rotateY(-45deg); } }
@keyframes walk-out { 0%,100% { translate:0;opacity:1; } 65% { translate:4px;opacity:0; } 66% { translate:-3px;opacity:0; } }
@keyframes eye-look { 25% { translate:2px; } 75% { translate:-2px; } }
@keyframes check-draw { from { stroke-dashoffset:24; } to { stroke-dashoffset:0; } }
@keyframes folder-peek { 45% { transform:perspective(100px) rotateX(-20deg) scale(1.1); } }
@keyframes tool-sketch { 35% { translate:1px -3px;rotate:-12deg; } 70% { translate:-1px 0;rotate:8deg; } }
@keyframes thoughtful-no { 25% { translate:-2px; } 75% { translate:2px; } }
@keyframes preview-sweep { from { background-position:100% 0;opacity:0; } 25% { opacity:1; } to { background-position:-100% 0;opacity:0; } }

/* Die Vorderseite geht, die echte Antwortseite kommt aus der Tiefe. */
.study-flip-ghost { position:fixed!important;z-index:20;pointer-events:none!important;margin:0!important;overflow:hidden;backface-visibility:hidden;transform-origin:center center; }
.study-card.is-flipping { backface-visibility:hidden;transform-origin:center center; }
.study-card.is-revealed .study-front { font-size:1.05rem;color:var(--muted);margin-bottom:16px; }
.study-card.is-revealed .study-answer { border-top:1px solid var(--border);padding-top:24px; }
.study-card.is-revealed .study-answer .markdown { font-size:1.15rem; }
.study-flip-ghost .motion-surface { display:none!important; }
@media(min-width:1201px) { .welcome-panel .welcome-copy { width:68%; }.welcome-panel { min-height:400px; } }
@media(max-width:1200px) and (min-width:761px) { .welcome-panel > .plant-scene { width:230px;right:0;opacity:.8; }.welcome-panel .welcome-copy h2,.welcome-panel .welcome-copy>p { max-width:calc(100% - 200px); } }
@media(max-width:760px) { .welcome-panel > .plant-scene { width:180px;height:210px;right:-15px;top:35px;padding-top:0;opacity:.8; }.auth-story .plant-scene { position:absolute;width:150px;right:-22px;bottom:-10px;margin:0;opacity:.6; }.auth-story .plant-scene .plant-art { height:auto; }.auth-runway { margin-top:70px; }.companion-runway { height:56px; }.companion-traveller { width:76px;height:52px; }.mood-controls { align-items:flex-start; }.mood-controls > p { max-width:60%; }.page-footer { margin-top:76px; } }
@media(max-width:480px) { .welcome-panel > .plant-scene { width:142px;height:170px;right:-8px;top:95px; }.mood-controls { flex-wrap:wrap; }.mood-controls > p { max-width:none;flex:1;min-width:140px; }.motion-switch { font-size:.65rem; }.study-companion { height:38px; } }
@media print { .plant-bee,.plant-dew,.companion-runway,.auth-runway,.study-companion,.study-flip-ghost { display:none!important; }.page-footer { margin-top:30px; } }

/* Arbeitsbezogene Miniaturen: jede Seite erzählt eine eigene kleine Geschichte. */
.page-story { width:92px;height:78px;flex-shrink:0;color:var(--primary);overflow:visible;pointer-events:none; }
.page-heading.has-page-story { align-items:center;gap:16px; }.page-heading.has-page-story > div:first-child { flex:1;min-width:0; }
.auth-card.has-page-story,.auth-panel.has-page-story,.error-panel.has-page-story { position:relative; }
:is(.auth-card,.auth-panel,.error-panel) > .page-story { position:absolute;right:24px;top:20px;width:70px;height:60px;opacity:.7; }
:is(.auth-card,.auth-panel,.error-panel).has-page-story > :is(h1,h2) { padding-right:55px; }
.desk-light { opacity:.15; }.desk-steam { opacity:.7; }
.motion-ready .scene-playing.story-desk .desk-light { animation:lamp-warmth 7s ease-in-out infinite;transform-origin:29px 66px; }
.motion-ready .scene-playing.story-desk .desk-steam { animation:tea-steam 4s ease-out infinite; }
.motion-ready .scene-playing.story-desk .desk-book { animation:book-breathe 7s ease-in-out infinite;transform-origin:74px 81px; }
.motion-ready .scene-playing.story-plane .paper-plane { animation:paper-flight 8s cubic-bezier(.45,0,.25,1) infinite;transform-origin:78px 37px; }
.motion-ready .scene-playing .plane-trail { animation:flight-trace 8s ease-in-out infinite; }
.motion-ready .scene-playing .story-pencil { animation:pencil-write 5s ease-in-out infinite;transform-origin:60px 74px; }
.motion-ready .scene-playing .pencil-writing { stroke-dasharray:1;animation:ink-appear 5s ease-in-out infinite; }
.motion-ready .scene-playing .packing-cards { animation:cards-pack 6s ease-in-out infinite; }
.motion-ready .scene-playing .box-flap { animation:box-close 6s ease-in-out infinite;transform-origin:center bottom;transform-box:fill-box; }
.motion-ready .scene-playing .story-lens { animation:lens-search 6s ease-in-out infinite; }
.motion-ready .scene-playing .search-dots > circle { animation:search-find 6s ease-in-out infinite; }.motion-ready .scene-playing .search-dots > circle:nth-child(2) { animation-delay:1s; }.motion-ready .scene-playing .search-dots > circle:nth-child(3) { animation-delay:2s; }
.motion-ready .scene-playing .story-book { animation:book-open 7s ease-in-out infinite;transform-origin:center bottom;transform-box:fill-box; }.motion-ready .scene-playing .book-two { animation-delay:1s; }.motion-ready .scene-playing .book-three { animation-delay:2s; }
.motion-ready .scene-playing .story-bookmark { animation:bookmark-drop 7s ease-in-out infinite; }
.motion-ready .scene-playing .palette-brush { animation:brush-paint 6s ease-in-out infinite;transform-origin:58px 84px; }
.motion-ready .scene-playing .palette-dots > circle { animation:paint-colour 6s ease-in-out infinite;transform-origin:center;transform-box:fill-box; }.motion-ready .scene-playing .palette-dots > circle:nth-child(2) { animation-delay:.5s; }.motion-ready .scene-playing .palette-dots > circle:nth-child(3) { animation-delay:1s; }
.motion-ready .scene-playing .gear-one { animation:gear-turn 8s linear infinite;transform-origin:44px 55px; }.motion-ready .scene-playing .gear-two { animation:gear-turn 5.63s linear infinite reverse;transform-origin:81px 34px; }
.completion-story { display:block;width:140px;height:110px;margin:0 auto 20px; }.study-complete:has(.completion-story) > .complete-icon { display:none; }
.motion-ready .scene-playing .star-trail { stroke-dasharray:1;animation:constellation-draw 2s ease-out both; }
.motion-ready .scene-playing .constellation-stars { animation:stars-light 3s ease-out both;transform-origin:center; }
@keyframes lamp-warmth { 50% { opacity:.65;scale:1.15; } }
@keyframes tea-steam { from { opacity:0;translate:0 3px; } 40% { opacity:.8; } to { opacity:0;translate:2px -8px; } }
@keyframes book-breathe { 50% { scale:1 .88; } }
@keyframes paper-flight { 0%,15%,100% { translate:-10px 8px;rotate:-7deg; } 50% { translate:8px -12px;rotate:10deg; } 75% { translate:15px -20px;rotate:-12deg; } }
@keyframes flight-trace { 0%,100% { stroke-dashoffset:1;opacity:0; } 40%,80% { stroke-dashoffset:0;opacity:.4; } }
@keyframes pencil-write { 0%,80%,100% { translate:0;rotate:0deg; } 20% { translate:-20px -12px;rotate:8deg; } 40% { translate:4px -12px;rotate:-3deg; } 60% { translate:-10px 0;rotate:7deg; } }
@keyframes ink-appear { 0%,10%,100% { stroke-dashoffset:1; } 65%,85% { stroke-dashoffset:0; } }
@keyframes cards-pack { 0%,100% { translate:0 -10px;opacity:0; } 15% { opacity:1; } 50%,75% { translate:0 29px;opacity:1; } 85% { opacity:0; } }
@keyframes box-close { 0%,35%,100% { scale:1 1; } 60%,80% { scale:1 -.1; } }
@keyframes lens-search { 0%,100% { translate:-12px;rotate:-12deg; } 40% { translate:20px;rotate:10deg; } 70% { translate:0 4px;rotate:0; } }
@keyframes search-find { 40%,60% { fill:var(--accent);r:5; } }
@keyframes book-open { 0%,65%,100% { rotate:0; } 30%,45% { rotate:-14deg; } }
@keyframes bookmark-drop { 0%,100% { translate:0 -10px;opacity:.1; } 40%,75% { translate:0;opacity:1; } }
@keyframes brush-paint { 35% { rotate:13deg;translate:0 -9px; } 65% { rotate:-6deg;translate:-9px -2px; } }
@keyframes paint-colour { 30% { scale:1.22; } }
@keyframes gear-turn { to { rotate:360deg; } }
@keyframes constellation-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes stars-light { 0% { opacity:.1;scale:.75; } 65% { opacity:1;scale:1.1; } 100% { opacity:1;scale:1; } }
@media(max-width:760px) { .page-story { width:64px;height:58px; }.page-heading.has-page-story { gap:10px; }:is(.auth-card,.auth-panel,.error-panel) > .page-story { width:55px;height:48px;right:18px;top:12px; } }
@media(max-width:380px) { .page-story { width:46px;height:45px; }.page-heading.has-page-story { gap:6px; } }
@media print { .page-story { display:none!important; } }
.rating-mood { display:block;width:28px;height:28px;margin:0 auto 6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }
.mood-eyes { transform-origin:18px 14px; }
.motion-ready .rating:is(:hover,:focus-visible) .mood-eyes { animation:cat-blink 1.5s linear infinite; }
.motion-ready .rating:is(:hover,:focus-visible) .mood-mouth { stroke-dasharray:45;animation:smile-draw 650ms ease-out; }
.motion-ready .admin-menu nav > a { position:relative; }
.motion-ready .admin-menu nav > a::after { content:'✦';position:absolute;right:4px;top:50%;font-size:10px;opacity:0;transform:translate(-15px,-50%) scale(.3);transition:transform 350ms cubic-bezier(.2,1.3,.4,1),opacity 180ms; }
.motion-ready .admin-menu nav > a:is(:hover,:focus-visible)::after { opacity:.8;transform:translate(0,-50%) scale(1); }
.motion-ready .filter-form:focus-within .icon-search { animation:lens-search 3s ease-in-out infinite; }
@keyframes smile-draw { from { stroke-dashoffset:45; } to { stroke-dashoffset:0; } }
.motion-ready .scene-playing .connection-plug { animation:connection-reach 5s ease-in-out infinite; }
@keyframes connection-reach { 0%,100% { translate:0; } 50% { translate:12px; } }

/* Ensemble-Bühne: bis zu drei unterscheidbare Figuren, eine gemeinsame Zeitleiste. */
.companion-runway { height:78px; }
.companion-traveller { width:var(--cat-size,86px);height:calc(var(--cat-size,86px) * .68);z-index:2; }
.companion-traveller[hidden] { display:none!important; }
.companion-traveller[data-cat="1"] { color:var(--primary-dark); }
.companion-traveller[data-cat="2"] { color:color-mix(in srgb,var(--primary) 76%,var(--accent)); }
.companion-cat { transform-origin:50% 100%;transform-box:view-box; }
.cat-pose { transform-origin:50px 62px; }
.cat-markings { stroke-width:2.7;opacity:.35; }
.companion-props { position:absolute;inset:0;pointer-events:none;z-index:3; }
.companion-box { position:absolute;bottom:-4px;left:0;width:80px;height:40px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0; }
.cat-box-back { fill:var(--primary-soft); }.cat-box-front { fill:var(--accent); }
.companion-hearts { position:absolute;left:0;bottom:31px;width:48px;height:35px;fill:var(--accent);stroke:currentColor;stroke-width:.8;opacity:0; }
.companion-toy[data-object] { z-index:4;bottom:-5px; }
.companion-toy[data-object="ball"] .toy-yarn,.companion-toy[data-object="butterfly"] .toy-butterfly { display:block; }
.motion-ready .companion-toy[data-object="butterfly"] .toy-butterfly { animation:butterfly-wing 350ms ease-in-out infinite alternate;transform-origin:20px 20px; }
.study-companion .companion-runway { height:66px; }
@media(max-width:760px) { .companion-runway { height:72px; }.companion-traveller { width:var(--cat-size,76px);height:calc(var(--cat-size,76px) * .68); } }
@media print { .companion-props { display:none!important; } }

/* Der Zeiger bleibt bedienbar; nur die dekorativen Katzen reagieren auf seine Nähe. */
.companion-runway[data-cat-reaction] .companion-cat * { animation:none!important; }
.companion-runway[data-cat-reaction] :is(.companion-toy,.companion-props,.companion-spark) { opacity:0!important; }
.companion-runway[data-cat-reaction] :is(.cat-is-catching,.cat-is-startled) .cat-snores { opacity:0!important; }
.companion-runway[data-cat-reaction] :is(.cat-is-catching,.cat-is-startled) .cat-eyes { transform:scaleY(1)!important;scale:1; }
.companion-runway[data-cat-reaction="catch"] .cat-is-catching :is(.cat-legs-front,.cat-wave) { opacity:0!important; }
.cat-reaching-paw { stroke-width:2.5; }
.companion-runway[data-cat-reaction="return"] .cat-reaching-paw { opacity:0; }
.cat-startle-lines { stroke-width:1.7; }
.motion-ready .companion-runway[data-cat-reaction="catch"] .cat-is-catching .cat-tail { animation:cat-tail 450ms ease-in-out infinite!important; }
.motion-ready .companion-runway[data-cat-reaction="scatter"] .cat-is-startled .cat-tail { rotate:-28deg;stroke-width:3.1; }

/* Eigene Körperhaltungen und Requisiten für Fellpflege, Schlaf und Mau-Miau. */
.cat-card-hand { fill:var(--surface);stroke-width:1.35; }
.cat-card-hand > path { fill:var(--accent); }
.cat-groom-paw { transform-origin:64px 48px; }
.cat-tongue { stroke:color-mix(in srgb,var(--accent) 55%,#c96b7b);stroke-width:2.3;opacity:0; }
.cat-resting { opacity:0; }
.cat-resting > ellipse,.cat-rest-head > path:first-child { fill:var(--surface); }
.cat-rest-belly { fill:var(--primary-soft);stroke:none;opacity:.7; }
.cat-rest-head > path:last-child,.cat-rest-tail { fill:none; }
.cat-purr { stroke-width:1.2;fill:none; }
.cat-purr > path { opacity:0; }
.cat-dig-paws { transform-origin:63px 45px; }
.companion-runway:not([data-cat-reaction]) :is([data-cat-pose="groom"],[data-cat-pose="dig"]) .cat-legs-front { opacity:0; }
.companion-card-table { position:absolute;bottom:-2px;height:50px;fill:var(--primary-soft);stroke:currentColor;stroke-width:1.5;overflow:visible; }
.companion-dealt-card { position:absolute;left:0;bottom:0;width:17px;height:24px;fill:var(--surface);stroke:currentColor;stroke-width:1.4;opacity:0; }
.companion-dealt-card > path { fill:var(--accent); }
.companion-runway[data-vignette="dig-hole"] { overflow:visible;contain:layout; }
.companion-hole { position:absolute;bottom:-20px;width:80px;height:29px;overflow:visible;opacity:0;transform-origin:50% 12px; }
.hole-cover { fill:var(--bg);stroke:none; }
.hole-shadow { fill:var(--primary-soft);stroke:none; }
.hole-rim { fill:none;stroke:currentColor;stroke-width:1.4; }
.companion-dirt-heap { position:absolute;bottom:-6px;width:58px;height:40px;fill:var(--primary-soft);stroke:currentColor;stroke-width:1.1;transform-origin:50% 100%; }
.companion-dirt-grain { position:absolute;left:0;bottom:-1px;width:7px;height:7px;fill:var(--accent);stroke:currentColor;stroke-width:.7;opacity:0; }
.companion-runway[data-cat-reaction] :is(.cat-resting,.cat-purr,.cat-groom-paw,.cat-tongue,.cat-dig-paws,.cat-card-hand) { opacity:0!important; }
.companion-runway[data-cat-reaction] :is(.cat-is-catching,.cat-is-startled) :is(.cat-body,.cat-head,.cat-legs-back,.cat-markings) { opacity:1!important; }
.companion-runway[data-cat-reaction] :is(.cat-is-catching,.cat-is-startled) .cat-legs-front { opacity:1; }