/* Gemeinsame Bewegung für alle Farbwelten. Dekoration bewegt sich, Trefferflächen bleiben fest. */
body {
    --motion-ease:cubic-bezier(.22,1,.36,1);
    --motion-enter:540ms;
    --motion-hover:240ms;
    --motion-loop:6.5s;
}
body[data-theme="elegant"],body[data-theme="elegant-motion"] {
    --motion-ease:cubic-bezier(.2,.8,.25,1);
    --motion-enter:560ms;
    --motion-hover:260ms;
    --motion-loop:7.5s;
}
body[data-theme="fresh"],body[data-theme="fresh-motion"] {
    --motion-ease:cubic-bezier(.2,1.12,.32,1);
    --motion-enter:460ms;
    --motion-hover:200ms;
    --motion-loop:5.5s;
}
body[data-motion="on"] {
    background-image:radial-gradient(ellipse at 92% 0%,color-mix(in srgb,var(--primary-soft) 70%,transparent),transparent 48%);
}
[data-motion="on"] .sidebar {
    background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--surface) 90%,var(--primary-soft)));
    box-shadow:8px 0 32px color-mix(in srgb,var(--primary-dark) 3%,transparent);
}
[data-motion="on"] .brand-mark {
    background:linear-gradient(145deg,var(--primary),var(--primary-dark));
    box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 16%,transparent);
}
[data-motion="on"] .welcome-panel {
    isolation:isolate;
    background:linear-gradient(115deg,var(--hero),var(--surface-soft) 58%,var(--primary-soft));
    box-shadow:inset 0 1px 0 var(--surface),0 12px 36px color-mix(in srgb,var(--primary-dark) 5%,transparent);
}
[data-motion="on"] .welcome-panel::before {
    content:'';position:absolute;inset:-25px;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse at 75% 20%,color-mix(in srgb,var(--accent) 66%,transparent),transparent 42%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 54%);
}
[data-motion="on"] .welcome-panel::after {
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.1;
    background-image:radial-gradient(var(--primary) .8px,transparent .8px);background-size:22px 22px;
    mask-image:linear-gradient(90deg,transparent 30%,#000);
}
[data-motion="on"] .tip-panel {
    background:linear-gradient(145deg,var(--primary),var(--primary-dark));
    border:1px solid var(--primary-dark);color:var(--surface);
    box-shadow:0 12px 32px color-mix(in srgb,var(--primary-dark) 12%,transparent);
}
[data-motion="on"] .tip-panel > :is(.eyebrow,p,.tip-icon) { color:color-mix(in srgb,var(--surface) 90%,var(--accent)); }
[data-motion="on"] .tip-panel .tip-icon { background:color-mix(in srgb,var(--surface) 10%,transparent); }
[data-motion="on"] .tip-dots > span { background:var(--accent); }
[data-motion="on"] .progress-track > span { transform-origin:left center;background:linear-gradient(90deg,var(--primary-dark),var(--primary)); }
[data-motion="on"] [data-stat] { font-variant-numeric:tabular-nums; }
.hero-footer { display:flex;align-items:center;flex-wrap:wrap;margin-top:20px; }
.welcome-panel .hero-footer .hero-footnote { display:flex;align-items:center;margin:0; }

.motion-proximity { --near:0;--pointer-x:50%;--pointer-y:50%;--magnet-x:0px;--magnet-y:0px;--tilt-x:0deg;--tilt-y:0deg; }
.motion-surface { display:none; }
.rating:hover { transform:none; }

/* Stabile äußere Boxen; nur ihre frei liegenden Oberflächen besitzen Tiefe. */
.motion-ready :is(.motion-card,.motion-magnet) { position:relative;isolation:isolate;transform:none; }
.motion-ready .motion-card { background:transparent;border-color:transparent;box-shadow:none; }
.motion-ready .motion-card > .motion-surface {
    position:absolute;inset:-1px;width:auto;height:auto;display:block;z-index:-1;pointer-events:none;
    border:1px solid var(--border);border-radius:inherit;
    background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--surface) 96%,var(--primary-soft)));
    box-shadow:inset 0 1px 0 var(--surface),var(--shadow);
    transform:perspective(950px) translateY(calc(var(--near,0) * -5px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transition:transform var(--motion-hover) var(--motion-ease),border-color var(--motion-hover),box-shadow var(--motion-hover);
}
.motion-ready .motion-card.is-near > .motion-surface {
    border-color:color-mix(in srgb,var(--primary) 65%,var(--border));
    box-shadow:0 13px 30px color-mix(in srgb,var(--primary-dark) 13%,transparent),inset 0 1px 0 var(--surface);
}
.motion-ready .motion-surface::after {
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--near,0);
    background:radial-gradient(300px circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--accent) 40%,transparent),transparent 80%);
    transition:opacity 220ms;
}
.motion-ready .motion-magnet:has(> .motion-surface) { background:transparent!important;box-shadow:none!important;border-color:transparent; }
.motion-ready .motion-magnet > .motion-surface {
    display:block;position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;
    background:linear-gradient(125deg,var(--primary),var(--primary-dark));
    border:1px solid color-mix(in srgb,var(--primary-dark) 80%,white);
    box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 20%,transparent),inset 0 1px 0 #ffffff30;
    transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0);
    transition:transform var(--motion-hover) var(--motion-ease),box-shadow var(--motion-hover);
}
.motion-ready .motion-magnet.is-near > .motion-surface { box-shadow:0 11px 25px color-mix(in srgb,var(--primary) 30%,transparent),inset 0 1px 0 #ffffff40; }
.motion-ready .motion-magnet > .motion-surface::after { background:radial-gradient(160px circle at var(--pointer-x,50%) var(--pointer-y,50%),#ffffff38,transparent 80%); }
.motion-ready :is(.button,.rating,.editor-toolbar > button,.icon-button,.motion-control) { position:relative; }
.motion-ready .button:hover { transform:none; }
.motion-ripple-clip { position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2; }
.motion-ripple { position:absolute;width:32px;height:32px;pointer-events:none;border-radius:50%;background:currentColor;z-index:2; }
.motion-ready :is(.button-secondary,.button-quiet,.rating,.icon-button) { transition:background-color 200ms,box-shadow 200ms,border-color 200ms; }
.motion-ready .button-secondary:hover { box-shadow:0 5px 18px color-mix(in srgb,var(--primary) 12%,transparent); }
.motion-ready :is(.button,.text-link,.back-link,.note-tile,.leech-row,.onboarding-steps > a) > .icon:last-of-type { transition:transform var(--motion-hover) var(--motion-ease); }
.motion-ready :is(.button,.text-link,.note-tile,.leech-row,.onboarding-steps > a):is(:hover,:focus-visible) > .icon:last-of-type { transform:translateX(6px); }
.motion-ready .back-link:hover { text-decoration:underline;text-underline-offset:5px; }
.motion-ready .motion-card :is(.stat-icon,.note-type-icon,.quick-create-icon) { transition:transform var(--motion-hover) var(--motion-ease),box-shadow var(--motion-hover); }
.motion-ready .motion-card.is-near :is(.stat-icon,.note-type-icon,.quick-create-icon) { transform:translateY(calc(var(--near,0) * -5px)) rotate(calc(var(--near,0) * -9deg));box-shadow:0 5px 12px color-mix(in srgb,var(--primary) 12%,transparent); }
.motion-ready .stat-icon .icon { transition:transform var(--motion-hover) var(--motion-ease); }
.motion-ready .stat-card:nth-child(2).is-near .stat-icon .icon { transform:rotate(14deg) scale(1.12); }
.motion-ready .stat-card:nth-child(3).is-near .stat-icon .icon { transform:scale(1.2); }
.motion-ready .stat-card:nth-child(4).is-near .stat-icon .icon { transform:rotate(45deg) scale(1.15); }
.motion-ready .note-tile .note-type-icon::before,.motion-ready .note-tile .note-type-icon::after { content:'';position:absolute;inset:7px;border:1px solid currentColor;border-radius:3px;opacity:0;transition:transform 240ms,opacity 240ms; }
.motion-ready .note-tile .note-type-icon { position:relative; }
.motion-ready .note-tile.is-near .note-type-icon::before { transform:translate(-4px,2px) rotate(-12deg);opacity:.4; }
.motion-ready .note-tile.is-near .note-type-icon::after { transform:translate(4px,-2px) rotate(12deg);opacity:.3; }

/* Navigation und Werkzeugleisten teilen eine gleitende Auswahlfläche. */
.motion-ready .has-motion-marker { position:relative;isolation:isolate; }
.has-motion-marker > :is(a,button) { position:relative;z-index:1; }
.nav-motion-marker,.control-motion-marker {
    position:absolute;left:0;top:0;pointer-events:none;z-index:0;border-radius:10px;opacity:0;
    background:linear-gradient(115deg,var(--primary-soft),color-mix(in srgb,var(--surface-soft) 65%,var(--surface)));
    box-shadow:inset 0 1px 0 var(--surface),0 4px 12px color-mix(in srgb,var(--primary) 5%,transparent);
    transition:transform 340ms var(--motion-ease),width 340ms var(--motion-ease),height 340ms var(--motion-ease),opacity 180ms;
}
.motion-ready .has-motion-marker :is(.nav-link.active,.nav-link:hover,.nav-link.active::before,.current),.motion-ready .has-motion-marker > a[aria-current] { background:transparent; }
.motion-ready .editor-toolbar.has-motion-marker > button:hover { background:transparent; }
.motion-ready .nav-link > .icon,.motion-ready .brand-mark > .icon { transition:transform var(--motion-hover) var(--motion-ease); }
.motion-ready .nav-link.is-near > .icon { transform:translateX(calc(var(--near,0) * 4px)) rotate(calc(var(--near,0) * -8deg)); }
.motion-ready .nav-link:first-of-type.is-near > .icon { transform:rotate(calc(var(--near,0) * 55deg)); }
.motion-ready .brand.is-near .brand-mark > .icon { transform:rotate(-18deg) scale(1.12); }
.motion-ready .editor-toolbar > button:is(:hover,:focus-visible) { color:var(--primary-dark); }

/* Die Illustration lebt in getrennten Ebenen. Keine dauerhafte Textbewegung. */
.motion-ready .plant-art { overflow:visible;pointer-events:none;transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0);transition:transform 400ms var(--motion-ease);filter:drop-shadow(0 12px 12px color-mix(in srgb,var(--primary) 12%,transparent)); }
.motion-ready .plant-leaf { transform-origin:var(--leaf-origin); }
.motion-ready .motion-in-view .plant-leaf { animation:leaf-sway calc(var(--motion-loop) + var(--leaf-order) * .22s) ease-in-out infinite;animation-delay:calc(var(--leaf-order) * -.7s); }
.motion-ready .motion-in-view .plant-orbit { animation:orbit-float 4.8s ease-in-out infinite alternate; }
.motion-ready .motion-in-view .plant-orbit-two { animation-delay:-2.4s;animation-duration:6s; }
.motion-ready .motion-in-view .plant-spark { transform-origin:270px 197px;animation:spark-turn 8s ease-in-out infinite; }
.motion-ready .welcome-panel.motion-in-view::before { animation:atmosphere-drift 9s ease-in-out infinite alternate; }
.motion-ready .welcome-panel.is-near::after { opacity:.2;transition:opacity 260ms; }
.motion-ready .tip-panel .tip-icon,.motion-ready .tip-dots > span,.motion-ready .area-number { transition:transform 300ms var(--motion-ease),background 240ms; }
.motion-ready .tip-panel.is-near .tip-icon { transform:rotate(-14deg) scale(1.12); }
.motion-ready .tip-panel.is-near .tip-dots > span:nth-child(2) { transform:translateY(-6px); }
.motion-ready .tip-panel.is-near .tip-dots > span:nth-child(3) { transform:translateY(-3px); }
.motion-ready .area-row.is-near .area-number { transform:rotate(-6deg) scale(1.08);background:var(--primary-soft); }
.motion-ready .area-row.is-near .progress-track > span { filter:brightness(1.12); }
@keyframes leaf-sway { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(5deg); } }
@keyframes orbit-float { from { transform:translateY(-5px); } to { transform:translateY(8px); } }
@keyframes spark-turn { 0%,100% { transform:rotate(-10deg) scale(.9); } 50% { transform:rotate(25deg) scale(1.12); } }
@keyframes atmosphere-drift { from { transform:translate3d(-2%,1%,0) scale(1);opacity:.65; } to { transform:translate3d(3%,-3%,0) scale(1.1);opacity:1; } }

/* Eingaben und Inhalte bleiben ruhig; der Rahmen zeigt den Arbeitszustand. */
.motion-ready :is(input,select,textarea) { transition:border-color 180ms,box-shadow 180ms,background-color 180ms; }
.motion-ready :is(input,select,textarea):focus { border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); }
.motion-ready .panel:focus-within { border-color:color-mix(in srgb,var(--primary) 60%,var(--border));transition:border-color 220ms; }
.motion-ready .preview-panel { position:relative;isolation:isolate; }
.motion-ready .preview-panel::before { content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid var(--primary);opacity:calc(var(--near,0) * .5);transition:opacity 220ms; }
.motion-ready details > summary { position:relative; }
.motion-ready details > summary::marker { color:var(--primary); }
.motion-ready details[open] > summary { color:var(--primary); }
.motion-ready :is(.folder-group,.draft-list,.cram-filters) > summary { list-style:none; }
.motion-ready :is(.folder-group,.draft-list,.cram-filters) > summary::-webkit-details-marker { display:none; }
.motion-ready .folder-group > summary::after,.motion-ready .draft-list > summary::after,.motion-ready .cram-filters > summary::after { content:'⌄';display:inline-block;margin-left:10px;transition:rotate 260ms;rotate:-90deg; }
.motion-ready :is(.folder-group,.draft-list,.cram-filters)[open] > summary::after { rotate:0deg; }
.motion-ready .folder-group li > a { transition:background-color 180ms,padding-left 220ms var(--motion-ease);border-radius:5px; }
.motion-ready .folder-group li > a:hover { padding-left:6px;background:var(--primary-soft);color:var(--primary); }
.motion-ready .save-state[data-save-state="pending"] > .icon { animation:save-breathe 1s ease-in-out infinite alternate; }
.motion-ready .save-state[data-save-state="success"] > .icon { color:var(--primary); }
@keyframes save-breathe { from { opacity:.3; } to { opacity:1; } }
.motion-ready .study-progress > span { transition:width 420ms var(--motion-ease); }
.motion-ready .rating:hover,.motion-ready .rating:focus-visible { box-shadow:inset 0 0 0 2px currentColor,0 6px 18px color-mix(in srgb,var(--primary-dark) 10%,transparent); }
.motion-ready .rating kbd { display:inline-block;transition:transform 220ms var(--motion-ease); }
.motion-ready .rating:hover kbd { transform:translateY(-3px); }
.study-departure { position:fixed;z-index:12;pointer-events:none;margin:0!important;overflow:hidden; }
.motion-ready .confirm-dialog[open] { animation:dialog-arrive 340ms var(--motion-ease); }
.motion-ready .confirm-dialog[open]::backdrop { animation:backdrop-arrive 220ms ease-out; }
@keyframes dialog-arrive { from { opacity:0;transform:translateY(20px) scale(.96); } to { opacity:1;transform:none; } }
@keyframes backdrop-arrive { from { opacity:0; } to { opacity:1; } }

/* Eine echte kleine Bewegungsvorschau für jede Farbwelt. */
.theme-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.motion-ready .theme-option { transition:border-color 200ms,background-color 200ms; }
.motion-ready .theme-preview { transition:transform 360ms var(--motion-ease),box-shadow 240ms; }
.motion-ready .theme-option:is(.is-near,:focus-within) .theme-preview { transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 12px 22px color-mix(in srgb,var(--primary) 15%,transparent); }
.motion-ready .mini-content > span { transition:transform 380ms var(--motion-ease); }
.motion-ready .theme-option:is(:hover,:focus-within) .mini-content > span:nth-child(1) { transform:translateY(-4px); }
.motion-ready .theme-option:is(:hover,:focus-within) .mini-content > span:nth-child(2) { transform:translateY(-3px);transition-delay:50ms; }
.motion-ready .theme-option:is(:hover,:focus-within) .mini-content > span:nth-child(3) { transform:translateY(-2px);transition-delay:100ms; }
.motion-ready .theme-swatches > i { transition:transform 300ms var(--motion-ease); }
.motion-ready .theme-option:is(:hover,:focus-within) .theme-swatches > i:first-child { transform:translateX(-4px); }
.motion-ready .theme-option:is(:hover,:focus-within) .theme-swatches > i:last-child { transform:translateX(4px); }
.motion-ready .theme-option input:checked ~ .theme-option-title .theme-check { animation:theme-selected 380ms var(--motion-ease); }
@keyframes theme-selected { from { transform:scale(.4) rotate(-25deg);opacity:0; } to { transform:none;opacity:1; } }

/* Seitenwechsel verwenden ausschließlich den dünnen Fortschrittsbalken. */
@view-transition { navigation:none; }

@media(max-width:1100px) { .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.motion-dock { left:calc(var(--frame-offset,0px) + 14px);max-width:calc(var(--sidebar) - 28px); } }
@media(max-width:760px) {
    .motion-dock,.auth-body .motion-dock { left:auto;right:12px;top:10px;max-width:calc(100vw - 24px); }
    .motion-control { min-height:36px;font-size:.5625rem; }
    .app-body .main-content,.learning-page .main-content { padding-top:64px; }
    .auth-body .auth-main { padding-top:62px; }
    .motion-ready .has-motion-marker .nav-link.active::before { opacity:0; }
    .motion-ready .rating kbd { display:none; }
    .hero-footer { margin-top:16px; }
}
@media(max-width:480px) { .theme-options { grid-template-columns:minmax(0,1fr); } }
@media(pointer:coarse) { .motion-control { min-height:44px; }.app-body .main-content,.learning-page .main-content { padding-top:70px; } }
/* Alle dauerhaften und einmaligen Bewegungen enden gemeinsam. */
html:not([data-motion-state="active"]) *,html:not([data-motion-state="active"]) *::before,html:not([data-motion-state="active"]) *::after { animation:none!important;transition:none!important; }
html:not([data-motion-state="active"]) .button:hover { transform:none; }
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}
@media print {
    .motion-dock,.nav-motion-marker,.control-motion-marker,.motion-surface,.study-departure { display:none!important; }
    *,*::before,*::after { animation:none!important;transition:none!important; }
    body[data-motion="on"] { background:white; }
    [data-motion="on"] .welcome-panel::before,[data-motion="on"] .welcome-panel::after { display:none; }
    [data-motion="on"] :is(.panel,.stat-card,.note-tile,.tip-panel,.welcome-panel) { background:white;color:black;box-shadow:none; }
    [data-motion="on"] .tip-panel > :is(.eyebrow,p) { color:black; }
}